Hướng dẫn image/svg html - image / svg html

Question

Đã đăng vào thg 4 19, 2019 9:42 SA 1 phút đọc 1 phút đọc

Lời nói đầu

Các tính năng ưu việt của svg đã có quá nhiều các bài viết nói về nó, trong bài viết này mình sẽ chỉ giới thiệu về cách sử dụng SVG trong HTML/CSS.

SVG là gì?

SVG (Scalable Vector Graphics), là một định dạng hình ảnh (tương tự như JPG, PNG,... mà chúng ta vẫn thường dùng) sử dụng cấu trúc XML để hiển thị hình ảnh dưới dạng vector. Vì là hình ảnh dạng vector nên chúng ta có thể hiển thị, co giãn (scale) thoải mái mà không làm giảm chất lượng hình ảnh. Một ưu điểm của SVG là tất cả mọi element và attribute của các element đó đều có thể animate Ví dụ một file SVG để vẽ hình tròn: :

Hướng dẫn image/svg html - image / svg html

Ví dụ một file SVG để vẽ hình tròn: :

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
svg>

Dùng trong HTML thế nào?

Dùng trực tiếp:

Bạn có thể chèn trực tiếp nội dung file SVG vào trang HTML, cho vào 1 cái thẻ DIV chẳng hạn.

<div class="circle">
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  svg>
div>

Dùng thông qua thẻ IMG

Hoặc bạn có thể dùng qua thẻ IMG như một hình ảnh bình thường.

<img src="circle.svg" />

Dùng trong CSS thế nào?

<div class="icon-facebook">div>

Sử dụng Background Image

.icon-facebook {
  background-image: url("facebook.svg");
  ...
}

Sử dụng Mask Image

với width, height và background color tương ứng

.icon-facebook {
    mask-image: url('facebook.svg');
   display: block;
   width: 20px;
   height: 20px;
   background-color: blue;
  }

Nguồn

Bài viết phía trên được tham khảo từ Techblog.vn :https://techblog.vn/su-dung-file-svg-cho-website và một số nguồn khác. Phần tới mình sẽ cùng tìm hiểu một số hiệu ứng khá hay khi sử dụng SVG

SVG là một định dạng hình ảnh cho đồ họa vector. Nghĩa đen của nó có nghĩa là Đồ họa Vectơ có thể mở rộng. Về cơ bản, những gì bạn làm việc với Adobe Illustrator. Bạn có thể sử dụng SVG trên web khá dễ dàng, nhưng có rất nhiều điều bạn nên biết.

Các bài viết liên quan:

Tại sao lại sử dụng SVG?
Nhận định về SVG
Sử dụng SVG trong tag
Sử dụng SVG làm hình nền
Sự cố với và background-image…
Sử dụng SVG làm
Như
Như CSS
Như
Định dạng cho URI dữ liệu

Tại sao lại sử dụng SVG?

Nhận định về SVG
Sử dụng SVG trong tag
Sử dụng SVG làm hình nền
Sự cố với và background-image…

Nhận định về SVG

Sử dụng SVG trong tag

Sử dụng SVG làm hình nền

Sự cố với và background-image…

Sử dụng SVG làm

Kích thước tệp nhỏ nén tốt

Cân ở bất kỳ kích thước nào mà không làm mất độ trong (ngoại trừ rất nhỏ)

Trông tuyệt vời trên màn hình retina

Sử dụng SVG trong tag

Sử dụng SVG làm hình nền

Sự cố với và background-image…

Sử dụng SVG làm

.papa {
  width: 250px;
}

.mama {
  width: 100px;
}

.baby {
  width: 50px;
}

img {
  vertical-align: top;
}

body {
  padding: 20px;
}

Kích thước tệp nhỏ nén tốt

Cân ở bất kỳ kích thước nào mà không làm mất độ trong (ngoại trừ rất nhỏ)

Trông tuyệt vời trên màn hình retina

Thiết kế kiểm soát như tương tác và bộ lọc

Thiết kế một cái gì đó trong Adobe Illustrator.

if (!Modernizr.svg) {
  $(".logo img").attr("src", "images/logo.png");
}

Lưu ý rằng bảng vẽ được cắt lên ngay trên các cạnh của thiết kế. Canvas quan trọng trong SVG giống như ở PNG hoặc JPG.

<div class="circle">
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  svg>
div>

0

Xem thêm Thuật ngữ & định nghĩa SEO bạn cần biết

Sử dụng SVG làm hình nền

Sự cố với và background-image…

<div class="circle">
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  svg>
div>

1

Sử dụng SVG làm

Kích thước tệp nhỏ nén tốt

Hỗ trợ trình duyệt

Sử dụng SVG trong image background SVG tương tự img. Các trình duyệt gặp sự cố duy nhất là IE 8 trở xuống và Android 2.3 trở xuống.

Modernizr có thể giúp chúng tôi ở đây và theo cách hiệu quả hơn là sử dụng img. Nếu chúng tôi thay thế hình nền bằng định dạng được hỗ trợ, chỉ một yêu cầu HTTP sẽ được thực hiện thay vì hai. Modernizr thêm tên lớp là “no-svg” vào phần tử html nếu nó không hỗ trợ SVG, vì vậy chúng tôi sử dụng tên đó:

<div class="circle">
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  svg>
div>

3

Một kỹ thuật nâng cao tiến bộ thông minh khác để sử dụng SVG làm hình nền là sử dụng nó kết hợp với nhiều hình nền. SVG và nhiều nền có hỗ trợ trình duyệt rất giống nhau, vì vậy nếu trình duyệt hỗ trợ nhiều nền, nó hỗ trợ SVG và khai báo sẽ hoạt động (và ghi đè mọi khai báo trước đó).

<div class="circle">
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  svg>
div>

4

Xem thêm Tìm hiểu về ngôn ngữ R trong data science

Sự cố với và background-image…

Đó là bạn không thể kiểm soát các phần bên trong của SVG bằng CSS như bạn có thể làm bằng hai cách sau. Đọc tiếp!

Sử dụng SVG “nội tuyến”

Hãy nhớ cách bạn có thể lấy mã SVG ngay từ Illustrator trong khi lưu nếu bạn muốn? (Bạn cũng có thể chỉ mở tệp SVG trong trình soạn thảo văn bản và lấy mã đó.) Bạn có thể thả mã đó ngay vào tài liệu HTML và hình ảnh SVG sẽ hiển thị giống như khi bạn đặt nó trong img.

<div class="circle">
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  svg>
div>

5

Điều này có thể tốt vì hình ảnh xuất hiện ngay trong tài liệu và không cần thực hiện thêm yêu cầu HTTP. Nói cách khác, nó có những lợi thế tương tự như sử dụng URI dữ liệu. Nó cũng có những nhược điểm tương tự. Một tài liệu có khả năng bị “cồng kềnh”, một phần lớn nội dung tào lao ngay trong tài liệu bạn đang cố gắng tạo và không có khả năng lưu vào bộ nhớ cache.

Nếu bạn đang sử dụng ngôn ngữ kết thúc có thể tải xuống tệp và chèn nó, ít nhất bạn có thể làm sạch trải nghiệm tác giả. Như:

<div class="circle">
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  svg>
div>

6

Một điều cụ thể về PHP ở đây… nó đã được chứng minh cho tôi rằng file_get_contents () là hàm chính xác ở đây, không phải include () hoặc include_once () như tôi đã sử dụng trước đây. Cụ thể là vì SVG đôi khi được xuất với Là dòng mở đầu, điều này sẽ khiến trình phân tích cú pháp PHP bị nghẹt.

Tối ưu hóa nó trước

Có thể không phải là một cú sốc lớn, nhưng SVG mà Adobe Illustrator cung cấp cho bạn không được tối ưu hóa một cách đặc biệt. Nó có một DOCTYPE và ghi chú của trình tạo và tất cả những thứ rác rưởi đó. SVG đã khá nhỏ, nhưng tại sao chúng ta không làm được tất cả những gì có thể? Peter Collingridge có một công cụ SVG Optimiser trực tuyến. Tải lên cái cũ, tải xuống cái mới. Trong video của Kyle Foster, anh ấy thậm chí còn đi xa hơn nữa và loại bỏ các ngắt dòng sau khi tối ưu hóa này.

Nếu bạn thậm chí còn khó tính hơn, đây là một công cụ Node JS để bạn tự làm điều đó.

Bây giờ bạn có thể kiểm soát bằng CSS!

Xem SVG trông giống HTML như thế nào? Đó là vì cả hai về cơ bản đều là XML (các thẻ được đặt tên có dấu ngoặc nhọn với nội dung bên trong). Trong thiết kế của chúng tôi, chúng tôi có hai yếu tố tạo nên thiết kế, một và một . Chúng ta có thể nhảy vào mã và đặt tên lớp cho chúng, giống như bất kỳ phần tử HTML nào khác có thể có.

<div class="circle">
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  svg>
div>

7

Bây giờ trong bất kỳ CSS nào trên trang này, chúng tôi có thể kiểm soát các phần tử riêng lẻ đó bằng SVG CSS đặc biệt. Điều này không nhất thiết phải được nhúng CSS trong chính SVG, nó có thể ở bất kỳ đâu, ngay cả trong biểu định kiểu chung của chúng tôi đã chỉnh sửa. Lưu ý rằng các phần tử SVG có một tập hợp các thuộc tính CSS đặc biệt hoạt động trên chúng. Ví dụ, nó không phải là màu nền, nó là màu tô. Bạn có thể sử dụng những thứ bình thường như: di chuột mặc dù.

<div class="circle">
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  svg>
div>

8

Tuyệt vời hơn nữa, SVG có tất cả các bộ lọc ưa thích này. Ví dụ như làm mờ. Chèn một bộ lọc trong của bạn:

<div class="circle">
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  svg>
div>

9

Thông tin thêm về việc áp dụng bộ lọc cho SVG

Danh sách tốt nhất mà tôi có thể tìm thấy về các thuộc tính CSS dành riêng cho SVG (dành riêng cho Opera)

Sân chơi hiệu ứng bộ lọc SVG (từ Microsoft)

See the Pen SVG with Filters by Chris Coyier (@chriscoyier) on CodePen.

Hỗ trợ trình duyệt

Inline SVG có bộ hỗ trợ trình duyệt của riêng nó, nhưng một lần nữa, về cơ bản nó chỉ là một vấn đề trong IE 8 trở xuống và Android 2.3 trở xuống1.

<img src="circle.svg" />

0

Một cách để xử lý dự phòng cho loại SVG này là:

<img src="circle.svg" />

1

Sử dụng SVG làm object>

Nếu SVG “nội tuyến” không phải là vấn đề của bạn (hãy nhớ rằng nó có một số nhược điểm hợp pháp như khó lưu vào bộ nhớ cache), bạn có thể liên kết đến tệp SVG và giữ lại khả năng ảnh hưởng đến các phần của nó bằng CSS bằng cách sử dụng .

<img src="circle.svg" />

2

Đối với dự phòng, phát hiện Modernizr sẽ hoạt động tốt ở đây:

<img src="circle.svg" />

3

Điều này sẽ hoạt động tốt với bộ nhớ đệm và thực sự có hỗ trợ sâu hơn so với việc sử dụng nó theo bất kỳ cách nào khác. Tuy nhiên, nếu bạn muốn nội dung CSS hoạt động, bạn không thể sử dụng biểu định kiểu bên ngoài hoặc trên tài liệu, bạn cần sử dụng phần tử bên trong chính tệp SVG.

<img src="circle.svg" />

4

Các bảng định kiểu bên ngoài cho SVG

SVG có một cách để khai báo một biểu định kiểu bên ngoài, điều này có thể hữu ích cho việc tạo và lưu vào bộ nhớ đệm. Điều này chỉ hoạt động với nhúng các tệp SVG theo như tôi đã thử nghiệm. Bạn sẽ cần đặt mã này vào tệp SVG phía trên thẻ mở .

<img src="circle.svg" />

5

Nếu bạn đặt điều đó vào HTML của mình, trang sẽ bị chặn và thậm chí không thể hiển thị. Nếu bạn liên kết tệp SVG có trong đó dưới dạng hoặc background-image, tệp đó sẽ không hoạt động nhưng sẽ không hoạt động (SVG vẫn sẽ hiển thị).

URL dữ liệu dành cho SVG

Một cách khác để sử dụng SVG là chuyển đổi chúng thành URL dữ liệu. URL dữ liệu có thể không giúp bạn tiết kiệm kích thước tệp thực tế, nhưng có thể hiệu quả hơn vì dữ liệu ở ngay tại đó. Nó không yêu cầu yêu cầu mạng bổ sung.

Mobilefish.com có một công cụ chuyển đổi trực tuyến để tạo cơ sở cho chúng, nhưng tôi thường không nghĩ đó là một ý tưởng hay cho SVG. Chỉ cần dán nội dung của tệp SVG của bạn và điền vào biểu mẫu và nó sẽ hiển thị kết quả trong một vùng văn bản để bạn sao chép. Hãy nhớ xóa ngắt dòng trong dữ liệu mà nó cung cấp cho bạn. Nó trông giống như chữ vô nghĩa thuần túy:

Bạn có thể sử dụng nó ở bất kỳ đâu mà chúng ta đã nói đến từ trước đến nay (ngoại trừ nội tuyến vì điều đó không có ý nghĩa gì) Chỉ cần đặt chữ vô nghĩa vào vị trí có nội dung [data] trong các ví dụ này.

Bộ chuyển đổi này là công cụ ưa thích của tôi, vì nó khiến SVG chủ yếu là văn bản đáng chú ý:

https://yoksel.github.io/url-encoder/

Như

<img src="circle.svg" />

6

Như CSS

<img src="circle.svg" />

7

Lưu ý có liên quan ở đây: CSS thông thường không quan tâm nếu bạn đặt dấu ngoặc kép xung quanh URI dữ liệu, nhưng Sass thì có, vì vậy tôi đã trích dẫn nó ở trên (Thx Oziel Perez).

Như

<img src="circle.svg" />

8

Và vâng, nếu bạn có một được nhúng vào SVG trước khi bạn base64, nó sẽ hoạt động nếu bạn vẫn sử dụng nó như một

Định dạng cho URI dữ liệu

Tất cả các ví dụ trên đều có base64 làm mã hóa, nhưng URI dữ liệu không nhất thiết phải là base64. Trên thực tế, trong trường hợp của SVG, có lẽ tốt hơn là KHÔNG sử dụng base64. Chủ yếu là do định dạng gốc của SVG lặp đi lặp lại nhiều hơn so với kết thúc của base64, nên nó giải nén tốt hơn.

<img src="circle.svg" />

9

programming html Path trong SVG Svg tag Tạo ảnh SVG Tạo SVG Svg link HTML SVG CSS

Hướng dẫn image/svg html - image / svg html

Lời nói đầu

SVG là gì?

Dùng trong HTML thế nào?

Dùng trực tiếp:

Dùng thông qua thẻ IMG

Dùng trong CSS thế nào?

Sử dụng Background Image

Sử dụng Mask Image

Nguồn

Tại sao lại sử dụng SVG?

Nhận định về SVG

Sử dụng SVG trong tag

Sử dụng SVG làm hình nền

Sự cố với và background-image…

Sử dụng SVG “nội tuyến”

Tối ưu hóa nó trước

Bây giờ bạn có thể kiểm soát bằng CSS!

Hỗ trợ trình duyệt

Sử dụng SVG làm object>

Các bảng định kiểu bên ngoài cho SVG

URL dữ liệu dành cho SVG

Như

Như CSS

Như

Định dạng cho URI dữ liệu

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội