SVG là gì? Tại sao nên dùng SVG?

Việc hiển thị hình ảnh trên nhiều màn hình có kích thước khác nhau là một vấn đề "đau đầu", bởi cách sử dụng CSS thông thường rất tốn thời gian và công sức. Thay vào đó, thủ thuật SVG lại rất được ưa chuộng bởi những tiện ích mà nó mang lại. Vậy SVG là gì? Hãy cùng tìm hiểu ngay nhé!

Việc hiển thị hình ảnh trên nhiều màn hình có kích thước khác nhau là một vấn đề "đau đầu", bởi cách sử dụng CSS thông thường rất tốn thời gian và công sức. Thay vào đó, thủ thuật SVG lại rất được ưa chuộng bởi những tiện ích mà nó mang lại. Vậy SVG là gì? Hãy cùng tìm hiểu ngay nhé!

Tóm tắt nhanh: SVG là gì, file .svg là file gì? (ColorME bổ sung, 14/10/2026)

SVG (Scalable Vector Graphics) là định dạng ảnh vector: file .svg là file văn bản chứa các lệnh vẽ, nên phóng to hay thu nhỏ đều nét. MDN gọi SVG là ngôn ngữ đánh dấu dựa trên XML; đặc tả hiện hành là SVG 2 của W3C.

Nguồn bảng: trang định dạng ảnh của MDN, đọc ngày 14/10/2026. Phần không ghi "ColorME bổ sung" là bài gốc, giữ nguyên.

SVG là gì?

SVG là gì?

SVG (Scalable Vector Graphics) là định dạng ảnh vector dùng để thể hiện các đối tượng đồ họa hai chiều và có hỗ trợ tương tác từ phía người dùng cũng như ảnh động. Vì là hình ảnh dạng vector nên chúng ta có thể hiển thị, co giãn (scale) thoải mái mà không làm giảm chất lượng hình ảnh.

SVG thuộc tiêu chuẩn mở và được quản lý bởi tổ chức World Wide Web Consortium, một tổ chức quản lý nhiều chuẩn khác như HTML, XHTML... Các tập tin có đuôi ".svg" được mặc định hiểu là tập tin SVG. SVG có thể phóng to thu nhỏ mọi kích cỡ mà không giảm chất lượng hình ảnh. Vì thế, nó được dùng nhiều trong các bản đồ, sơ đồ.

SVG - định dạng ảnh vector

Điều gì làm cho đồ họa vector trở nên hấp dẫn đến mức rất nhiều công ty lớn trong ngành công nghệ cũng như hãng phần mềm thiết kế nhảy vào cùng phát triển? Bạn có thể tưởng tượng rằng trong đồ họa vector, mọi đường thẳng, đường cong, hình tròn, hình chữ nhật... đều được vẽ ra đều dựa vào các điểm tọa độ. Các điểm này sẽ được nối với nhau trong không gian hai chiều để tạo nên các hình ảnh thực sự. Bởi vì tọa độ này chỉ mang tính tương đối so với hệ trục tại thời điểm vẽ nên 1 đơn vị trong đồ họa vector có thể là 10 pixel, 20 pixel hay 100 pixel.

Bên trong một file SVG: ba ví dụ ngắn (ColorME bổ sung, 14/10/2026)

Mỗi đoạn là một file SVG hoàn chỉnh: chép vào file đuôi .svg rồi mở bằng trình duyệt là thấy hình.

Hình tròn

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40"
          fill="#1F3FE0"/>
</svg>

cx, cy là tọa độ tâm, r là bán kính (W3C, Basic shapes).

Đường path

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 100 100">
  <path d="M 10 90 L 50 10 L 90 90 Z"
        fill="none" stroke="#121212"/>
</svg>

Trong thuộc tính d, M là moveto (đưa bút tới điểm đầu), L là lineto (kẻ đoạn thẳng), Z là closepath (khép hình), theo chương Paths.

viewBox: vì sao SVG co giãn được

<svg xmlns="http://www.w3.org/2000/svg"
     width="240" height="240"
     viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40"/>
</svg>

Bốn số của viewBox (min-x, min-y, width, height) xác định một khung của hình vẽ, khung này được ánh xạ vào vùng hiển thị (chương Coordinate systems). Đổi 240 thành 24 hay 2400, hình vẫn là hình đó.

SVG khác PNG, JPG và WebP thế nào? (ColorME bổ sung, 14/10/2026)

Nguồn: bảng định dạng ảnh của MDN, trang SVG của MDN và trang định dạng xuất của Figma.

Ưu điểm của SVG 

Kích thước file nhỏ, dễ nén

Hình ảnh SVG, XML, chứa nhiều mảnh lặp đi lặp lại của văn bản, vì vậy chúng rất thích hợp cho các thuật toán nén lossless dữ liệu. Khi một hình ảnh SVG đã được nén bằng thuật toán tiêu chuẩn gzip, nó được gọi là một hình ảnh "svgz" và sử dụng phần mở rộng tên tập tin .svgz tương ứng.

Nếu file SVG xuất từ Illustrator, Figma hay Inkscape vẫn còn nặng, bạn có thể dùng công cụ tối ưu SVG online của ColorME để xoá metadata, làm tròn số và gộp path, theo mô tả của công cụ là “giảm 30–80% dung lượng”, rồi so sánh bản gốc với bản đã tối ưu trước khi tải về, miễn phí và không cần đăng nhập.

Hiển thị đẹp trên màn hình retina

SVGs giống với tất cả các đồ họa vector, có thể được thu nhỏ đến kích thước bất kỳ mà không mất đi sự rõ ràng (trừ rất nhỏ). Nói cách khác, bạn có thể phóng to để một SVG tất cả các bạn muốn và họ sẽ luôn luôn nhìn sắc nét. Vì vậy, bạn không còn phải tạo ra một phiên bản 2x Retina phiên bản cho logo hình ảnh của bạn.

Ưu điểm của SVG

Có thể làm ảnh động

Sử dụng thẻ SVG để nhúng các hình ảnh trên trang web cho phép chúng ta định dạng một cách dễ dàng thông qua CSS, giống như cách làm với thẻ HTML thông thường. Ta có thể thay đổi thuộc tính đối tượng như màu nền, độ mờ đục, vị trí, chiều rộng,... Ngoài ra, ta cũng có thể thêm các hiệu ứng hình ảnh động ấn tượng bằng cách sử dụng sự kết hợp của các thư viện JS và CSS.

Hỗ trợ đầy đủ

Sau nhiều năm không tương thích trình duyệt, SVGs cuối cùng đã có thể. Chúng được hỗ trợ trong tất cả các trình duyệt hiện đại bao gồm IE9. Bạn thậm chí có thể sử dụng Fallbacks nếu bạn vẫn còn quan tâm đến IE8.

Ghi chú (ColorME bổ sung, 14/10/2026): đoạn trên viết từ thời IE8, IE9. Nay MDN ghi SVG chạy trên mọi phiên bản Chrome, Edge, Firefox, Opera và Safari.

Thời gian tải tốt hơn

SVGs tuyệt vời cho thiết kế web, vì nó có độ phân giải vô hạn và kích thước file rất nhỏ. Nó có thể được nhúng trực tiếp vào một tài liệu HTML với thẻ svg, do trình duyệt không cần phải tải về đồ họa. Điều này có nghĩa rằng trang web của bạn sẽ được tải nhanh hơn!

Nhược điểm của SVG

SVG là ngôn ngữ không được thiết kế để sửa chữa trực tiếp trên mã nguồn. Để tạo ra các hình ảnh SVG nói chung, cần dùng các công cụ hỗ trợ.

SVG cũng tồn tại một số nhược điểm nhất định

Dù SVG có thể là một lựa chọn cho hình ảnh của các trang mạng trong tương lai không xa, nó vẫn còn khá mới mẻ và cần sự hỗ trợ từ các trình duyệt mạng. Hiện nay Firefox đã hỗ trợ tương đối đầy đủ cho SVG, tuy nhiên Internet Explorer 8 và một số trình duyệt khác cần có plug-in đặt riêng lẻ.

Ghi chú (ColorME bổ sung, 14/10/2026): hai ý trên đã cũ. MDN viết file SVG tạo và sửa được bằng bất kỳ trình soạn văn bản nào. Theo phần lịch sử trên MDN, SVG ra đời năm 1999, bản 1.1 thành khuyến nghị của W3C năm 2003 và SVG không cần phần mở rộng của bên thứ ba.

Dùng SVG khi nào?

Tất nhiên không thể dùng SVG trong 100% mọi trường hợp. Nhược điểm của SVG là giới hạn về độ chi tiết và màu sắc, tất nhiên chúng ta có thể sử dụng SVG để vẽ một hình ảnh phức tạp, hoặc thực như ảnh chụp, nhưng nếu làm vậy thì performance sẽ rất tệ.

Nhưng với xu hướng hiện nay, phong cách thiết kế phẳng đang là mốt, những website với giao diện đơn giản, sử dụng hình ảnh cũng đơn giản, ít chi tiết thì SVG hoàn toàn có thể phát huy được thế mạnh của mình.

Khi nào không nên dùng SVG? (ColorME bổ sung, 14/10/2026)

MDN viết SVG nhìn chung không hữu ích cho ảnh thuần bitmap hay ảnh chụp, và nêu thêm rằng tải SVG có thể chậm. Ảnh chụp nên để JPG, PNG hoặc WebP; tranh vẽ theo từng điểm ảnh như pixel art cũng vậy. Màu trong SVG ghi bằng cú pháp màu của CSS, nên nếu file sẽ đem in, hãy đọc bài hệ màu CMYK và RGB trước.

Các công cụ hỗ trợ SVG

Ứng dụng Desktop

• Adobe Illustrator (Premium)

• CorelDraw (Premium)

• Xara (Premium)

• InkScape (FREE)

Free Web-based

• Method Draw

• Mondrian

• SVG Edit

Xuất SVG từ Illustrator và Figma (ColorME bổ sung, 14/10/2026)

Illustrator. Chọn File > Save As rồi chọn SVG (*.SVG), cách này giữ artboard đang chọn (Adobe, Save artwork). Hoặc chọn File > Export > Export As, chọn SVG (nên tick Use Artboards) (Adobe, Export artwork). Ở mục Font, Adobe ghi outlines là cách tương thích nhất. Xem thêm lộ trình học Illustrator.

Figma. Chọn layer hoặc frame, ở mục Export trong thanh bên phải bấm dấu cộng, chọn SVG rồi bấm Export (Figma, Export). Figma lưu ý: chữ mặc định xuất thành glyph nên không sửa được nữa, muốn giữ chữ thì bỏ chọn Outline text; SVG chỉ xuất ở 1x.

Chuyển PNG, JPG sang SVG: làm được gì, không làm được gì? (ColorME bổ sung, 14/10/2026)

Phần mềm phải "trace", tức vẽ lại ảnh thành các path. Trong Illustrator đó là Image Trace: File > Place để đặt ảnh, chọn một preset, kết quả thay thế ảnh gốc (Adobe, Image Trace). Trang tùy chọn của Adobe cho thấy giới hạn: chế độ đen trắng đưa mọi điểm ảnh về đen hoặc trắng theo ngưỡng Threshold; tùy chọn Shapes chỉ nhận ra hình tròn, hình vuông tách rời và hoàn hảo. Theo cách hiểu của ColorME, trace là bản vẽ lại gần đúng, không phải file gốc.

Trang chuyển ảnh sang vector của ColorME ghi công cụ hợp với "Logo, icon, hình vẽ nét, hình minh hoạ phẳng và ảnh ít màu". Chưa có logo thì trang tạo logo ghi "khi tải SVG, công cụ chuyển chữ thành đường nét". Trang xuất bộ file logo ghi "SVG là tốt nhất · PNG nền trong suốt cũng được".

Đưa SVG lên trang web và chuyện an toàn (ColorME bổ sung, 14/10/2026)

MDN nêu ba cách: đặt thẻ svg thẳng trong HTML; nhúng bằng iframe, object hoặc embed; hoặc dùng như ảnh thường với thẻ img hay background-image của CSS:

<img src="logo.svg" alt="Logo ColorME">

File SVG có thể chứa thẻ script và thuộc tính sự kiện như onclick. Khi SVG đứng ở vị trí của một ảnh (thẻ img, ảnh trong CSS), đặc tả SVG 2 yêu cầu không chạy script, không tải tài nguyên bên ngoài. MDN ghi hạn chế này không áp dụng khi mở trực tiếp file SVG hoặc nhúng bằng iframe, object, embed. Gợi ý của ColorME: file SVG từ nguồn lạ nên hiển thị bằng thẻ img, và xem mã trước khi dán vào trang.

Câu hỏi thường gặp về SVG (ColorME bổ sung, 14/10/2026)

File .svg (đuôi svg) là file gì?

File ảnh vector theo chuẩn SVG của W3C; bên trong là văn bản XML.

File SVG mở bằng gì?

Xem bằng trình duyệt web. Sửa bằng phần mềm vẽ vector như Illustrator, Inkscape, hoặc bằng trình soạn văn bản.

Logo nên lưu SVG hay PNG?

Figma khuyên dùng SVG cho logo, icon, hình minh họa trong thiết kế responsive. PNG hợp khi nơi nhận cần ảnh điểm ảnh có nền trong suốt.

Lời kết

Việc dùng hình ảnh dạng vector, mà cụ thể là SVG để tiết kiệm công sức, tăng tốc độ load trang, giảm dung lượng website đang ngày càng được ưa chuộng. Hi vọng rằng qua bài viết này, các bạn có thể biết thêm một thủ thuật hiển thị hình ảnh nhanh gọn mà hiệu quả nhất! Và còn chần chờ gì nữa, hãy tham khảo ngay các khóa học thiết kế của ColorME để tìm hiểu sâu hơn về mảng design nhé!