SVG - Tổng quan

SVG là gì?

SVG, Scalable Vector Graphics là một ngôn ngữ dựa trên XML để xác định đồ họa dựa trên vector.
SVG nhằm mục đích hiển thị hình ảnh trên web.
Là hình ảnh vectơ, hình ảnh SVG không bao giờ giảm chất lượng cho dù chúng được thu nhỏ hoặc thay đổi kích thước như thế nào.
Hình ảnh SVG hỗ trợ tương tác và hoạt ảnh.
SVG là một tiêu chuẩn W3C.
Các định dạng hình ảnh khác như hình ảnh raster cũng có thể được xếp chung với hình ảnh SVG.
SVG tích hợp tốt với XSLT và DOM của HTML.

Ưu điểm

Sử dụng bất kỳ trình soạn thảo văn bản nào để tạo và chỉnh sửa hình ảnh SVG.
Dựa trên XML, hình ảnh SVG có thể tìm kiếm, có thể lập chỉ mục và có thể được tập lệnh và nén.
Hình ảnh SVG có khả năng mở rộng cao vì chúng không bao giờ giảm chất lượng cho dù chúng được thu nhỏ hoặc thay đổi kích thước như thế nào
Chất lượng in tốt ở mọi độ phân giải
SVG là một tiêu chuẩn mở

Nhược điểm

Kích thước định dạng văn bản sẽ lớn hơn so với hình ảnh raster được định dạng nhị phân.
Kích thước có thể lớn ngay cả đối với hình ảnh nhỏ.

Thí dụ

Đoạn mã XML sau có thể được sử dụng để vẽ một vòng tròn trong trình duyệt web.

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

Nhúng SVG XML trực tiếp vào trang HTML.

testSVG.htm

<html>
   <title>SVG Image</title>
   <body>
   
      <h1>Sample SVG Image</h1>
      
      <svg width="100" height="100">
         <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
      </svg>
   
   </body>
</html>

Đầu ra

Mở textSVG.htm trong trình duyệt web Chrome. Bạn có thể sử dụng Chrome / Firefox / Opera để xem trực tiếp hình ảnh SVG mà không cần bất kỳ plugin nào. Trong Internet Explorer, điều khiển activeX được yêu cầu để xem ảnh SVG.

Cách SVG tích hợp với HTML

Phần tử <svg> cho biết phần bắt đầu của ảnh SVG.
Các thuộc tính chiều rộng và chiều cao của phần tử <svg> xác định chiều cao và chiều rộng của hình ảnh SVG.
Trong ví dụ trên, chúng tôi đã sử dụng phần tử <circle> để vẽ một hình tròn.
cx và thuộc tính cy đại diện cho tâm của vòng tròn. Giá trị mặc định là (0,0). thuộc tính r đại diện cho bán kính của hình tròn.
Các thuộc tính khác thì stroke và stroke-width điều khiển đường viền của hình tròn.
thuộc tính fill xác định màu tô của hình tròn.
Thẻ đóng </svg> cho biết phần cuối của hình ảnh SVG.