Thực đơn
trang chủHướng dẫn

Sử dụng SVG. Tạo kiểu SVG bằng CSS. Tính năng và hạn chế

SVG là một định dạng đồ họa vector. Tên của nó có nghĩa đen là “có thể mở rộng Đồ họa vector"(Đồ họa vectơ có thể mở rộng). Nói một cách đơn giản, đó là những gì bạn làm việc trong Adobe Illustrator. SVG có thể dễ dàng sử dụng trên web, nhưng trước tiên có rất nhiều điều cần phải hiểu.

Tại sao bạn lại cần SVG?

  • Kích thước tệp nhỏ, khả năng nén tuyệt vời;
  • Chia tỷ lệ theo mọi kích thước mà không làm giảm chất lượng (trừ kích thước rất nhỏ);
  • Có vẻ tốt trên võng mạc;
  • Nhiều khả năng được cung cấp bởi các bộ lọc và tính tương tác.

Hãy tạo một hình ảnh SVG mà chúng ta sẽ làm việc tiếp theo

Tạo một thiết kế tùy chỉnh trong Adobe Illustrator. Ví dụ, đây là một con chim kiwi trên hình bầu dục.

Xin lưu ý rằng hình ảnh được cắt mạnh xung quanh các cạnh của hình ảnh. Canvas trong SVG đóng vai trò không kém gì PNG hoặc JPG.

Adobe Illustrator có thể lưu dưới dạng SVG.

Khi lưu, một hộp thoại khác có cài đặt sẽ xuất hiện. Thành thật mà nói, tôi không biết nhiều về họ. Có toàn bộ hướng dẫn về Hồ sơ SVG. Tôi khá hài lòng với SVG 1.1.

Điều đáng lưu ý ở đây là bạn có tùy chọn nhấp vào OK và lưu tệp hoặc nhấp vào nút “Mã SVG…”, thao tác này sẽ mở cửa sổ TextEdit (ít nhất là trên máy Mac) có mã SVG.

Cả hai tùy chọn đều có thể hữu ích.

Trong Illustrator Không gian làm việc là 612px ✕ 502px.

Đây là những kích thước mà hình ảnh sẽ có trên trang, trừ khi được chỉ định cụ thể. Kích thước của nó có thể được thay đổi bằng cách đặt thuộc tính chiều rộng hoặc chiều cao thành img, giống như PNG hoặc JPG. Đây là một ví dụ:

Hỗ trợ trình duyệt

Một tùy chọn: kiểm tra hỗ trợ thông qua Modernizr và thay thế src cho hình ảnh:

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

David Bushell có một giải pháp thay thế rất đơn giản nếu bạn không bận tâm đến JavaScript trong phần đánh dấu của mình:

"this.onerror=null; this.src="image.png"">

Đối với phương pháp chèn SVG này, bạn có thể sử dụng các kỹ thuật phân hủy sau:

<svg > ... svg > <lớp div="dự phòng" >div >

Và một lần nữa chúng tôi sử dụng Modernizr:

.logo-fallback ( display : none; /* Đảm bảo kích thước phù hợp với kích thước SVG */) .no-svg .logo-fallback ( hình nền : url (logo.png); )

Thêm SVG vào trang bằng thẻ

Nếu vì lý do nào đó mà bạn không thích tùy chọn chèn SVG trực tiếp vào tài liệu (nó vẫn có một số nhược điểm, chẳng hạn như gần như không thể lưu vào bộ nhớ đệm), bạn có thể kết nối tệp SVG bằng cách sử dụng và duy trì khả năng kiểm soát các bộ phận của nó bằng CSS.

<loại đối tượng ="image/svg+xml" data ="kiwi.svg" class ="logo" > Logo Kiwi đối tượng >

Trong trường hợp điều này không được hỗ trợ, hãy triển khai quá trình xuống cấp bằng cách sử dụng lớp mà Modernizr thêm vào:

.no-svg .logo ( chiều rộng : 200px ; chiều cao : 164px ; hình nền : url (kiwi.png); )

Cách tiếp cận này không gây ra vấn đề về bộ nhớ đệm và được trình duyệt hỗ trợ tốt hơn, hơn những người khác. Nhưng nếu bạn sử dụng một tệp bên ngoài có kiểu hoặc

Vì SVG không phân biệt giữa vùng đầu và vùng nội dung nên biểu định kiểu và bản thân nội dung có chung phần tử SVG, có thể so sánh với phần tử HTML.

Sử dụng các lớp giả

Trong SVG, có thể sử dụng các lớp giả như:hover, thậm chí kết hợp với thuộc tính chuyển tiếp CSS3.

Sau khi triển khai ví dụ này, chúng ta sẽ thấy rằng khi chúng ta di chuột qua một phần tử có lớp ví dụ được đặt cho nó, màu tô sẽ thay đổi từ đỏ sang xanh lam. Để tính năng này hoạt động bình thường, không nhúng SVG bằng thẻ img. Tốt hơn nên sử dụng nhúng hoặc iframe:

Khi sử dụng thẻ img, bản thân SVG sẽ hiển thị chính xác. Nhưng hiệu ứng di chuột và chuyển tiếp sẽ bị bỏ qua. Ngoài thuộc tính transition, chúng ta cũng có thể sử dụng Transform. Trong trường hợp này, các phần tử sẽ được thu nhỏ hoặc xoay.

Khi sử dụng CSS3, hãy nhớ thêm tiền tố của nhà cung cấp để đảm bảo được hỗ trợ nhiều nhất có thể. hơn các trình duyệt hiện đại. Trong khi Chrome và Firefox xử lý hiển thị hoàn hảo, Internet Explorer từ chối hiển thị tác phẩm của bạn, mặc dù nó hoàn toàn có khả năng hiển thị các thuộc tính CSS3 đó nếu bạn áp dụng chúng cho HTML.

Truy vấn phương tiện và SVG

Nếu bạn muốn tùy chỉnh SVG của mình cho một số quyền nhất định, chỉ cần sử dụng truy vấn phương tiện, ngay bên trong nó:

Trong ví dụ này, các phần tử có lớp ví dụ được chỉ định sẽ không được hiển thị ngay khi chiều rộng màn hình hiển thị nhỏ hơn 800 pixel. Hãy cẩn thận, đây không phải là về chiều rộng của tài liệu mà là về chiều rộng của phần tử sóng mang SVG.

Chuẩn bị SVG để sử dụng trên web là một quá trình rất đơn giản, không khó hơn xuất JPEG hoặc PNG. Sử dụng bất kỳ trình chỉnh sửa đồ họa nào bạn quen thuộc (Illustrator, Sketch, Inkscape [miễn phí], v.v. [hoặc thậm chí Photoshop nếu bạn đang sử dụng các lớp hình dạng]) ở kích thước hình ảnh bạn định sử dụng. Tôi thường làm việc trong Illustrator, vì vậy tôi sẽ giải thích một số cách chuẩn bị tệp trong chương trình đó, nhưng chúng thường áp dụng cho bất kỳ chương trình nào. Bạn có thể muốn chuyển đổi văn bản của mình thành các đường cong, vì phông chữ rất có thể sẽ hiển thị không chính xác, trừ khi bạn định tạo kiểu cho chúng bằng phông chữ web được sử dụng trên trang (điều này là có thể!). Bạn cũng không nên chuyển đổi tất cả các đối tượng thành các hình dạng đơn lẻ, đặc biệt nếu bạn có các nét cần thao tác trên trang, đặc biệt vì việc chuyển đổi các đối tượng thường không làm giảm kích thước tệp. Bất kỳ tên nào được gán cho nhóm hoặc lớp sẽ được thêm vào SVG dưới dạng ID phần tử. Điều này khá thuận tiện cho việc tạo kiểu nhưng sẽ làm tăng kích thước tổng thể tài liệu.

Trước khi xuất, bạn cần kiểm tra xem tất cả hình ảnh có nằm trong lưới pixel số nguyên hay không (nghĩa là không phải 23,3px × 86,8px). Nếu không, rất có thể hình ảnh sẽ không đủ rõ nét và một phần hình ảnh sẽ bị cắt bỏ. Trong Illustrator, điều này có thể được thực hiện như sau: Object > Artboards > Fit to Artwork Bounds. Sau đó nhấp vào lưu dưới dạng và chọn SVG và để cài đặt mặc định. Có một chút tối ưu hóa mà chúng tôi có thể thực hiện ở đây, nhưng nó thực sự không đáng giá vì chúng tôi sẽ sử dụng nhiều kỹ thuật nâng cao khác nhau sau này, vì vậy bây giờ chúng tôi sẽ không lãng phí thời gian cho những chỉnh sửa đó.

Thủ thuật để giảm kích thước tập tin.

(Xem tối ưu hóa)

Để đạt được kích thước SVG nhỏ nhất, sẽ hợp lý hơn nếu loại bỏ mọi thứ không cần thiết khỏi nó. Nổi tiếng nhất và chương trình hữu ích(ít nhất là tôi nghĩ vậy) để xử lý SVG, đó là SVGO. Nó loại bỏ tất cả các mã không cần thiết. Nhưng! Hãy cẩn thận khi sử dụng chương trình này nếu bạn định thao tác SVG bằng CSS/JS, vì nó có thể làm sạch mã quá nhiều, gây khó khăn cho những thay đổi trong tương lai. Sự tiện lợi của SVGO còn là nó có thể được đưa vào quá trình lắp ráp tự động dự án, nhưng bạn cũng có thể sử dụng GUI nếu bạn muốn.

Hiểu chi tiết hơn với loại bỏ chính xác mọi thứ không cần thiết, chúng ta có thể làm việc khác trong trình chỉnh sửa đồ họa. Trước tiên, bạn cần đảm bảo rằng bạn sử dụng càng ít đường dẫn/hình dạng càng tốt, cũng như các điểm trên các đường dẫn đó. Bạn có thể kết hợp và đơn giản hóa mọi thứ có thể đơn giản hóa và xóa mọi thứ điểm không cần thiết. Illustrator có plugin VectorScribe với Công cụ Smart Remove Brush Tool sẽ giúp bạn loại bỏ các điểm trong khi vẫn giữ nguyên hình dạng tổng thể.

Tối ưu hóa sơ bộ

Smart Remove Brush Tool loại bỏ điểm

Tiếp theo chúng ta sẽ phóng to hình ảnh. Trong Illustrator, sẽ rất hữu ích nếu bật View > Pixel Preview và kiểm tra xem các đường viền được định vị như thế nào. Sẽ mất một chút thời gian để đặt các đường viền trên lưới, nhưng nỗ lực sẽ được đền đáp và mang lại kết quả hiển thị rõ ràng hơn (tốt nhất là bạn nên chú ý đến điều này trước).

Điểm ngoài lưới

Căn chỉnh vào lưới

Nếu có hai hoặc nhiều đối tượng cần căn chỉnh thì nên loại bỏ tất cả các phần chồng chéo không cần thiết. Đôi khi, ngay cả khi các đường viền được căn chỉnh cẩn thận, vẫn có thể nhìn thấy một đường trắng mỏng. Để ngăn chặn điều này, bạn có thể chồng lên nhau một chút các đối tượng nơi chúng chồng lên nhau. Quan trọng: trong SVG, chỉ mục z có một thứ tự nhất định, phụ thuộc vào đối tượng bên dưới, do đó, nên đặt đối tượng trên cùng ở cuối tệp trong mã.

Và cuối cùng, điều cuối cùng nhưng không kém phần quan trọng, một điều thường bị lãng quên là bật tính năng nén gzip của SVG trên trang web của bạn trong tệp .htaccess.

AddType hình ảnh/svg+xml svg svgz AddOutputFilterByType DEFLATE "image/svg+xml" \ "text/css" \ "text/html" \ "text/javascript" ... v.v.

Để làm ví dụ về mức độ hiệu quả của kỹ thuật này, tôi sẽ lấy logo Breaking Borders ban đầu và tối ưu hóa nó theo cách này: tăng kích thước lên mức cần thiết; Tôi sẽ sắp xếp các đường nét theo thứ tự; Tôi sẽ xóa càng nhiều điểm càng tốt; di chuyển các điểm theo pixel nguyên; Tôi sẽ di chuyển tất cả các vùng chồng chéo và gửi tất cả đến SVGO.

Bản gốc: 1.413b

Sau khi tối ưu hóa: 409b

Kết quả là kích thước tệp trở nên nhỏ hơn ~71% (và nhỏ hơn ~83% khi được nén)