SVG Optimizer
Tối ưu hóa, dọn dẹp thẻ rác và siêu dữ liệu thừa từ Figma/Illustrator để sinh ra mã SVG siêu nhẹ.
SVG Optimizer là gì? Tại sao cần tối ưu hóa mã SVG?
SVG (Scalable Vector Graphics) là định dạng đồ họa vector dựa trên XML rất phổ biến trên web. Tuy nhiên, khi xuất file từ các phần mềm thiết kế như Figma, Adobe Illustrator hay Inkscape, mã nguồn SVG thường bị chèn thêm rất nhiều siêu dữ liệu thừa, chú thích (comments), DOCTYPE và các thuộc tính rác của phần mềm.
Công cụ SVG Optimizer của VuiZ giúp bạn dọn dẹp sạch sẽ các thẻ không cần thiết, loại bỏ khoảng trắng dư thừa và thu nhỏ kích thước file mà không làm thay đổi hình dạng hay chất lượng hiển thị của vector. Toàn bộ quá trình diễn ra trực tiếp trên trình duyệt, an toàn và bảo mật 100%.
Tính năng chính
- Dọn dẹp siêu dữ liệu & thẻ rác Tự động loại bỏ thẻ metadata, title, desc, defs rỗng và các chú thích XML/HTML không cần thiết.
- Loại bỏ thuộc tính phần mềm thiết kế Xóa sạch các namespace và thuộc tính riêng của Figma, Sketch, Illustrator, Inkscape (sketch:*, inkscape:*, sodipodi:*, data-name, id thừa).
- Gộp nhóm rỗng & nén khoảng trắng Khử các thẻ nhóm <g></g> rỗng lồng nhau và tối giản khoảng trắng (minification) để giảm dung lượng file xuống mức thấp nhất.
- Xử lý cục bộ & Xem trước trực quan Thuật toán chạy ngay trên trình duyệt (Client-side) với phản hồi thời gian thực, kèm bảng xem trước vector trực quan.
Cách tối ưu hóa tệp mã SVG
Thực hiện các bước đơn giản sau để nén và làm sạch mã nguồn SVG.
- Tải tệp hoặc dán mã SVG Bấm nút "Tải file lên" để chọn tệp .svg từ máy tính hoặc dán trực tiếp mã SVG thô vào khung văn bản bên trái.
- Tự động xử lý & tối ưu Công cụ sẽ tự động phân tích cú pháp, dọn dẹp các thẻ rác, metadata thừa và hiển thị mã đã tối ưu ngay lập tức.
- So sánh kích thước & xem trước Theo dõi tỷ lệ phần trăm dung lượng đã giảm, kích thước tệp trước/sau và kiểm tra bản xem trước vector trực quan.
- Sao chép hoặc tải về Nhấn "Sao chép mã SVG" để đưa vào clipboard hoặc nhấn "Tải file SVG" để lưu tệp vector siêu nhẹ về máy.
Lưu ý khi sử dụng
- Sử dụng mã SVG đã tối ưu trực tiếp vào mã nguồn HTML (inline SVG) giúp trình duyệt tải trang nhanh hơn và dễ dàng đổi màu bằng CSS.
- Nếu tệp SVG của bạn sử dụng ID để tham chiếu gradient hoặc clip-path, hãy kiểm tra bản xem trước trực quan để đảm bảo hình ảnh hiển thị trọn vẹn.
- Việc dọn dẹp các thẻ <metadata> thừa còn giúp bảo vệ quyền riêng tư, tránh để lộ tên máy tính hoặc thông tin tác giả lưu trong tệp đồ họa.
