Nhìn vào đồ họa vectơ có thể mở rộng (SVG)

Đồ họa vector đã được áp dụng rộng rãi trong phương tiện truyền thông in ấn. Trong một trang web, chúng tôi cũng có thể thêm đồ họa vector bằng SVG hoặc Đồ họa Vector có thể mở rộng. Trích dẫn từ thông số chính thức tại W3.org, SVG được mô tả là:

Một ngôn ngữ để mô tả đồ họa hai chiều trong XML. SVG cho phép ba loại đối tượng ßgpson: hình dạng đồ họa vector (ví dụ: đường dẫn bao gồm các đường thẳng và đường cong), hình ảnh và văn bản.

Nó thực sự đã có từ năm 1999 và kể từ ngày 16 tháng 8 năm 2011, nó đã trở thành Khuyến nghị của W3C. Tuy nhiên, SVG vẫn chưa được sử dụng đáng kể, trong khi có rất nhiều lợi thế trong việc sử dụng Vector thay vì Bitmap để phục vụ đồ họa hoặc hình ảnh trên trang web.

Ưu điểm của SVG

Về mặt phục vụ đồ họa trên các trang web, SVG cung cấp một vài lợi thế so với Bitmap, một số trong đó bao gồm:

Nghị quyết độc lập

Đồ họa bitmap / raster phụ thuộc vào độ phân giải - nó được xây dựng dựa trên pixel. Đồ họa được phục vụ sẽ trông pixelated khi nó được thay đổi kích thước ở một mức thu phóng nhất định. Điều đó không xảy ra với đồ họa vector, có độ phân giải độc lập về bản chất, vì đồ họa được thể hiện bằng một phương trình toán học làm cho nó có thể mở rộng ở mọi mức thu phóng trong khi vẫn duy trì chất lượng, ngay cả tại màn hình Retina.

Giảm yêu cầu HTTP

SVG có thể được nhúng trực tiếp vào tài liệu HTML với svg thẻ, vì vậy trình duyệt không cần thực hiện yêu cầu phục vụ đồ họa. Điều này cũng dẫn đến hiệu suất tải tốt hơn cho trang web.

Tạo kiểu và kịch bản

Nhúng trực tiếp với svg Thẻ cũng sẽ cho phép chúng ta tạo kiểu đồ họa dễ dàng thông qua CSS. Chúng ta có thể thay đổi thuộc tính đối tượng chẳng hạn như màu nền, độ mờ đục, đường viền, v.v ... giống như cách chúng ta làm với thẻ HTML thông thường. Tương tự, chúng ta cũng có thể thao tác với đồ họa thông qua JavaScript.

Có thể là hoạt hình và chỉnh sửa

Đối tượng SVG có thể được làm động khi nó sử dụng phần tử hoạt hình hoặc thông qua Thư viện JavaScript như jQuery. Đối tượng SVG cũng có thể được chỉnh sửa bằng bất kỳ trình soạn thảo mã văn bản hoặc phần mềm đồ họa nào như Inkscape (miễn phí) hoặc Adobe Illustrator.

Kích thước tệp nhỏ hơn

SVG có kích thước tệp nhỏ hơn so với Bitmap, có cách trình bày đồ họa tương tự.

Vẽ hình cơ bản với SVG

Theo thông số kỹ thuật, chúng ta có thể vẽ một số hình dạng cơ bản như hình chữ nhật, hình tròn, đường thẳng, hình elip, đa tuyến và đa giác với SVG và để trình duyệt hiển thị đồ họa SVG, tất cả các yếu tố đồ họa đó cần được chèn vào trong nhãn. Hãy xem các ví dụ dưới đây để biết thêm chi tiết:

Hàng

Vẽ một dòng trong SVG chúng ta có thể sử dụng thành phần. Phần tử này được sử dụng để vẽ một đường thẳng duy nhất, vì vậy nó sẽ chỉ bao gồm hai điểm, khởi đầu và kết thúc.

Như bạn có thể thấy ở trên, tọa độ điểm bắt đầu dòng được thể hiện bằng hai thuộc tính đầu tiên x1 và x2, trong khi tọa độ điểm cuối của dòng được biểu thị bằng y1 và y2.

Ngoài ra còn có hai thuộc tính khác, Cú đánh và Chiều rộng đột quỵ tương ứng được sử dụng để xác định màu của đường viền và chiều rộng của đường viền. Ngoài ra, chúng ta cũng có thể định nghĩa các thuộc tính này trong một kiểu nội tuyến, như vậy:

cuối cùng nó cũng làm như vậy.

Xem bản demo “Hàng”

Đa tuyến

Nó gần giống với , nhưng với phần tử chúng ta có thể vẽ nhiều dòng thay vì chỉ một. Đây là một ví dụ:

yếu tố có điểm các thuộc tính lưu trữ tất cả các tọa độ tạo thành các dòng.

Xem bản demo “Đa tuyến”

Hình chữ nhật

Vẽ một hình chữ nhật cũng đơn giản với điều này thành phần. Chúng ta chỉ cần xác định chiều rộng và chiều cao, như vậy:

Xem bản demo “Hình chữ nhật”

Vòng tròn

Chúng ta cũng có thể vẽ một vòng tròn với thành phần. Trong ví dụ sau, chúng ta sẽ tạo một vòng tròn với 100 bán kính được xác định với r thuộc tính:

Hai thuộc tính đầu tiên, cx và C y đang xác định tọa độ trung tâm của vòng tròn. Trong ví dụ trên, chúng tôi đã thiết lập 102 cả cho x và y tọa độ, nếu các thuộc tính này không được chỉ định, 0 sẽ được lấy làm giá trị mặc định.

Xem bản demo “Vòng tròn”

Hình elip

Chúng ta có thể vẽ một hình elip với . Nó hoạt động khá giống với vòng tròn, nhưng lần này chúng ta có thể kiểm soát cụ thể x bán kính đường và y bán kính đường với rx và ry thuộc tính;

Xem bản demo “Hình elip”

Đa giác

Với phần tử, chúng ta có thể vẽ nhiều cạnh của hình dạng như hình tam giác, hình lục giác và thậm chí là hình chữ nhật. Đây là một ví dụ:

Xem bản demo “Đa giác”

Sử dụng trình soạn thảo đồ họa Vector

Như bạn có thể thấy, vẽ các đối tượng đơn giản với SVG bằng HTML khá dễ dàng. Tuy nhiên, khi đối tượng trở nên phức tạp hơn, thực tế đó không còn lý tưởng và sẽ khiến bạn đau đầu.

May mắn thay, như chúng tôi đã đề cập ở trên, chúng tôi có thể sử dụng trình chỉnh sửa đồ họa vector như Adobe Illustrator hoặc là Inkscape để làm công việc đó. Nếu bạn đã quen thuộc với các phần mềm này, việc vẽ các đối tượng bằng GUI của chúng chắc chắn sẽ dễ dàng hơn rất nhiều so với việc tự viết mã đồ họa trong thẻ HTML.

Nếu bạn đang làm việc với Inkscape, bạn có thể lưu đồ họa vector của mình dưới dạng SVG đơn giản, sau đó mở nó trong trình soạn thảo mã văn bản. Bây giờ, bạn nên tìm mã SVG trong tệp. Sao chép tất cả các mã và dán chúng vào tài liệu HTML của bạn.

Hoặc, bạn cũng có thể nhúng .svg tập tin thông qua một trong những yếu tố này; nhúng, iframe và vật, ví dụ;

Kết quả cuối cùng sẽ giống nhau.

Trong ví dụ này, tôi sử dụng Apple iPod này từ OpenClipArt.org.

Xem bản demo “iPod”

Hỗ trợ trình duyệt

Về hỗ trợ trình duyệt, SVG đã được hỗ trợ rất tốt trong tất cả các trình duyệt chính, ngoại trừ trong IE8 trở về trước. Nhưng vấn đề này có thể được giải quyết với Thư viện JavaScript này, được gọi là Raphael.js. Để làm cho mọi thứ dễ dàng hơn, chúng tôi sẽ sử dụng công cụ này, ReadySetRaphael.com để chuyển đổi mã SVG của chúng tôi sang định dạng được hỗ trợ bởi Raphael. Đây là cách.

Trước hết, tải xuống và bao gồm Raphael.js thư viện vào tài liệu HTML của bạn. Sau đó, tải lên .svg tập tin vào trang web, sao chép và dán mã được tạo bên trong tải sau chức năng;

 window.onload = function () // mã Raphael ở đây

Bên trong thân hình gắn thẻ, đặt như sau div với rsr thuộc tính id;

Thế là xong, bạn đã hoàn thành. Kiểm tra ví dụ từ liên kết dưới đây.

Xem bản demo “Raphael”

Suy nghĩ cuối cùng

Vì vậy, đó là những điều cơ bản với SVG. Chúng tôi hy vọng bây giờ bạn có một sự hiểu biết công bằng về chủ đề này. Đó là cách tốt nhất để tối ưu hóa trang web của bạn cho bất kỳ độ phân giải màn hình nào, ngay cả khi sử dụng trên màn hình Retina.

Như mọi khi, nếu bạn là một người thích phiêu lưu, ở đây chúng tôi đã đưa thêm một vài tài liệu tham khảo và thảo luận để tìm hiểu sâu hơn về chủ đề này.

Giới thiệu về các trường SVG - W3
Nghị quyết độc lập với SVG - Tạp chí Smashing
Tại sao bạn không sử dụng SVG? - NetTuts

Cảm ơn đã đọc và chúng tôi hy vọng bạn thích bài viết này.

Xem bản demo
Tải xuống nguồn