SVG là gì? Hướng dẫn về định dạng đồ họa vector

SVG là định dạng ảnh được tạo nên từ các lệnh vẽ thay vì điểm ảnh. Khi một logo, biểu tượng hay biểu đồ được lưu dưới dạng SVG, tệp chứa những lệnh như "vẽ một đường cong từ điểm này đến điểm kia và tô màu này". Vì thế SVG luôn sắc nét ở mọi kích thước, thường rất nhỏ và có thể mở, chỉnh sửa bằng trình soạn thảo văn bản. Bài viết này trình bày vị trí của SVG trong các tiêu chuẩn W3C, cấu trúc của tệp, mức hỗ trợ của trình duyệt và phần mềm, các rủi ro bảo mật và cách chuyển đổi giữa SVG với PNG hoặc JPG.

SVG là gì?

SVG (Scalable Vector Graphics) là một tiêu chuẩn W3C dựa trên XML để mô tả đồ họa vector hai chiều. Phần mở rộng là .svg và kiểu MIME là image/svg+xml. Một biến thể nén gzip dùng phần mở rộng .svgz.

Các định dạng raster (JPG, PNG, WebP) lưu hình ảnh dưới dạng một lưới điểm ảnh cố định; phóng to lên là thấy các điểm ảnh. SVG mô tả hình dạng bằng toán học, và trình duyệt hay chương trình sẽ vẽ lại chúng ở bất kỳ độ phân giải nào màn hình có. Hướng dẫn định dạng ảnh của MDN gọi SVG là lựa chọn lý tưởng cho những hình ảnh có thể biểu diễn bằng lệnh vẽ, nhất là khi kích thước hiển thị không biết trước hoặc thay đổi, và lưu ý rằng nó nhìn chung không hữu ích cho ảnh chụp.

Lịch sử: SVG 1.0, 1.1 và SVG 2

• Ngày 4 tháng 9 năm 2001: SVG 1.0 được công bố ở cấp Khuyến nghị của W3C.
• Ngày 14 tháng 1 năm 2003: SVG 1.1 trở thành Khuyến nghị. Bản 1.1 chia ngôn ngữ thành các mô-đun, giúp định nghĩa các tập con như cấu hình cho thiết bị di động dễ dàng hơn.
• Ngày 16 tháng 8 năm 2011: SVG 1.1 Ấn bản thứ hai được công bố. Đây là phiên bản ổn định mà các trình duyệt ngày nay dựa vào.
• SVG 2: Theo lịch sử công bố của W3C, các bản thảo làm việc xuất hiện từ năm 2012 và bản Candidate Recommendation Snapshot đầu tiên được công bố ngày 15 tháng 9 năm 2016. Bản snapshot gần nhất có ngày 6 tháng 10 năm 2026; tài liệu vẫn đang ở giai đoạn Candidate Recommendation (Khuyến nghị ứng viên).

SVG 2 xây dựng trên SVG 1.1 Ấn bản thứ hai và hướng tới tích hợp tốt hơn với HTML và CSS. Một số chủ đề như bộ lọc, mặt nạ và phông chữ được chuyển sang các mô-đun CSS và FX riêng. Trên thực tế, trình duyệt chỉ triển khai một phần SVG 2, nên đừng cho rằng mọi tính năng đều chạy ở mọi nơi.

Cấu trúc của một tệp SVG

Một tệp SVG đơn giản trông như sau:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="#0b6bcb"/>
  <path d="M30 50 L45 65 L72 36" stroke="#fff" stroke-width="8" fill="none"/>
</svg>

Hệ tọa độ: viewBox, width và height

viewBox định nghĩa hệ tọa độ bên trong của bản vẽ (ở đây từ 0 đến 100). width và height quy định bản vẽ chiếm bao nhiêu chỗ trên trang. Một SVG có viewBox sẽ co giãn theo tỷ lệ đến bất kỳ kích thước nào bạn đặt trong CSS. Tệp không có viewBox có thể bị cắt mất khi đổi kích thước, một trong những lỗi logo phổ biến nhất.

Các phần tử cốt lõi

• Hình dạng: rect, circle, ellipse, line, polyline, polygon và path, phần tử có thể vẽ mọi thứ.
• Văn bản: text và tspan. Văn bản vẫn chọn và tìm kiếm được, nhưng nếu thiết bị xem không có phông chữ đó, một phông thay thế sẽ được dùng.
• Nhóm và tái sử dụng: g, defs, symbol, use. Bộ biểu tượng thường được gói thành các phần tử symbol trong một tệp.
• Tô vẽ: màu đặc, dải chuyển màu tuyến tính và tỏa tròn, họa tiết, đường cắt (clipping path), mặt nạ và bộ lọc (làm mờ, đổ bóng).
• Định kiểu và chuyển động: CSS có thể định kiểu SVG; hoạt ảnh CSS và các phần tử hoạt ảnh SMIL tạo chuyển động.
• Nội dung nhúng: image cho ảnh raster, foreignObject cho HTML và script cho JavaScript.

Màu sắc, độ trong suốt, lớp và trang

Độ trong suốt là thuộc tính sẵn có trong SVG: phần nào không được vẽ thì để trống, còn opacity và fill-opacity định nghĩa độ bán trong suốt. Các lớp được biểu diễn bằng nhóm g; Inkscape và Illustrator lưu lớp của chúng theo cách đó. Màu mặc định là sRGB, và không có giới hạn độ sâu bit theo nghĩa thông thường vì màu được ghi bằng số. SVG không phải định dạng tài liệu nhiều trang; với bản vẽ nhiều trang, PDF phù hợp hơn.

Mức hỗ trợ trên trình duyệt, hệ điều hành và phần mềm

Theo MDN, Chrome, Edge, Firefox, Opera và Safari đều hỗ trợ SVG. Bạn có thể dùng nó qua <img>, làm background-image trong CSS, nhúng trực tiếp vào HTML, hoặc với <object> và <iframe>. Các công cụ vector như Inkscape, Adobe Illustrator, Affinity Designer và Figma đọc và ghi được SVG, và các phiên bản Microsoft Office hiện tại cho phép chèn đồ họa SVG.

Ở những nơi khác, mức hỗ trợ còn yếu: nhiều mạng xã hội, ứng dụng email, ứng dụng nhắn tin và biểu mẫu tải lên từ chối SVG hoặc không hiển thị bản xem trước. Một phần lý do là rủi ro bảo mật được mô tả dưới đây.

Bảo mật: hãy đối xử với SVG như một tài liệu

SVG là một tài liệu XML và có thể chứa phần tử script, thuộc tính sự kiện (như onload) và tham chiếu bên ngoài. Trang "SVG as an image" của MDN giải thích rằng khi SVG được dùng qua <img> hoặc làm nền CSS, trình duyệt vô hiệu hóa JavaScript và không tải tài nguyên bên ngoài như hình ảnh hay bảng định kiểu. Những hạn chế này không áp dụng khi tệp được mở trực tiếp hoặc nhúng bằng <iframe>, <object> hay <embed>.

Hệ quả thực tế: nếu một trang cho phép người dùng tải lên tệp SVG và phục vụ chúng trực tiếp từ tên miền của chính mình, một script nhúng trong tệp có thể chạy trong ngữ cảnh của trang đó (stored XSS). Các biện pháp giảm thiểu điển hình:

• Cho SVG được tải lên đi qua một bộ lọc làm sạch (sanitizer) để loại bỏ script, thuộc tính sự kiện, foreignObject và liên kết bên ngoài.
• Phục vụ tệp của người dùng từ một tên miền riêng, với Content-Security-Policy nghiêm ngặt, hoặc dưới dạng tệp tải xuống (Content-Disposition: attachment).
• Nếu không cần bản vector, hãy chuyển SVG được tải lên sang PNG trên máy chủ và chỉ công bố bản raster.

Các công dụng điển hình

• Logo và tài sản thương hiệu: một tệp duy nhất luôn sắc nét, từ danh thiếp đến biển quảng cáo.
• Biểu tượng giao diện: tô màu được bằng CSS và không bao giờ bị mờ trên màn hình mật độ cao.
• Biểu đồ, bản đồ và sơ đồ: các thư viện như D3.js vẽ dữ liệu thẳng vào các phần tử SVG.
• Favicon: các trình duyệt hiện nay chấp nhận favicon SVG thông qua <link rel="icon" type="image/svg+xml">.
• Cắt và in: máy cắt laser, máy cắt decal và máy thêu làm việc với đường dẫn vector.

Ưu điểm và nhược điểm

Các lỗi thường gặp và cách khắc phục

Một trang web hoặc ứng dụng không chấp nhận SVG

Cách khắc phục dễ nhất là tạo một bản sao PNG. Công cụ chuyển SVG sang PNG của chúng tôi vẽ bản vẽ thành ảnh PNG trong suốt ngay trong trình duyệt của bạn, với chiều rộng điểm ảnh do bạn chọn. Tệp của bạn không được tải lên, vẫn ở trên thiết bị của bạn và không bao giờ rời khỏi đó.

Chữ hiển thị bằng phông khác

SVG mặc định không nhúng phông chữ; nếu hệ thống xem không có phông đó, một phông thay thế sẽ được dùng. Trong ngữ cảnh hình ảnh, phông chữ bên ngoài cũng không được tải. Hãy chuyển chữ thành đường viền (outline) trong công cụ thiết kế, hoặc nhúng phông chữ.

SVG hiển thị sai kích thước hoặc bị cắt trên trang

Khi không có viewBox, hoặc có width/height cố định, việc co giãn không hoạt động như mong đợi. Hãy thêm vào phần tử gốc svg một viewBox bao trùm bản vẽ và đặt kích thước bằng CSS.

Tệp nặng hơn dự kiến

Các công cụ thiết kế ghi siêu dữ liệu của trình soạn thảo, quá nhiều chữ số thập phân và các lớp ẩn vào SVG. Một công cụ tối ưu như SVGO sẽ loại bỏ chúng. Nén Gzip hoặc Brotli trên máy chủ còn thu nhỏ thêm SVG vốn dựa trên văn bản.

Tôi cần chuyển logo PNG thành SVG

Một ảnh raster không thể thực sự được "chuyển" thành vector; điều các công cụ làm là dò nét (tracing): các hình dạng được nhận diện và vẽ lại thành đường viền. Các công cụ PNG sang SVG và JPG sang SVG của chúng tôi dò nét với 2 đến 8 màu. Kết quả tốt với logo và bản vẽ đơn giản, và thô với ảnh chụp. Với những công cụ này, tệp được tải lên máy chủ của chúng tôi qua kết nối bảo mật, được dò nét tại đó và bị xóa chậm nhất trong vòng 30 phút.

Mẹo chuyển đổi

• Biết kích thước đích: Khi vẽ SVG thành PNG, hãy chọn kích thước lớn nhất mà ảnh sẽ được hiển thị, nhân đôi cho màn hình mật độ cao. Trong công cụ của chúng tôi, cạnh dài nhất có thể lên đến 4096 điểm ảnh; nếu bạn để trống chiều rộng, các bản vẽ nhỏ sẽ được phóng sao cho cạnh dài nhất là 1024 điểm ảnh.
• JPG cho nội dung ảnh chụp: Nếu SVG có nhúng ảnh chụp và bạn không cần độ trong suốt, JPG hoặc WebP nhỏ hơn PNG; bạn có thể chuyển tệp PNG sau đó trong công cụ chuyển đổi hình ảnh.
• Favicon: Nếu logo của bạn là SVG, công cụ tạo favicon chấp nhận nó và thêm icon.svg vào gói.
• Nguồn sạch để dò nét: Khi tạo SVG từ PNG, hãy bắt đầu bằng một ảnh độ phân giải cao, màu phẳng, không nhiễu.

Câu hỏi thường gặp

SVG và PNG khác nhau thế nào?

Một tệp PNG có số điểm ảnh cố định và bị mờ khi phóng to. Một tệp SVG mô tả hình dạng và được vẽ lại sắc nét ở mọi kích thước. SVG hợp với logo và biểu tượng; PNG hoặc JPG hợp với ảnh chụp và ảnh chụp màn hình.

Tệp SVG có thể chứa virus không?

SVG không phải chương trình thực thi, nhưng có thể nhúng JavaScript. Script không chạy khi SVG được hiển thị như hình ảnh (<img>), nhưng có thể chạy khi tệp được mở trực tiếp trong trình duyệt. Hãy xem SVG từ nguồn không rõ bằng một trình xem ảnh, hoặc chuyển nó sang PNG, thay vì mở trực tiếp.

Có chèn SVG vào Word hoặc PowerPoint được không?

Các phiên bản Microsoft Office hiện tại hỗ trợ chèn SVG. Với phiên bản cũ hơn, hoặc nếu bạn sẽ chia sẻ tệp với chương trình khác, một bản sao PNG an toàn hơn.

Chuyển SVG sang PNG có làm giảm chất lượng không?

PNG không mất dữ liệu, nhưng bản vẽ bị cố định ở một kích thước điểm ảnh. Chọn chiều rộng đủ lớn thì bạn sẽ không nhận ra mất mát nào; phóng to tệp PNG về sau sẽ làm nó bị mờ.

SVG có hỗ trợ ảnh động không?

Có. Chuyển động có thể đến từ hoạt ảnh CSS, các phần tử hoạt ảnh SMIL và JavaScript. Chuyển sang PNG sẽ cho bạn một khung hình duy nhất.

Nguồn tham khảo

• W3C: Scalable Vector Graphics (SVG) 1.1 (Second Edition)
• W3C: Scalable Vector Graphics (SVG) 1.0 Specification
• W3C: Scalable Vector Graphics (SVG) 2
• W3C: lịch sử công bố SVG 2
• MDN: SVG as an image
• MDN: Image file type and format guide