Trình Tối Ưu Hóa SVG

Cách hoạt động

1. Dán hoặc tải lên SVG: nhập đánh dấu SVG trực tiếp hoặc tải lên tệp .svg được xuất từ Illustrator, Figma hoặc Sketch.
2. Cấu hình các bước tối ưu hóa: chọn các tối ưu hóa nào để áp dụng, xóa chú thích, loại bỏ metadata, đơn giản hóa đường vẽ và chuẩn hóa viewBox.
3. Tối ưu hóa: công cụ chạy các bước đã chọn và hiển thị phần trăm giảm kích thước.
4. Tải xuống hoặc sao chép: lưu SVG đã tối ưu hoặc sao chép đánh dấu để dán vào mã của bạn.

Tại sao tối ưu hóa SVG của bạn?

Các tệp SVG được xuất từ các công cụ thiết kế đầy dữ liệu không cần thiết, metadata trình chỉnh sửa, khai báo kiểu nội tuyến với giá trị mặc định, các nhóm rỗng, các thuộc tính biến đổi dư thừa và chú thích. Sự dư thừa này tăng kích thước mà không thay đổi gì trong kết xuất. SVGO (trình tối ưu hóa SVG tiêu chuẩn ngành được sử dụng ở đây) thường có thể giảm kích thước từ 50 đến 80% trong khi vẫn bảo toàn kết xuất chính xác từng pixel. Các SVG nhỏ hơn tải nhanh hơn, được tích hợp nhanh hơn vào HTML và giảm băng thông, đặc biệt quan trọng đối với các hệ thống biểu tượng tải hàng chục SVG mỗi trang.

Các tối ưu hóa được áp dụng

• Chú thích đã xóa, chú thích của trình tạo và trình chỉnh sửa được loại bỏ
• Metadata đã xóa, các phần tử title, desc và XMP
• Nhóm rỗng được hợp nhất, các phần tử <g> bao bọc không cần thiết được loại bỏ
• Đường vẽ được đơn giản hóa, các lệnh đường vẽ dư thừa được hợp nhất và rút ngắn
• Thuộc tính được làm sạch, các giá trị mặc định và thuộc tính trình bày được loại bỏ
• ViewBox được chuẩn hóa, hệ thống tọa độ nhất quán

Lịch sử ngắn về SVG và SVGO

Scalable Vector Graphics bắt đầu như một cuộc cạnh tranh giữa hai đề xuất W3C: Precision Graphics Markup Language (PGML) từ Adobe, IBM, Netscape và Sun, và Vector Markup Language (VML) từ Microsoft. Cả hai đều được nộp vào năm 1998; thỏa hiệp W3C đã trở thành SVG, được khuyến nghị là SVG 1.0 vào tháng 9 năm 2001. Internet Explorer nổi tiếng từ chối vận chuyển hỗ trợ SVG cho đến IE9 (2011), trong khi Firefox, Safari và Opera đã hỗ trợ nó từ giữa những năm 2000. SVG 1.1 xuất hiện vào năm 2003, với Phiên bản Thứ hai vào năm 2011. SVG Tiny 1.2 nhắm vào các thiết bị di động vào năm 2008. SVG 2 bắt đầu được soạn thảo vào khoảng năm 2016 nhưng đã bị đình trệ; ngày nay nó vẫn là Dự thảo Khuyến nghị Ứng cử viên (lần cuối được sửa đổi vào năm 2018), với các trình duyệt vận chuyển các phần riêng lẻ. Tối ưu hóa đến sau. SVGO được tạo bởi Kir Belevich (svg-go) và được xuất bản lần đầu trên GitHub vào tháng 10 năm 2012, được viết bằng JavaScript. Nó trở thành tiêu chuẩn thực tế, được tích hợp vào webpack-loader, Vite, Sketch, plugin xuất Figma, và UI web SVGOMG của Jake Archibald (nhóm Chrome) được ra mắt vào năm 2015. SVGO 3 (phát hành 2023) đã hiện đại hóa cơ sở mã. Công cụ này triển khai một tập hợp con an toàn của các plugin có tác động mạnh nhất của SVGO, chạy hoàn toàn trong trình duyệt của bạn.

Trình tối ưu hóa SVG thực sự làm gì

• Giảm độ chính xác thập phân. Illustrator xuất các đường dẫn với 6 chữ số thập phân như M127.348293. Ba số thập phân giống hệt nhau về mặt trực quan cho các kích thước biểu tượng điển hình; một hoặc hai thường đủ. SVGO mặc định là 3 số thập phân thông qua plugin cleanupNumericValues. Độ chính xác thấp hơn = tệp nhỏ hơn.
• Thu gọn các nhóm vô dụng. Các công cụ thiết kế bao bọc mọi hoạt động trong các phần tử <g>; nhiều trở thành rỗng sau khi đơn giản hóa. Plugin collapseGroups hợp nhất các nhóm con đơn lẻ vào cha mẹ của chúng.
• Tước siêu dữ liệu. Illustrator đóng dấu mọi lần xuất với các khối <metadata>...</metadata> chứa các gói XMP, Inkscape với các thuộc tính namespace sodipodi, Figma với ID trình chỉnh sửa. Không có gì trong số này ảnh hưởng đến kết xuất. removeMetadata, removeEditorsNSData, và removeXMLProcInst xử lý chúng.
• Tối ưu hóa lệnh đường dẫn. Chuyển đổi tọa độ tuyệt đối thành tương đối (thường ngắn hơn), hợp nhất các đoạn đường liên tiếp (l 5,0 l 0,5 vẫn ở hai; L 5,0 L 5,5 trở thành v 5), loại bỏ Z vô dụng sau z. Plugin convertPathData có thể tiết kiệm 30-50% trên các chuỗi đường dẫn.
• Xóa thuộc tính mặc định. fill="black", stroke="none", stroke-width="1" là mặc định; SVGO tước chúng. Kết hợp với mergeStyles, điều này thường cắt giảm xuất khẩu kiểu inline còn một nửa.
• Rút ngắn màu sắc. #ffffff → #fff; rgb(255,255,255) → #fff; màu được đặt tên (aliceblue) → hex nếu ngắn hơn. Plugin convertColors.
• Xóa ID không sử dụng. ID do trình chỉnh sửa tạo ra như id="path-7423" thường không bao giờ được tham chiếu. cleanupIds của SVGO xóa các ID mồ côi và rút gọn phần còn lại thành a, b, c...

Nơi tối ưu hóa SVG quan trọng

• Hệ thống biểu tượng. Một trang có 30 biểu tượng SVG mỗi cái 2 KB là 60 KB; được tối ưu hóa thành 800 byte mỗi cái tiết kiệm 36 KB. Heroicons, Lucide, Phosphor, Feather đều vận chuyển SVG được tối ưu hóa trước; nếu bạn đã trích xuất chúng từ một tệp thiết kế, bạn cần tự làm điều này.
• Logo và tài sản thương hiệu. Các logo được gửi cho khách hàng thường là 50-100 KB từ Illustrator; được tối ưu hóa là 5-10 KB. Cùng độ trung thực hình ảnh, băng thông thấp hơn, tải trang nhanh hơn. SVG logo Wikipedia giảm từ 39 KB xuống 11 KB sau một lần tối ưu hóa.
• SVG inline trong HTML. Khi bạn nhúng SVG inline (không có yêu cầu HTTP bổ sung), mọi byte của SVG làm phồng tải HTML chặn trình phân tích cú pháp của trình duyệt. Một biểu tượng 200 byte so với 2 KB quan trọng cho thời gian sơn đầu tiên.
• Trực quan hóa dữ liệu. D3.js, Observable, đầu ra SVG ECharts, và React-vis tạo ra các SVG lớn với hàng nghìn phần tử. Một biểu đồ phân tán với 5.000 điểm dễ dàng là 500 KB thô; được tối ưu hóa có thể giảm xuống 150 KB trong khi vẫn giống nhau.
• Tạo phông biểu tượng. Các công cụ như IcoMoon, Fontello và Fontastic chuyển đổi SVG thành phông biểu tượng. Tối ưu hóa trước các SVG nguồn đảm bảo đầu ra phông sạch hơn và tệp phông nhỏ hơn.
• Tài sản in và PDF. Nhúng SVG trong PDF (qua các công cụ web-to-PDF như Puppeteer, wkhtmltopdf) có nghĩa là sự phồng SVG kết thúc trong PDF cuối cùng. Tối ưu hóa trước.
• SVG an toàn cho email. Nhiều khách hàng email (Outlook, một số ứng dụng Gmail) không kết xuất SVG; đối với những người làm (Apple Mail, Gmail web), SVG inline nhỏ hơn giữ email dưới ngưỡng cắt Gmail 102 KB.

Lỗi tối ưu hóa làm hỏng SVG

• Xóa các ID được tham chiếu. SVG thường sử dụng <defs> với các ID được tham chiếu qua url(#gradient-1) trong fill hoặc stroke. Xóa ID quá mức làm hỏng gradient, mặt nạ, đường cắt, bộ lọc. Sử dụng một công cụ theo dõi các tham chiếu, không phải regex mù.
• Xóa thuộc tính width/height một cách mù quáng. Bỏ tỷ lệ khung hình tự nhiên. Kết quả: <img src="icon.svg"> kéo dài để lấp đầy vùng chứa của nó mà không có kích thước nội tại, gây ra CLS (Cumulative Layout Shift). Giữ ít nhất viewBox; tốt nhất là giữ cả width/height.
• Giảm số thập phân quá mức. Giảm xuống 0 số thập phân trên các biểu tượng nhỏ làm cho các đường dẫn trông răng cưa rõ ràng. 3 số thập phân là mặc định an toàn; chỉ xuống 1 cho các biểu tượng lớn hơn 64×64 hoặc nơi không cần độ chính xác pixel.
• Xóa xmlns khi nhúng. Các tệp SVG độc lập cần xmlns="http://www.w3.org/2000/svg". SVG inline trong HTML không cần (trình phân tích HTML5 xử lý), nhưng nếu bạn có thể trích xuất SVG thành một tệp sau này, hãy giữ xmlns. Nhầm lẫn ở đây làm hỏng kết xuất SVG của Safari.
• Thay thế currentColor bằng fill được mã hóa cứng. fill="currentColor" là một hook CSS mạnh mẽ: biểu tượng kế thừa màu văn bản. Các trình tối ưu hóa quá mức thay thế nó bằng giá trị tính toán, phá vỡ chế độ tối và các hệ thống biểu tượng theo chủ đề.
• Hợp nhất các đường dẫn nên ở riêng biệt. Một số hoạt ảnh nhắm vào các ID đường dẫn cụ thể; một số công cụ trợ năng dựa vào nhiều phần tử <path> với văn bản <title> riêng lẻ. Plugin mergePaths phá hủy những điều này. Vô hiệu hóa nó cho các SVG hoạt ảnh hoặc có thể truy cập.
• Tước <title> và <desc> có thể truy cập. Các SVG được sử dụng làm hình ảnh độc lập hoặc trong các thẻ <img> cần <title> cho trình đọc màn hình (tương tự văn bản alt). Xóa siêu dữ liệu quá mức loại bỏ điều này. Hoặc giữ các tiêu đề, hoặc thêm aria-label trên phần tử SVG inline.

Thêm các câu hỏi thường gặp

Tối ưu hóa SVG thực sự có thể tiết kiệm bao nhiêu?

Nó phụ thuộc nhiều vào nguồn. Xuất khẩu Adobe Illustrator thường thu nhỏ 60-80% ở lần đầu tiên, chủ yếu từ siêu dữ liệu, namespace trình chỉnh sửa và giảm độ chính xác thập phân. Xuất khẩu Figma sạch hơn ngay từ đầu (thường tiết kiệm 20-40%). SVG được viết tay bởi một nhà phát triển? Thường 5-15%, vì không có nhiều để tước. Logo Wikipedia, trường hợp cực đoan của sự phồng Illustrator, từ 39 KB đến 11 KB. Một biểu tượng 24×24 điển hình từ Figma giảm từ 1,4 KB xuống 0,6 KB.

Khi nào tôi nên nhúng SVG so với sử dụng nó như một tệp bên ngoài?

Inline (<svg>...</svg> trong HTML) cho các biểu tượng nhỏ (dưới 2 KB), nội dung quan trọng phía trên gập, và bất cứ nơi nào bạn cần CSS để tạo kiểu SVG (ví dụ currentColor, trạng thái hover, chế độ tối). Tệp bên ngoài (<img src="icon.svg"> hoặc CSS background-image) cho các biểu tượng giống hệt nhau được sử dụng lặp đi lặp lại (trình duyệt lưu cache), hình minh họa lớn hơn, nội dung không cần chủ đề CSS. SVG sprite (tệp đơn với nhiều phần tử <symbol>, được tham chiếu bởi <use>) là mẫu hệ thống biểu tượng của 2014-2019, hiện được phần lớn thay thế bởi các thành phần inline-svg trong React/Vue/Svelte.

Có rủi ro bảo mật trong SVG không được tối ưu hóa không?

Có. SVG có thể nhúng các thẻ <script> và trình xử lý sự kiện onload, onclick; SVG do người dùng tải lên là một vector XSS. SVG có thể tham chiếu các tài nguyên bên ngoài qua <image href="...">, làm rò rỉ IP của người xem. Phông SVG (đã ngừng hoạt động nhưng vẫn có thể phân tích cú pháp) có lịch sử tràn bộ đệm. Một trình tối ưu hóa tốt tước <script> và các trình xử lý sự kiện như một phần của việc dọn dẹp; nếu bạn chấp nhận các tải lên SVG của người dùng, hãy chạy chúng qua một trình làm sạch được cứng hóa (DOMPurify với hồ sơ SVG) trước khi phục vụ.

Tôi có thể tối ưu hóa SVG bằng cách sử dụng dòng lệnh không?

Có. npx svgo input.svg -o output.svg sử dụng thư viện SVGO chính tắc. Cấu hình plugin qua svgo.config.js. Tích hợp CI: imagemin-svgo trong webpack, vite-plugin-svgo, GitHub Action antfu/svg-opt. Để tối ưu hóa hàng loạt: svgo -f ./icons -o ./icons-optimised. Công cụ trình duyệt ở đây nhanh hơn cho các trường hợp một lần và hoạt động mà không cần cài đặt Node.

SVG của tôi có được gửi đến máy chủ khi tôi tối ưu hóa ở đây không?

Không. Tối ưu hóa chạy hoàn toàn trong trình duyệt của bạn qua JavaScript trên markup SVG bạn dán. Mở tab Network trong DevTools khi tối ưu hóa; bạn sẽ thấy không có yêu cầu đi ra. An toàn cho logo độc quyền, thiết kế biểu tượng chưa phát hành, SVG doanh nghiệp nội bộ và bất cứ điều gì tuân theo NDA.

Công cụ liên quan