Tệp SVG là gì? Cách mở, sử dụng và tạo SVG

Tệp SVG (Scalable Vector Graphics) là hình ảnh được mô tả bằng XML và hình học vector thay vì chỉ một lưới pixel cố định. Vì có thể lưu ảnh dưới dạng hình, đường dẫn, chữ và màu tô, các phần tử vector giữ nét khi đổi kích thước. Kích thước tệp tùy số lượng, độ phức tạp của phần tử và việc SVG có nhúng nội dung raster hay không. Xem tiêu chuẩn SVG 2 của W3C.

Đây là hướng dẫn dễ hiểu cho bất kỳ ai vừa gặp định dạng này: SVG thực sự là gì, bên trong có gì, phù hợp và không phù hợp việc nào, cách mở và cách tạo từ ảnh bạn đã có. Không cần kiến thức lập trình web.

Ý chính

• SVG lưu ảnh dưới dạng hình được mô tả bằng mã, thay vì pixel, nên đổi sang mọi kích thước mà không mờ.
• Rất phù hợp cho logo, biểu tượng, minh họa đơn giản và công việc Cricut hoặc in ấn. Kém phù hợp với ảnh chụp.
• Mở tệp trong trình duyệt web, ứng dụng thiết kế (Illustrator, Inkscape, Figma, Canva), thậm chí trình soạn thảo văn bản thuần.
• Tạo tệp bằng phần mềm vector hoặc chuyển ảnh bạn đã có thành SVG.

SVG so với ảnh thông thường (PNG hoặc JPG)

PNG hoặc JPG là ảnh raster: lưới cố định các pixel màu, giống tranh ghép. Phóng đủ lớn bạn sẽ thấy những ô vuông, nên logo lưu dạng PNG bị mờ khi phóng to.

SVG là ảnh vector: tập chỉ dẫn nói “vẽ vòng tròn ở đây, tô cam, vẽ đường cong này ở kia”. Vì ảnh được vẽ lại từ các chỉ dẫn mỗi lần hiển thị, nó trông sắc nét ở mọi kích thước. Chính sự khác biệt đó tạo nên sức hút. (Để biết đầy đủ khi nào dùng từng loại, xem PNG và SVG.)

Bên trong tệp SVG thực sự có gì?

Điều khiến nhiều người bất ngờ: SVG là văn bản. Mở trong Notepad hoặc trình soạn mã bất kỳ là bạn có thể đọc. Bên dưới, nó là XML, định dạng văn bản có thẻ, trong đó mỗi hình là một dòng mã. SVG đơn giản của vòng tròn cam như sau:

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="orange" />
</svg>

Đó là toàn bộ tệp. circle vẽ hình, cx/cy đặt vị trí, r đặt bán kính và fill đặt màu. Vì SVG là XML dựa trên văn bản, bạn có thể kiểm tra và, với tệp đơn giản như trên, đổi màu bằng cách sửa một thuộc tính. SVG là tiêu chuẩn mở của W3C được trình duyệt hiện đại triển khai. Đọc phần giới thiệu SVG của W3C.

Nếu nhận tệp có đuôi .svgz, bài so sánh SVGZ và SVG giải thích cách lấy lại mã và chọn dạng phù hợp để chỉnh sửa hoặc đưa lên web.

SVG được dùng làm gì?

SVG hữu ích ở mọi nơi đồ họa cần giữ nét tại nhiều kích thước hoặc được chỉnh như các hình:

• Logo. Một SVG dùng được trên danh thiếp lẫn băng rôn mà không cần tệp riêng cho mỗi kích thước.
• Biểu tượng và đồ họa web. Nút, mũi tên và minh họa đơn giản giữ nét trên các mật độ màn hình khác nhau; hiệu năng vẫn phụ thuộc độ phức tạp của tệp và cách phân phối tài nguyên.
• Cricut và máy cắt. SVG là định dạng tệp cắt tiêu chuẩn. Máy bám theo đường dẫn để cắt vinyl, giấy hoặc HTV. (Chuẩn bị SVG cho Cricut trình bày toàn bộ quy trình.)
• In ấn và biển bảng. Vector đổi sang mọi kích thước vật lý mà không vỡ hạt.

SVG không phù hợp việc gì?

SVG dành cho hình đồ họa phẳng, nên kém phù hợp với ảnh chụp. Ảnh chụp gồm hàng triệu màu pha trộn tinh tế, không có vùng phẳng, và ép thành hình sẽ tạo bản phân mảng màu giống tranh hoặc tệp rất lớn, rối. Nếu định vector hóa ảnh chụp, hãy đọc điều thực sự xảy ra khi chuyển ảnh chụp thành SVG trước. Để giữ chi tiết ảnh chụp thật, giữ JPG hoặc PNG.

Cách mở tệp SVG

Có ba lựa chọn dễ dàng tùy việc bạn muốn làm:

• Chỉ xem: Kéo tệp vào trình duyệt web bất kỳ. Ảnh hiển thị ngay, không cần phần mềm riêng.
• Chỉnh sửa trực quan: Mở trong ứng dụng thiết kế như Inkscape (miễn phí), Illustrator, Figma hoặc Canva. (Cách chỉnh SVG hướng dẫn đổi màu và đổi hình.)
• Xem hoặc sửa mã: Mở trong trình soạn văn bản thuần như Notepad hoặc VS Code.

Nếu tệp mở ra khung vẽ trống, dùng danh sách kiểm tra SVG trống trước khi lưu lại. Đường dẫn có thể nằm ngoài khung, vô hình, bị cắt xén hoặc không được ứng dụng đó hỗ trợ.

Cách tạo SVG

Có hai cách, và cách phù hợp tùy thứ bạn có lúc bắt đầu.

Thiết kế từ đầu. Vẽ logo, biểu tượng hoặc minh họa trong phần mềm vector (Inkscape, Illustrator, Figma hoặc Canva), rồi xuất SVG. Cách này cho kết quả sạch nhất vì tệp vốn là vector từ đầu.

Chuyển ảnh đã có. Đây là nhu cầu thực tế của phần lớn mọi người. Nếu logo hoặc hình chỉ có dạng PNG hay JPG, bạn biến thành SVG bằng vector hóa, tức vẽ lại pixel thành các hình chỉnh sửa được. (Vector hóa hình ảnh là gì giải thích quy trình.)

Quy trình này với PerfectVector trông thế nào?

Nếu có PNG hoặc JPG và cần SVG thật, đó là hướng chuyển đổi. PerfectVector dựng lại logo, biểu tượng và minh họa phẳng phù hợp thành đường dẫn SVG và hình màu chỉnh sửa được. Chuyển ảnh thành SVG, so sánh bản xem trước miễn phí với nguồn và kiểm tra đường dẫn trước khi dùng một tín dụng mở khóa tệp hoàn chỉnh.

Công cụ hoạt động tốt nhất với cùng loại hình mà SVG vốn phù hợp: đồ họa phẳng và logo. Với ảnh chụp nhiều chi tiết, không công cụ chuyển đổi nào cho vector giữ nguyên tính chất ảnh chụp, và chúng tôi sẽ nói rõ thay vì giả vờ có thể.

Lưu ý ngắn về an toàn

SVG có thể chứa nội dung hoạt động, gồm phần tử <script>, nên không nên mặc định SVG không đáng tin cậy là an toàn chỉ vì đó là định dạng ảnh. MDN có tài liệu trực tiếp về script SVG. Với quy trình tải lên website, xác thực loại và nội dung tệp, đổi tên tệp lưu, áp giới hạn kích thước và phân phối với quyền tối thiểu; OWASP khuyên cách phòng vệ nhiều lớp này cho nội dung tải lên không đáng tin cậy. Xem hướng dẫn File Upload Cheat Sheet của OWASP.

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

Tệp SVG dùng làm gì? Logo, biểu tượng web, nút, minh họa đơn giản và tệp cắt cho máy như Cricut. Ở bất kỳ đâu hình cần giữ nét tại nhiều kích thước hoặc được chỉnh như các hình, SVG là lựa chọn tốt. Định dạng được dùng nhiều trên web vì tệp nhỏ và đổi kích thước không mất chất lượng.

Tôi mở tệp SVG như thế nào? Kéo vào trình duyệt hiện đại để xem, mở trong ứng dụng thiết kế tương thích như Inkscape, Illustrator, Figma hoặc Canva để chỉnh trực quan, hoặc mở bằng trình soạn văn bản như Notepad để kiểm tra XML. Không có ảnh thu nhỏ trong hệ điều hành tự nó không chứng minh tệp hỏng; mở bằng trình xem tương thích để kiểm tra.

Tôi tạo tệp SVG như thế nào? Thiết kế trong phần mềm vector (Inkscape, Illustrator, Figma hoặc Canva) rồi xuất SVG, hoặc vector hóa ảnh đã có như logo PNG hay JPG thành SVG. Thiết kế từ đầu cho kết quả sạch nhất; chuyển đổi là đường nhanh khi chỉ có tệp raster.

Tệp SVG có phải tệp vector không? Có. SVG là viết tắt của Scalable Vector Graphics và lưu ảnh thành hình vector thay vì pixel. Đó chính là lý do đổi sang mọi kích thước mà không mất chất lượng.

SVG khác PNG hoặc JPG thế nào? PNG hoặc JPG gồm pixel và mờ khi phóng vượt độ phân giải. SVG gồm các hình và giữ nét ở mọi kích thước. PNG và JPG tốt hơn cho ảnh chụp; SVG tốt hơn cho logo, biểu tượng và đồ họa.

Tôi mở SVG trong Microsoft Word hoặc Office được không? Có, trong các phiên bản Microsoft 365 và Office được hỗ trợ. Microsoft mô tả cách chèn SVG và dùng điều khiển Graphics Format để đổi màu hoặc kiểu dáng; điều khiển có thể khác tùy ứng dụng và phiên bản. Xem hướng dẫn chỉnh SVG của Microsoft.

Nguồn tham khảo

1. W3C — Scalable Vector Graphics (SVG) 2 — Định nghĩa chuẩn tắc về phần tử SVG, hình học, kết xuất và cú pháp XML.
2. W3C — Nội dung nhúng trong SVG — Cách hoạt động theo chuẩn của ảnh raster và nội dung khác nhúng trong SVG.
3. MDN — <script> trong SVG — Tài liệu tham chiếu cho thấy SVG có thể chứa script thực thi.
4. OWASP — File Upload Cheat Sheet — Biện pháp bảo mật khi nhận và phân phối tệp tải lên không đáng tin cậy.
5. Hỗ trợ Microsoft — Chỉnh ảnh SVG trong Microsoft 365 — Hỗ trợ Office chính thức và quy trình chỉnh đồ họa SVG.

---

SVG có thể mô tả hình bằng đường dẫn thay vì lưới pixel cố định. Nếu hình phẳng phù hợp của bạn chỉ có PNG hoặc JPG, hãy đồ lại bằng PerfectVector, kiểm tra hình trong bản xem trước và thử SVG đã mở khóa trong công cụ sẽ chỉnh sửa, in hoặc cắt.