Tối ưu file SVG: giảm 23–61% dung lượng file Illustrator, Inkscape
Mục lục
Cách tối ưu file SVG bằng công cụ Tối ưu SVG của ColorME: tải file lên, so sánh Bản gốc với Đã tối ưu, chọn mức An toàn, Cân bằng hoặc Tối đa rồi tải về. Có số đo thật trên 7 file SVG từ Inkscape, Illustrator (nhẹ hơn 23–61% ở mức Cân bằng), mã trước và sau, cách dùng bốn lựa chọn trong Tuỳ chỉnh và các lỗi thường gặp.
Trả lời nhanh: để tối ưu file SVG, mở công cụ Tối ưu SVG của ColorME, bấm Tải file SVG lên (hoặc dán mã SVG), xem hai khung Bản gốc và Đã tối ưu rồi bấm Tải SVG. Mình thử 7 file SVG thật, ở mức mặc định Cân bằng file nhẹ đi 23–61%, và mình không nhìn ra khác biệt nào giữa hai hình.
Video 48 giây: mở một icon, đổi qua An toàn, Tối đa, mở Tuỳ chỉnh, kéo số chữ số thập phân, sao chép mã, tải về, rồi mở tiếp một bộ icon nặng 323 KB. Quay màn hình: ColorME.
Vì sao file SVG xuất từ phần mềm thiết kế lại nặng?
SVG là một file văn bản mô tả hình bằng mã (bạn có thể đọc thêm ở bài SVG là gì, tại sao nên dùng SVG). Khi lưu, phần mềm thiết kế thường ghi kèm nhiều thứ trình duyệt không cần: chú thích, thông tin của trình soạn thảo, tên lớp, ID dài, toạ độ có sáu bảy chữ số thập phân. Trang công cụ viết: “Làm gọn file SVG từ Illustrator, Figma, giảm dung lượng mà hình vẫn giữ nguyên, chạy ngay trên máy bạn.”
Đây là phần đầu file icon mình thử, đúng như lúc tải về:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="512mm"
height="512mm"
viewBox="0 0 512 512"
version="1.1"
id="svg5"
inkscape:version="1.1 (c68e22c387, 2021-05-23)"
sodipodi:docname="dessin-6.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
inkscape:zoom="0.20993242"
inkscape:window-width="1280"
...Và đây là phần đầu của chính file đó sau khi qua công cụ ở mức Cân bằng:
<svg xmlns="http://www.w3.org/2000/svg" width="512mm" height="512mm" viewBox="0 0 512 512"><circle cx="32" cy="32" r="32" class="st0" style="fill:#76c2af;fill-opacity:1" transform="translate(1.62 1.62)scale(7.96439)"/><path d="M195.33 139.1c22.13-35.89 44.26-71.78 64.91-72.03 ...Dòng khai báo XML, chú thích, khối sodipodi:namedview (cỡ cửa sổ, mức zoom của người vẽ) đều biến mất, toạ độ còn hai chữ số thập phân, cả file nằm trên một dòng. Kết quả: 7.2 KB còn 2.8 KB.
Bảy file SVG mình dùng để thử
Mình lấy file thật trên Wikimedia Commons, đều theo giấy phép CC0, và dùng nguyên trạng. Cột “Phần mềm” chỉ ghi điều chính file đó tự khai trong mã, mình không đoán.
| File (tên mình đặt lại) | Phần mềm ghi trong file | Tác giả trên Commons |
|---|---|---|
| icon-tranh-tao.svg | Inkscape 1.1 | Manjiro91 |
| hoa-sen.svg | Inkscape 0.92.2 | Bhargav Chowdhury |
| phong-canh-nui.svg | Không ghi | Missaruthra |
| cay-hoa-ve-tay.svg | “Generator: Adobe Illustrator 13.0.2, SVG Export Plug-In” | johnny_automatic |
| khinh-khi-cau.svg | Không ghi | Designism |
| bo-icon-mua-thu.svg | Có không gian tên Inkscape và một khối mở rộng của Adobe Illustrator | Openclipart |
| cuu-nui.svg | Inkscape 0.91 | j4p4n |
Mình không có file nào tự ghi là xuất từ Figma, nên bài này chưa kiểm chứng được con số cho file Figma. Mình cũng chưa thử file SVG có ảnh bitmap nhúng bên trong.
Bước 1: mở công cụ và tải file SVG lên
Vào colorme.vn/tools/svg-optimizer. Mình làm toàn bộ bài này khi chưa đăng nhập. Phần hỏi đáp của trang ghi: “Công cụ tối ưu SVG của ColorME miễn phí, không cần đăng nhập và không giới hạn số file.”
Màn hình đầu: nút Tải file SVG lên, vùng thả file và ô dán mã.
Có ba cách đưa hình vào: bấm Tải file SVG lên, thả file .svg vào khung nét đứt, hoặc dán mã vào ô “Hoặc dán mã SVG vào đây”. Mình thử cách bấm nút và cách dán mã (dán xong là công cụ chạy luôn). Cách kéo thả mình chưa thử.
Chọn file xong là có kết quả ngay, không có nút “bắt đầu”.
Bước 2: đọc kết quả và so sánh hai hình
Dòng trên cùng báo phần trăm giảm và dung lượng trước, sau. Bên dưới là hai khung Bản gốc và Đã tối ưu đặt cạnh nhau, dưới nữa là mã SVG mới.
hoa-sen.svg ở mức Cân bằng: 11.4 KB còn 5.9 KB. Hình: Bhargav Chowdhury, CC0, Wikimedia Commons.
Số đo của cả bảy file, đúng như công cụ hiển thị:
| File | Bản gốc | An toàn | Cân bằng | Tối đa |
|---|---|---|---|---|
| icon-tranh-tao | 7.2 KB | 3.5 KB (−51%) | 2.8 KB (−61%) | 1.9 KB (−74%) |
| hoa-sen | 11.4 KB | 6.1 KB (−46%) | 5.9 KB (−48%) | 4.1 KB (−64%) |
| phong-canh-nui | 11.1 KB | 7.4 KB (−33%) | 7.2 KB (−35%) | 7.0 KB (−37%) |
| cay-hoa-ve-tay | 116.2 KB | 95.7 KB (−18%) | 76.8 KB (−34%) | 57.3 KB (−51%) |
| khinh-khi-cau | 108.0 KB | 97.8 KB (−9%) | 82.8 KB (−23%) | 61.3 KB (−43%) |
| bo-icon-mua-thu | 323.0 KB | 211.8 KB (−34%) | 189.1 KB (−41%) | 168.3 KB (−48%) |
| cuu-nui | 2.56 MB | chưa thử | 1.38 MB (−46%) | chưa thử |
Phần hỏi đáp của trang công cụ ghi: “Với các file ColorME đã thử, mức Cân bằng giảm khoảng 20–60%, An toàn 10–50% và Tối đa 35–75%.” Với bảy file của mình, mức Cân bằng cho 23–61%, mức Tối đa cho 37–74% (sáu file). Hai file vẽ bằng Inkscape còn nguyên thông tin trình soạn thảo giảm nhiều nhất, file đã khá gọn sẵn như phong-canh-nui chỉ giảm khoảng một phần ba.
Hàng trên là file gốc, hàng dưới là file .min.svg mình tải về từ công cụ, mở lại trong trình duyệt. Hình: Manjiro91, Bhargav Chowdhury, Missaruthra, johnny_automatic, đều CC0, Wikimedia Commons.
Để khỏi tin vào mắt, mình vẽ hai bản lên cùng một khung rộng 840 px rồi đếm số điểm ảnh lệch màu rõ. Ở mức Cân bằng, sáu file đo được đều lệch dưới 0,5% số điểm ảnh, toàn nằm ở mép nét (file lệch nhiều nhất là cây hoa vẽ tay, 0,42%). Riêng bo-icon-mua-thu trình duyệt không cho đo kiểu này nên mình chỉ so bằng mắt.
Icon vẽ bằng Inkscape: giảm 61%. Hình: Manjiro91, CC0, Wikimedia Commons.
Tranh phong cảnh có dải màu chuyển: giảm 35%. Hình: Missaruthra, CC0, Wikimedia Commons.
Bộ chín icon nhiều dải màu: 323.0 KB còn 189.1 KB. Hình: Openclipart, CC0, Wikimedia Commons.
Bước 3: chọn mức An toàn, Cân bằng hay Tối đa
Trang giải thích ba mức như sau: “An toàn gần như không đổi hình, Cân bằng là mức mặc định của SVGO phù hợp đa số file, Tối đa làm tròn mạnh để file nhẹ nhất nhưng nên kiểm tra lại hình.”
Bấm qua ba mức, con số đổi ngay.
Điều mình thấy khi bấm: mỗi mức tự đặt lại thanh Số chữ số thập phân (An toàn 3, Cân bằng 2, Tối đa 1). Tối đa không chỉ làm tròn: với hoa-sen, Cân bằng kéo về 1 chữ số thập phân còn 5.6 KB, trong khi Tối đa còn 4.1 KB, và trong mã các kiểu style="stop-color:…" được viết lại thành thuộc tính ngắn hơn.
File có dòng “Generator: Adobe Illustrator 13.0.2” ở mức Tối đa: giảm 51%. Ở cỡ này mình không thấy khác, nhưng phép đếm điểm ảnh báo lệch 2,4%, nhiều gấp gần sáu lần mức Cân bằng. Hình: johnny_automatic, CC0, Wikimedia Commons.
Gợi ý của mình: cứ để Cân bằng. Với hình nét mảnh, nhiều chi tiết nhỏ mà sẽ in hoặc phóng to, chọn An toàn (lệch gần như bằng 0 trong phép đo của mình). Tối đa hợp với icon nhỏ, và nhớ nhìn lại hình trước khi tải.
Bước 4: mở Tuỳ chỉnh, bốn lựa chọn làm gì?
Bấm Tuỳ chỉnh để mở bốn lựa chọn. Mình thử từng cái:
- Số chữ số thập phân (0 đến 5): càng ít số lẻ file càng nhẹ, hình càng dễ lệch. Với hoa-sen: 5 số lẻ còn 6.6 KB, 3 còn 6.1 KB, 2 còn 5.9 KB, 1 còn 5.6 KB, 0 còn 3.8 KB. Với cây hoa vẽ tay: 3 số lẻ còn 95.7 KB, 2 còn 76.8 KB, 1 còn 57.3 KB, 0 còn 20.4 KB (giảm 82%) nhưng nét lệch thấy rõ.
- Bỏ width/height (co giãn theo khung): với hoa-sen, thẻ mở từ
width="383.91" height="301.47"đổi thànhviewBox="0 0 383.91 301.47". Dung lượng gần như không đổi (6.031 byte thành 6.028 byte). - Giữ ID (dùng cho CSS / animation): tắt thì ID được rút thành a, d, e…; bật thì giữ tên gốc như
linearGradient4782. Hoa-sen tăng từ 5.9 KB lên 6.6 KB khi bật. - Gộp các path cùng kiểu (mặc định bật): với cây hoa vẽ tay, bật thì mã còn 4 thẻ path, tắt thì giữ 76 thẻ như file gốc và file nặng hơn (80.9 KB so với 76.8 KB). Với hoa-sen, bật hay tắt cho cùng kết quả.
Kéo thanh số chữ số thập phân và bật từng công tắc.
Để 0 chữ số thập phân: file còn 3.8 KB nhưng các chấm đen trên nhuỵ sen biến mất. Đây là lý do nên nhìn hai khung trước khi tải.
Bật Bỏ width/height: dòng đầu của mã chỉ còn viewBox.
Trang công cụ khuyên: “Bật Giữ ID khi SVG được điều khiển bằng CSS hoặc JavaScript, hoặc dùng cho animation”. Mình chỉ xác nhận được là ID giữ nguyên tên, chưa thử trên file có hiệu ứng thật.
Bước 5: tải SVG về hoặc sao chép mã
Bấm Tải SVG, file về máy với tên gốc thêm đuôi .min.svg, ví dụ hoa-sen.min.svg (nếu bạn dán mã thì tên là vector.min.svg). Bấm Sao chép mã để dán thẳng vào HTML, trang báo “Đã sao chép mã SVG”.
Thông báo sau khi bấm Sao chép mã.
Công cụ xử lý từng file một (ô chọn file chỉ nhận một file mỗi lần). Bấm File khác để mở file tiếp theo; mình thấy mức đang chọn được giữ lại (đang ở Tối đa thì file sau cũng chạy Tối đa).
File SVG rất nặng thì sao?
File nặng nhất mình có là cuu-nui.svg, 2.56 MB. Ở mức Cân bằng công cụ trả kết quả trong chưa tới 2 giây trên máy bàn của mình: còn 1.38 MB, giảm 46%. Mình chưa thử file nặng hơn, và trang không ghi giới hạn dung lượng.
File 2.56 MB còn 1.38 MB. Hình: j4p4n, CC0, Wikimedia Commons.
Các thông báo lỗi mình gặp
- Chọn một file PNG: “Hãy chọn file .svg (ảnh vector).”
- Một file văn bản đổi đuôi thành .svg, hoặc dán chữ không có mã SVG: “Không tìm thấy thẻ <svg> trong nội dung này.”
- Một file SVG bị cắt cụt giữa chừng: “File SVG này bị lỗi hoặc bị cắt cụt nên không tối ưu được. Hãy xuất lại file từ phần mềm thiết kế rồi thử lại.” Sau câu đó là chi tiết kỹ thuật trong ngoặc, với file của mình là “<input>:165:13: Unclosed root tag”, nghĩa là thẻ gốc chưa được đóng ở dòng 165. Hai khung xem trước để trống và nút Tải SVG bị khoá.
Chọn nhầm file không phải SVG.
File SVG hỏng: có báo lỗi, không tải được.
Nếu ảnh của bạn là PNG hay JPG và bạn cần SVG, hãy chuyển trước bằng công cụ chuyển ảnh sang vector SVG. Còn nếu bạn đang làm nhẹ cả trang web thì sau SVG, hãy xem tiếp cách chuyển font TTF, OTF sang WOFF2.
Dùng trên điện thoại được không?
Mình xem ở bề ngang 390 px (giả lập trong trình duyệt máy tính, chưa cầm điện thoại thật). Thanh công cụ xuống hai hàng, hai khung Bản gốc và Đã tối ưu xếp chồng lên nhau, trang không bị trượt ngang.
Bề ngang 390 px: hai khung xếp dọc.
File SVG có bị tải lên máy chủ không?
Mình chép nguyên câu trả lời trong phần hỏi đáp của trang công cụ: “Không. File được tối ưu ngay trên trình duyệt bằng SVGO, không gửi lên máy chủ. Nếu bạn đã đăng nhập, file bạn tải về được lưu riêng vào mục Lịch sử của bạn và tự xoá sau 180 ngày.” Mình không đăng nhập nên chưa xem mục Lịch sử, và mình không tự kiểm chứng gì thêm ngoài câu trích này.
Câu hỏi thường gặp
Tối ưu SVG có làm vỡ hình không?
Ở An toàn và Cân bằng, mình không thấy file nào trong bảy file đổi hình. Hình bắt đầu hỏng khi mình tự kéo số chữ số thập phân về 0. Công cụ luôn đặt hai bản cạnh nhau, và chính dòng kết quả cũng nhắc: “nếu hình khác đi hãy chọn "An toàn"”.
Nên để mấy chữ số thập phân?
Trang công cụ viết: “Mức 2 đến 3 chữ số thập phân thường đủ chính xác cho icon và logo”. Số đo của mình khớp với câu này: xuống 1 thì phép đếm điểm ảnh thấy nét mảnh lệch nhiều hơn hẳn, xuống 0 thì mất chi tiết nhỏ.
File SVG tối ưu xong có sửa lại trong Illustrator, Inkscape được không?
Mình chưa mở lại file .min.svg trong phần mềm thiết kế nên không khẳng định. Điều chắc chắn là thông tin của trình soạn thảo, tên lớp và ID gốc đã bị bỏ, vì vậy hãy giữ file gốc để chỉnh sửa và chỉ dùng bản tối ưu để đưa lên web.
