SVG là viết tắt của Scalable Vector Graphics. Đây là tiêu chuẩn mở của W3C cho các hình ảnh được mô tả bằng các chỉ dẫn thay vì từng điểm ảnh (pixel): vẽ một hình tròn ở đây, đi theo đường cong này, tô màu cho hình kia, hiển thị từ này bằng kiểu chữ đó. Vì bức hình là một tập hợp các lệnh vẽ, nó có thể được hiển thị ở bất kỳ kích thước nào mà không bị mờ hay vỡ hạt, đó là lý do logo, biểu tượng, bản đồ và biểu đồ thường dùng SVG.
Cách SVG lưu trữ một hình ảnh
Một tệp SVG chính là XML: văn bản có thể đọc được mà bạn có thể mở trong bất kỳ trình soạn thảo nào. Phần tử <path> chứa một chuỗi gọn các lệnh vẽ, <rect>, <circle> và <polygon> làm những việc tương ứng dễ hiểu, <text> chứa văn bản thật có thể chọn được, và <g> nhóm các phần tử để có thể di chuyển hoặc định kiểu cùng nhau. Thuộc tính viewBox xác định hệ tọa độ, giúp cho toàn bộ bản vẽ có thể phóng to thu nhỏ mượt mà.
Vì là văn bản nên SVG nén rất tốt; một SVG đã gzip (đôi khi có phần mở rộng .svgz) thường chỉ bằng một phần nhỏ kích thước ban đầu. Là văn bản cũng có nghĩa là SVG có thể được định kiểu bằng CSS, tạo hiệu ứng động và lập trình bằng script. Trình duyệt xử lý nó như một phần của tài liệu chứ không phải một hình ảnh mờ đục.
Khả năng cuối cùng này có một khía cạnh bảo mật quan trọng: một SVG có thể chứa phần tử <script>. Ở bất cứ nơi nào cho phép người dùng tải lên SVG, tệp phải được làm sạch hoặc phục vụ theo cách không thể thực thi được, đó là lý do một số trang web từ chối SVG dù họ chấp nhận mọi định dạng ảnh raster.
SVG không phù hợp để chứa ảnh chụp. Bạn có thể nhúng một ảnh raster vào trong đó, nhưng khi đó bạn chỉ có một bức ảnh điểm ảnh được bọc trong XML mà không có lợi ích về khả năng phóng to thu nhỏ.
Một SVG chứa những siêu dữ liệu nào
SVG có phần tử riêng <metadata>, và vì tiêu chuẩn không quy định rõ phải chứa gì, các trình biên tập thường ghi rất nhiều dữ liệu vào đó. Phổ biến nhất là nó chứa RDF dùng các thuật ngữ Dublin Core: dc:title, dc:creator, dc:date, dc:description, dc:rights và một URI giấy phép. Các phần tử <title> và <desc> cũng có thể nằm ở nút gốc hoặc trên từng hình riêng lẻ, đồng thời đóng vai trò văn bản hỗ trợ truy cập cho trình đọc màn hình.
Tiếp theo là phần ghi chép nội bộ của trình biên tập, và nó thường chiếm phần lớn dung lượng. Inkscape ghi cả một không gian tên riêng: kích thước cửa sổ tài liệu, mức thu phóng và vị trí con trỏ khi tệp được lưu lần cuối, các đường gióng, thiết lập lưới, tên và trạng thái hiển thị của từng lớp, cùng chuỗi inkscape:version. Illustrator nhúng một gói XMP với các định danh tài liệu và lịch sử riêng. Tất cả những thứ này đều không vẽ ra bất cứ thứ gì.
Có hai điểm thực tế rút ra. Dữ liệu của trình biên tập có thể chiếm phần lớn dung lượng tệp, nên chạy SVG qua một trình tối ưu trước khi xuất bản thường giúp giảm khoảng một nửa. Và tên lớp là văn bản do chính bạn viết: <g inkscape:label="client logo v3 REJECTED"> thì vô hình trên hình vẽ nhưng lại hoàn toàn hiển thị trong tệp.
Khi nào nên dùng SVG
Hãy dùng SVG cho mọi thứ được vẽ chứ không phải chụp: logo, biểu tượng, sơ đồ, biểu đồ, minh họa, bản đồ. Đây là lựa chọn phù hợp cho web, nơi một tệp phục vụ mọi mật độ màn hình, và cho in ấn, nơi nó có thể được phóng to ở bất kỳ kích thước nào.
Hãy dùng PNG hoặc JPG cho ảnh chụp và mọi nội dung có sắc độ chuyển liên tục. Hãy xuất thêm một bản raster phẳng khi bạn cần một hình có thể mở trong phần mềm quá cũ hoặc quá hạn chế để hỗ trợ SVG, và hãy xóa siêu dữ liệu của trình biên tập trước khi xuất bản để vừa giảm dung lượng tệp, vừa tránh để lộ các tên lớp vốn không phải lúc nào cũng dành cho người xem.