SVG optimization

SVG optimization là gì?

SVG optimization (tối ưu hóa file SVG) là quá trình làm gọn mã nguồn của file hình ảnh vector định dạng SVG — bằng cách xóa bỏ phần không cần thiết như chú thích (comment), dữ liệu siêu thông tin (metadata), thuộc tính thừa, nhóm path lặp hoặc không dùng đến, đồng thời nén cấu trúc XML để giảm kích thước file — mà không làm mất chất lượng hình ảnh hay ảnh hưởng đến hiển thị.

Tại sao quan trọng trong SEO?

File SVG thường nhẹ hơn PNG/JPEG ở cùng độ phân giải, nhưng nếu chưa được tối ưu thì vẫn có thể chứa hàng chục KB dữ liệu thừa. Điều này ảnh hưởng trực tiếp đến tốc độ tải trang — một yếu tố xếp hạng chính thức của Google từ năm 2021 (Core Web Vitals). Một file SVG chưa tối ưu có thể làm chậm LCP (Largest Contentful Paint), tăng thời gian render và gây lỗi trên các thiết bị di động có băng thông hạn chế.

Ngoài ra, SVG là file văn bản (XML), nên mã nguồn sạch giúp công cụ tìm kiếm dễ đọc hơn nội dung mô tả, đặc biệt khi có thẻ <title> hoặc <desc> được giữ lại đúng cách — hỗ trợ hình ảnh xuất hiện trong kết quả tìm kiếm hình ảnh (Google Images).

Cách hoạt động

SVG optimization dựa trên hai nguyên lý chính: loại bỏ dư thừa và tái cấu trúc hiệu quả. Các công cụ như SVGO phân tích cây DOM XML của file SVG, sau đó áp dụng hàng chục plugin độc lập để xử lý từng loại thành phần:

• Xóa comment (<!-- ... -->) và thẻ <metadata> (thường do phần mềm thiết kế chèn vào)
• Rút gọn tên lớp, ID, thuộc tính trùng lặp (ví dụ: fill="#000" thay vì fill="black")
• Hợp nhất các đường path gần nhau nếu không vi phạm tính toàn vẹn hình học
• Chuyển đổi đơn vị tuyệt đối sang tương đối khi an toàn
• Loại bỏ nhóm <g> rỗng hoặc chỉ chứa comment

Mỗi bước đều kiểm tra tính tương thích với trình duyệt trước khi áp dụng — đảm bảo hình ảnh vẫn hiển thị đúng trên mọi nền tảng.

Hướng dẫn thực hiện

Dưới đây là quy trình tối ưu SVG chuẩn cho website Việt Nam, phù hợp cả người mới bắt đầu và kỹ thuật viên:

1. Xuất SVG từ phần mềm thiết kế: Khi lưu từ Figma, Adobe Illustrator hoặc Inkscape, chọn “SVG tối giản” hoặc tắt tùy chọn “Include metadata”, “Responsive”, “Minify” nếu có. Tránh chọn “SVG for web” mặc định vì thường kèm nhiều lớp không cần thiết.
2. Sử dụng SVGO (công cụ miễn phí, mã nguồn mở): Cài đặt qua npm:
   npm install -g svgo
   Sau đó chạy lệnh cơ bản:
   svgo input.svg -o output.svg
3. Tùy chỉnh mức độ tối ưu: Dùng tệp cấu hình svgo.yml để bật/tắt plugin theo nhu cầu. Ví dụ: giữ lại <title> cho SEO hình ảnh, nhưng loại bỏ <desc> nếu không dùng.
4. Kiểm tra thủ công: Mở file SVG đã xử lý bằng trình soạn thảo (VS Code, Notepad++), kiểm tra xem còn comment, thẻ <metadata>, hoặc ID dài vô nghĩa không.
5. Thử nghiệm trên thực tế: So sánh kích thước file trước/sau, kiểm tra hiển thị trên Chrome, Firefox, Safari và thiết bị di động. Dùng Lighthouse để đo LCP trước và sau khi thay thế.

Lỗi thường gặp

• Hình bị lệch hoặc mất màu: Do SVGO loại bỏ thuộc tính fill hoặc stroke khi phát hiện trùng lặp — khắc phục bằng cách thêm --disable=removeUselessStrokeAndFill hoặc khai báo rõ ràng trong CSS thay vì inline.
• Hiệu ứng hover/animation không hoạt động: Vì ID hoặc class bị đổi tên hoặc xóa. Giải pháp: tắt plugin cleanupIDs hoặc dùng thuộc tính data-id thay thế.
• SVG không hiển thị trên IE11: Một số phiên bản SVGO tạo cú pháp không tương thích (ví dụ: viewBox viết hoa sai). Kiểm tra bằng trình duyệt thử nghiệm hoặc dùng tùy chọn --enable=convertShapeToPath để chuyển đổi an toàn.
• File nhỏ hơn nhưng tải chậm hơn: Do nén quá mức khiến trình duyệt phải parse lại cấu trúc phức tạp. Trường hợp này hiếm, nhưng nếu xảy ra thì giảm mức độ tối ưu hoặc dùng SVG inline thay vì external.

Ví dụ thực tế

Một logo thương hiệu xuất từ Figma có kích thước ban đầu: 48,2 KB. Sau khi tối ưu bằng SVGO với cấu hình mặc định:

Thành phần	Trước tối ưu	Sau tối ưu	Giảm
Kích thước file	48,2 KB	4,7 KB	90,3%
Số dòng mã	1.246	187	85%
Comment & metadata	32 chỗ	0	100%
Nhóm <g> thừa	14 nhóm	3 nhóm	79%

Kết quả: Tốc độ LCP cải thiện 0,8s trên mạng 3G giả lập (theo WebPageTest), và hình ảnh xuất hiện trong Google Images với tiêu đề rõ ràng nhờ thẻ <title> được giữ lại.

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

SVG optimization có làm mất chất lượng hình ảnh không?

Không. SVG là hình ảnh vector — không có khái niệm “nén mất dữ liệu” như JPEG. Tối ưu chỉ loại bỏ mã thừa, không thay đổi hình dạng, màu sắc hay tỉ lệ. Chất lượng hiển thị luôn 100% gốc.

Có nên tối ưu SVG inline trong HTML không?

Có thể, nhưng cần cân nhắc: SVG inline giúp tránh HTTP request riêng, tốt cho tài nguyên nhỏ (icon, biểu tượng). Với file lớn (>5 KB), nên để external và nén qua CDN — vì inline sẽ làm tăng kích thước HTML, ảnh hưởng đến thời gian parse.

Công cụ nào tốt nhất để tối ưu SVG ngoài SVGO?

SVGO vẫn là lựa chọn hàng đầu về độ tin cậy và tùy biến. Các công cụ trực tuyến như SVGOMG (giao diện web của SVGO), Figma plugins (SVG Exporter), hoặc CLI như svgcleaner cũng khả dụng — nhưng mức độ kiểm soát và tính ổn định thấp hơn. Việc tự host SVGO trên máy chủ hoặc CI/CD là phương án chuyên nghiệp nhất cho website có lượng SVG lớn.