Tối Ưu SVG
Đã làm sạchTối ưu hóa và dọn dẹp tệp SVG.
- Quy trình biểu tượng
Input bytes
0
Output bytes
0
Colors
0
ViewBox
—
Colors
fill/stroke/stop-color
Preview an SVG to extract colors.
Preview
No preview yet.
Output SVG
Sanitization
SVG can execute scripts or load external resources. This tool sanitizes the markup before preview and removes risky elements/attributes.
- Removes
<script>,<foreignObject>, and event handler attributes (on*). - Strips external
href/xlink:hrefunless it’s an internal#idreference.
SVG là gì?
SVG (Scalable Vector Graphics) là một định dạng ảnh vector dựa trên XML dành cho đồ họa hai chiều, có hỗ trợ tương tác và hoạt ảnh. Khác với các định dạng raster như JPEG hoặc PNG, SVG được định nghĩa bằng các đường dẫn toán học, nghĩa là chúng có thể được phóng to đến bất kỳ kích thước nào mà không mất chất lượng. Điều này khiến chúng hoàn hảo cho logo, biểu tượng, và minh họa trên web, nơi chúng vẫn sắc nét trên mọi thứ từ màn hình di động đến màn hình desktop độ phân giải cao.
Cách sử dụng công cụ này
Dán mã SVG của bạn vào ô văn bản SVG đầu vào bên trái. Nhấp Xem trước để xem đồ họa và trích xuất bảng màu của nó. Dùng nút Tối ưu hóa hoặc Rút gọn để dọn dẹp mã đánh dấu và giảm kích thước tệp. Tùy chọn, thay thế các màu cụ thể bằng cách nhập giá trị mới vào bảng Màu sắc và nhấp Áp dụng. Nhấp Sao chép hoặc Tải xuống để lưu SVG đã làm sạch và tối ưu của bạn.
Trường hợp sử dụng phổ biến
Quản lý biểu tượng để dọn dẹp SVG xuất từ các công cụ thiết kế như Figma hoặc Illustrator. Tùy chỉnh giao diện để nhanh chóng thay đổi màu sắc của bộ biểu tượng cho khớp với bảng màu thương hiệu của bạn. Bảo mật để làm sạch SVG từ các nguồn không đáng tin cậy nhằm loại bỏ các script tiềm ẩn hoặc tham chiếu bên ngoài. Hiệu năng để rút gọn mã đánh dấu SVG nhằm giảm kích thước đồ họa inline và cải thiện thời gian tải trang.
Mẹo hay
Sử dụng nút currentColor để chuyển đổi tất cả các fill và stroke rõ ràng thành currentColor, giúp SVG của bạn dễ dàng tạo kiểu qua CSS. Luôn tối ưu hóa SVG của bạn trước khi sử dụng trong production để đảm bảo chúng nhỏ nhất có thể. Khi tạo SVG trong các công cụ thiết kế, sử dụng tính năng Outline Stroke và Simplify Path để giảm độ phức tạp của mã được tạo ra trước khi tối ưu hóa.