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. Hãy cùng W3seo tìm hiểu về định dạng này và cách sử dụng trong html.
Tại sao lại sử dụng SVG?
- 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
Nhận định về SVG
Thiết kế một cái gì đó trong Adobe Illustrator.
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.
Xem thêm Thuật ngữ & định nghĩa SEO bạn cần biết
Bạn có thể lưu tệp trực tiếp từ Adobe Illustrator dưới dạng tệp SVG.
Khi bạn lưu nó, bạn sẽ nhận được một hộp thoại khác cho Tùy chọn SVG. Thành thật mà nói, tôi không biết nhiều về tất cả những điều này. Có toàn bộ thông số kỹ thuật cho Hồ sơ SVG. Tôi thấy SVG 1.1 hoạt động tốt.
Phần thú vị ở đây là bạn có thể nhấn OK và lưu tệp hoặc nhấn “Mã SVG…” và nó sẽ mở TextEdit (trên máy Mac) với mã SVG trong đó.
Cả hai đều có thể hữu ích.
Sử dụng SVG trong tag <img>
Nếu chúng tôi lưu SVG vào file, chúng ta có thể sử dụng nó trong tag <img>.
<img src="test.svg" alt="Kiwi standing on oval">
Chúng tôi lựa chọn kích thước 612px, 502px.
Tùy chọn đổi size của image, thay đổi chiều cao hoặc chiều rộng tương tự như PNG và JPG
<img class="papa" src="test1.svg"> <img class="mama" src="test2.svg"> <img class="baby" src="test3.svg">
.papa {
width: 250px;
}
.mama {
width: 100px;
}
.baby {
width: 50px;
}
img {
vertical-align: top;
}
body {
padding: 20px;
}Xem thêm Các ứng dụng của Machine Learning trong thực tế
Trình duyệt hỗ trợ
Sử dụng phương pháp này gần như hoạt động hết ở các browser trừ IE 8 trở về trước, và phiên bản sử dụng Android 2.3
Thật khó để vừa sử dụng svg và cung cấp đầy đủ chức năng cho các trình duyệt web
Ví dụ về hỗ trợ trình duyệt sử dụng Modernizr
if (!Modernizr.svg) {
$(".logo img").attr("src", "images/logo.png");
}Sử dụng JavaScript để trong markup:
<img src="image.svg" onerror="this.onerror=null; this.src='image.png'">
Chúng tôi sẽ đề cập đến các kỹ thuật dự phòng khác khi bài viết này tiếp tục.
Sử dụng SVG làm hình nền
Tương tự, dễ dàng sử dụng SVG dưới dạng img, bạn có thể sử dụng nó trong CSS làm hình nền.
<a href="/" class="logo"> Kiwi Corp </a>
.logo {
display: block;
text-indent: -9999px;
width: 100px;
height: 82px;
background: url(kiwi.svg);
background-size: 100px 82px;
}Lưu ý rằng chúng tôi đặt kích thước nền bằng kích thước của phần tử logo. Chúng tôi phải làm điều đó nếu không chúng tôi sẽ chỉ thấy một chút phía trên bên trái của hình ảnh SVG gốc lớn hơn nhiều của chúng tôi. Những con số này là tỷ lệ khung hình nhận biết kích thước ban đầu. Nhưng bạn có thể sử dụng các từ khóa có kích thước nền như chứa nếu bạn muốn đảm bảo hình ảnh sẽ vừa vặn và không thể biết hình ảnh gốc sẽ có kích thước phù hợp chính xác.
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 đó:
.main-header {
background: url(logo.svg) no-repeat top left;
background-size: contain;
}
.no-svg .main-header {
background-image: url(logo.png);
}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 đó).
body {
background: url(fallback.png);
background-image: url(image.svg), none;
}Xem thêm Tìm hiểu về ngôn ngữ R trong data science
Sự cố với <img> 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.
<body> <!-- paste in SVG code, image shows up! --> </body>
Đ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ư:
<?php echo file_get_contents("kiwi.svg"); ?>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 <? Xml version = “1.0” encoding = “UTF-8”?> 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 <ellipse> và một <path>. 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ó.
<svg ...> <ellipse class="ground" .../> <path class="kiwi" .../> </svg>
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 <link> đã 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ù.
.kiwi {
fill: #94d31b;
}
.kiwi:hover {
fill: #ace63c;
}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 <svg> của bạn:
<svg ...>
...
<filter id="pictureFilter" >
<feGaussianBlur stdDeviation="5" />
</filter>
</svg>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.
<svg> ... </svg> <div class="fallback"></div>
Một cách để xử lý dự phòng cho loại SVG này là:
.fallback {
display: none;
/* Make sure it's the same size as the SVG takes up */
}
.no-svg .fallback {
background-image: url(logo.png);
}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 <object>.
<object type="image/svg+xml" data="kiwi.svg" class="logo"> Kiwi Logo <!-- fallback image in CSS --> </object>
Đối với dự phòng, phát hiện Modernizr sẽ hoạt động tốt ở đây:
.no-svg .logo {
width: 200px;
height: 164px;
background-image: url(kiwi.png);
}Đ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 <style> trên tài liệu, bạn cần sử dụng phần tử <style> bên trong chính tệp SVG.
<svg ...>
<style>
/* SVG specific fancy CSS styling here */
</style>
...
</svg>Các bảng định kiểu bên ngoài cho <object> 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 <object> 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ở <svg>.
<?xml-stylesheet type="text/css" href="svg.css" ?>
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 <img> 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 <svg> 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>
<img src="data:image/svg+xml;base64,[data]">
Như CSS
.logo {
background: url("data:image/svg+xml;base64,[data]");
}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ư <object>
<object type="image/svg+xml" data="data:image/svg+xml;base64,[data]"> fallback </object>
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 <đối tượng>
Đị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.
<!-- base64 --> data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL... <!-- UTF-8, not encoded --> data:image/svg+xml;charset=UTF-8,<svg ...> ... </svg> <!-- UTF-8, optimized encoding for compatibility --> data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://...' <!-- Fully URL encoded ASCII --> data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//...
