Trình tối ưu hóa SVG

Giới thiệu về tiện ích này

File SVG (Scalable Vector Graphics) mô tả hình dạng, đường path và văn bản bằng markup XML. Công cụ thiết kế, export CMS và icon viết tay thường chứa nhiều dữ liệu hơn mức trình duyệt cần để render cùng một hình. Tối ưu SVG là quá trình loại bỏ markup thừa — comment, metadata trình soạn thảo, nhóm trùng lặp, độ chính xác tọa độ không cần thiết và thuộc tính không dùng — trong khi giữ nguyên kết quả hiển thị ở kích thước bình thường. Khác với định dạng raster như PNG hay JPEG, SVG vẫn chỉnh sửa được và độc lập độ phân giải sau nén. Icon tối ưu tốt có thể giảm từ 40 KB xuống 6 KB mà không mất pixel hiển thị. Tối ưu hóa cần thiết cho logo, icon giao diện, minh họa và favicon tải mỗi lần xem trang. File nhỏ hơn nghĩa là tải trang nhanh hơn, băng thông mobile thấp hơn và điểm Core Web Vitals tốt hơn. Công cụ tìm kiếm ưu tiên trang nhanh; người dùng nhận ra khi icon xuất hiện muộn hoặc chặn rendering. SVG tối ưu nhúng sạch hơn vào HTML, component React và template email nơi markup phình to có thể làm hỏng parser hoặc phình bundle. Website production tham chiếu icon SVG trong nền CSS, thẻ <svg> inline hoặc phần tử img. Mỗi kilobyte đóng góp vào đường render quan trọng, đặc biệt khi nhiều icon above the fold. Xóa khoảng trắng, gom transform và bỏ khai báo doctype giảm dung lượng truyền mà không đụng CSS hay JavaScript. Nếu phục vụ favicon SVG với link rel="icon" type="image/svg+xml", trình duyệt cache mạnh — file gọn cập nhật nhanh hơn khi rebrand. Dự án React thường import SVG làm component hoặc URL. File nguồn phình to tăng thời gian parse bundle JavaScript khi loader inline thành chuỗi. Trước khi thêm icon vào thư viện component, chạy qua trình tối ưu để tree-shaking và code splitting hiệu quả. Khi dán markup đã tối ưu vào file .svg hoặc pipeline SVGR, xác nhận viewBox còn — ứng dụng React dựa vào viewBox để scale responsive. Trình duyệt hiện đại hỗ trợ favicon SVG liên kết từ head tài liệu. Scale sắc nét trên tab Retina và shortcut ghim nếu file nhỏ và hợp lệ. Favicon SVG nên vuông, bảng màu đơn giản, tránh tham chiếu ngoài hoặc script vì bảo mật. Sau tối ưu, chuyển sang ICO hoặc PNG khi cần hỗ trợ shell Windows cũ hoặc crawler mạng xã hội cần raster. Favicon SVG tối ưu là file master tuyệt vời cho workflow gói favicon đầy đủ. Designer thường export SVG với ảnh raster nhúng, độ chính xác thập phân quá mức trên path, hình chồng trùng và khối style có thể đơn giản thành thuộc tính. Illustrator đôi khi thêm layer đặt tên thành phần tử group; export Figma có xmlns và tọa độ phân số sáu chữ số thập phân. width và height thiếu viewBox phá layout responsive. Layer ẩn và clipping mask bật export hình học vô hình vẫn tính vào kích thước file. Từ Figma, dùng Copy as SVG hoặc export với Outline stroke khi icon dùng nét chuyển đổi kém. File Figma thường có fill-rule và ma trận transform trên mỗi nhóm; tối ưu gom path liền kề khi an toàn. Trong Illustrator, chọn export SVG Minify hoặc Responsive, tắt nhúng font không cần và expand appearance trước export. Sau export, dán markup vào trình tối ưu trên trình duyệt này. Xử lý cục bộ — tài sản thương hiệu không bao giờ tải lên server. Tải file sạch hoặc copy kết quả vào repo, CMS hoặc pipeline generator favicon. Kết hợp output với Bộ chuyển SVG sang ICO, SVG sang PNG hoặc Generator Favicon khi cần gói đa kích thước cho production.

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