Tối ưu file SVG: năm tùy chọn dọn dẹp, phần giảm được nhiều nhất và những chỗ dễ làm hỏng hình
Công cụ nhận mã SVG bạn dán vào, bỏ chú thích, khối siêu dữ liệu, dòng khai báo XML và các thuộc tính rỗng, rồi ép mã về một dòng. Kết quả hiện ở ô bên phải kèm số ký tự trước và sau cùng phần trăm giảm, bạn chép ngay hoặc tải về thành tệp SVG.
Tính năng nổi bật
- Năm tùy chọn bật tắt riêng: bỏ chú thích, bỏ siêu dữ liệu, bỏ thuộc tính rỗng, ép một dòng và bỏ khai báo XML
- Ô dán mã bên trái và ô kết quả chỉ đọc bên phải, đặt cạnh nhau để đối chiếu
- Dòng thống kê ghi số ký tự trước, số ký tự sau và phần trăm giảm được
- Nút chép kết quả vào bộ nhớ tạm
- Nút tải kết quả về thành tệp SVG đặt tên optimized
- Bật tắt từng tùy chọn rồi chạy lại để so mức giảm giữa các cấu hình
- Không giới hạn số lần chạy và không cần đăng ký
- Xử lý bằng JavaScript ngay trên trình duyệt, mã bạn dán vào không gửi lên máy chủ
SVG xuất từ phần mềm đồ họa thường nặng gấp nhiều lần mức cần thiết
Một biểu tượng đơn giản vẽ trong phần mềm đồ họa vector khi lưu ra có thể nặng vài chục kilobyte, trong khi phần mã thật sự vẽ nên hình đó chỉ chiếm một phần nhỏ. Phần còn lại là những thứ phần mềm ghi thêm để phục vụ chính nó: khối siêu dữ liệu ghi tên chương trình và ngày tạo, các thuộc tính thuộc không gian tên riêng của trình vẽ dùng để nhớ lưới và điểm neo, tên lớp do người thiết kế đặt, chú thích giấy phép, cùng phần thụt lề và xuống dòng cho dễ đọc. Trình duyệt không cần bất cứ thứ nào trong số đó để vẽ hình. Với một website có ba bốn chục biểu tượng nhúng thẳng vào mã trang, phần thừa này cộng lại thành vài trăm kilobyte tải về mỗi lượt truy cập. Dọn nó đi là việc đáng làm, và với các biểu tượng đơn giản thì công cụ dán mã như thế này đủ dùng, không cần dựng cả một quy trình build.
Lợi ích khi sử dụng
- Bỏ được phần rác do phần mềm đồ họa ghi thêm chỉ trong một lần bấm
- Thấy ngay mức giảm bằng số ký tự và phần trăm
- Bật tắt từng tùy chọn để tìm cấu hình vừa gọn vừa an toàn cho hình của bạn
- Mã SVG không rời khỏi trình duyệt nên dùng được với thiết kế chưa công bố
- Tải thẳng ra tệp SVG, khỏi phải mở trình soạn thảo để lưu lại
Cách tối ưu một tệp SVG
- 1Mở tệp SVG bằng trình soạn thảo văn bản, chọn tất cả rồi dán toàn bộ mã vào ô bên trái.
- 2Xem lại năm ô tùy chọn ở khối phía trên, cả năm đều bật sẵn nên bạn chỉ cần tắt bớt nếu có lý do cụ thể.
- 3Bấm nút Tối ưu SVG và đọc dòng thống kê phía dưới ô kết quả để biết giảm được bao nhiêu.
- 4Kiểm tra bản kết quả bằng cách chép ra một tệp thử rồi mở bằng trình duyệt, đối chiếu với hình gốc.
- 5Bấm nút tải về hoặc nút chép để đưa mã đã tối ưu vào dự án, và luôn giữ lại tệp gốc để còn sửa sau này.
Năm tùy chọn làm chính xác việc gì
Tùy chọn bỏ chú thích xóa mọi khối nằm giữa cặp dấu mở và đóng chú thích của ngôn ngữ đánh dấu, thường là dòng ghi tên phần mềm hoặc dòng giấy phép mà trình vẽ tự chèn. Tùy chọn bỏ siêu dữ liệu xóa trọn thẻ metadata cùng nội dung bên trong, nơi phần mềm ghi thông tin tác giả và mô tả theo chuẩn mô tả tài nguyên. Tùy chọn bỏ khai báo XML xóa dòng đầu tiên mở bằng dấu hỏi, dòng này cần khi tệp được xử lý như tài liệu XML độc lập nhưng không cần khi mã được nhúng thẳng vào trang HTML. Tùy chọn bỏ thuộc tính rỗng xóa những cặp tên thuộc tính bằng hai dấu nháy liền nhau, lưu ý là chỉ nhận diện được tên viết hoàn toàn bằng chữ thường. Tùy chọn ép một dòng làm hai việc: dán liền các thẻ đang cách nhau bằng khoảng trắng, và gộp mọi chuỗi từ hai dấu cách trở lên thành một. Cả năm đều là phép thay thế theo mẫu ký tự, không phân tích cấu trúc tài liệu, nên chạy rất nhanh nhưng cũng không hiểu ngữ cảnh.
Phần rác mà công cụ này chưa dọn được
Sau khi chạy, hãy mở kết quả ra và tìm bốn thứ sau. Thứ nhất là các thuộc tính mang tiền tố của phần mềm vẽ, thường là tên chương trình rồi tới dấu hai chấm rồi tới tên thuộc tính, ghi lại lưới, tỷ lệ phóng và trạng thái cửa sổ lúc lưu; chúng nằm rải trong các thẻ và công cụ này không đụng tới. Thứ hai là khai báo không gian tên đi kèm những tiền tố đó, nằm ngay trên thẻ svg gốc và thường chiếm cả trăm ký tự. Thứ ba là các mã định danh tự sinh dạng chuỗi chữ số dài gắn cho từng lớp và từng đường, chỉ có ích khi bạn cần trỏ tới phần tử bằng CSS hoặc JavaScript, còn lại là thừa. Thứ tư là các nhóm lồng nhau nhiều tầng không mang phép biến đổi nào, dấu vết của việc gộp lớp trong lúc thiết kế. Muốn dọn sạch bốn nhóm này, bạn cần một công cụ phân tích cấu trúc tài liệu thật, phổ biến nhất là bộ tối ưu SVG chạy bằng dòng lệnh, hoặc dọn tay bằng chức năng tìm và thay thế trong trình soạn thảo.
Nơi giảm được nhiều nhất lại là số thập phân trong dữ liệu đường
Với các hình vẽ phức tạp, phần lớn dung lượng nằm trong thuộc tính chứa dữ liệu đường của thẻ path, tức chuỗi tọa độ dài dằng dặc. Phần mềm đồ họa thường ghi tọa độ với sáu chữ số sau dấu phẩy, ví dụ một cặp tọa độ chiếm khoảng mười tám ký tự. Nếu làm tròn về hai chữ số sau dấu phẩy, cặp đó chỉ còn khoảng tám ký tự, tức tiết kiệm hơn nửa cho mỗi điểm, mà với một hình có vài trăm điểm thì đây là khoản giảm lớn nhất trong toàn bộ tệp. Sai lệch hình học ở mức phần trăm của một pixel, mắt thường không phân biệt được, trừ khi hình được phóng to hàng chục lần. Công cụ này không làm việc đó vì nó không đọc hiểu dữ liệu đường, nó chỉ thao tác trên khoảng trắng và các khối văn bản. Vì vậy nếu bạn tối ưu một minh họa phức tạp mà mức giảm chỉ vài phần trăm, đó là dấu hiệu phần nặng nằm ở tọa độ chứ không ở khoảng trắng, và bạn nên chuyển sang công cụ có tùy chọn đặt độ chính xác số.
Ba chỗ mà việc ép một dòng có thể làm hỏng hình
Thứ nhất là chữ đặt trong thẻ text. Khoảng trắng giữa các từ ở đây là nội dung thật, và phép gộp khoảng trắng cùng phép dán liền các thẻ có thể làm mất dấu cách giữa hai đoạn chữ liền nhau, khiến hai từ dính vào nhau. Nếu hình của bạn có chữ, hãy tắt tùy chọn ép một dòng hoặc kiểm tra kỹ phần chữ sau khi chạy. Thứ hai là khối định kiểu nội tuyến đặt trong thẻ style: phép gộp khoảng trắng thường vô hại ở đây, nhưng nếu bên trong có chú thích kiểu CSS thì việc bỏ chú thích theo mẫu của ngôn ngữ đánh dấu không nhận ra, còn nếu có nội dung đặt trong khối dữ liệu ký tự thì kết quả khó đoán. Thứ ba là thuộc tính rỗng có tên viết hoa chữ cái giữa: mẫu nhận diện chỉ khớp tên toàn chữ thường nên những thuộc tính như khung nhìn hay chiều rộng nét vẽ viết theo kiểu chữ lạc đà sẽ không bị xóa dù đang rỗng, đây là điểm may vì thuộc tính khung nhìn mà mất thì hình không co giãn được nữa.
Tối ưu không đồng nghĩa với làm sạch về mặt an toàn
Đây là điều cần nói rõ vì nhiều người dùng nhầm hai việc. SVG không phải ảnh thông thường mà là một tài liệu đánh dấu, và nó có thể chứa thẻ kịch bản, các thuộc tính bắt sự kiện, hoặc liên kết ngoài trỏ tới tài nguyên bên thứ ba. Khi mã SVG được nhúng thẳng vào trang, những thứ đó chạy trong ngữ cảnh của chính website bạn. Công cụ này chỉ dọn khoảng trắng và siêu dữ liệu, nó không loại bỏ thẻ kịch bản, không gỡ thuộc tính bắt sự kiện, không chặn liên kết ngoài, nên tuyệt đối đừng coi việc chạy qua đây là bước kiểm tra an toàn. Nếu bạn nhận tệp SVG từ người dùng tải lên hoặc từ nguồn không kiểm soát, hãy dùng thư viện làm sạch tài liệu chuyên dụng trên máy chủ trước khi nhúng, hoặc an toàn hơn nữa là hiển thị qua thẻ ảnh thay vì nhúng nội tuyến, vì cách đó không cho kịch bản bên trong chạy. Sau khi tối ưu, một bước rất đáng làm nữa là bật nén khi truyền trên máy chủ, vì mã SVG là văn bản nên nén rất tốt.
Câu hỏi thường gặp (FAQ)
Vì sao mức giảm chỉ vài phần trăm dù hình rất phức tạp?
Vì phần nặng của hình phức tạp nằm ở chuỗi tọa độ trong thuộc tính dữ liệu đường, mà công cụ này không đọc hiểu và không làm tròn số. Nó chỉ dọn khoảng trắng, chú thích và siêu dữ liệu. Muốn giảm sâu, hãy dùng công cụ có tùy chọn đặt độ chính xác số thập phân.
Tối ưu xong hình bị mất chữ hoặc chữ dính vào nhau?
Nguyên nhân là tùy chọn ép một dòng gộp khoảng trắng, mà trong thẻ text thì khoảng trắng là nội dung thật. Hãy tắt tùy chọn đó rồi chạy lại, chấp nhận mức giảm thấp hơn. Với hình có chữ, tốt nhất là chuyển chữ thành đường trong phần mềm vẽ trước khi xuất.
Có nên bỏ dòng khai báo XML ở đầu tệp không?
Nếu bạn nhúng mã thẳng vào trang HTML thì nên bỏ, dòng đó không có tác dụng gì và chỉ tốn chỗ. Nếu tệp được dùng độc lập, chẳng hạn mở trực tiếp bằng phần mềm hoặc phục vụ như tài liệu XML, thì giữ lại cho đúng chuẩn. Trình duyệt hiện nay hiển thị được cả hai cách.
Vì sao vẫn còn các thuộc tính lạ có tiền tố tên phần mềm vẽ?
Vì công cụ không xử lý nhóm đó. Chúng là dữ liệu riêng của trình vẽ, ghi lưới và trạng thái cửa sổ, nằm rải trong các thẻ cùng phần khai báo không gian tên trên thẻ gốc. Bạn có thể xóa tay bằng chức năng tìm và thay thế, hoặc dùng công cụ tối ưu chạy bằng dòng lệnh.
Công cụ có kiểm tra mã SVG có hợp lệ không?
Không. Nó chỉ thay thế theo mẫu ký tự chứ không phân tích cấu trúc tài liệu, nên mã sai vẫn chạy qua và cho ra kết quả cũng sai. Hãy tự kiểm tra bằng cách lưu kết quả thành tệp rồi mở bằng trình duyệt, hình hiện đúng thì mới dùng.
Chạy công cụ này có làm SVG an toàn hơn không?
Không hề. Công cụ không loại bỏ thẻ kịch bản, không gỡ thuộc tính bắt sự kiện và không chặn liên kết ngoài. Với tệp nhận từ người dùng tải lên, hãy làm sạch bằng thư viện chuyên dụng trên máy chủ, hoặc hiển thị qua thẻ ảnh thay vì nhúng nội tuyến để kịch bản bên trong không chạy được.
Thuộc tính khung nhìn có bị xóa nhầm không?
Không, vì mẫu nhận diện thuộc tính rỗng chỉ khớp tên viết toàn chữ thường, còn tên khung nhìn viết theo kiểu chữ lạc đà. Đây là điều may, bởi mất thuộc tính này thì hình không co giãn theo khung chứa nữa và sẽ hiển thị sai kích thước.
Có tải tệp SVG lên trực tiếp được không?
Không, công cụ chỉ nhận mã dán vào ô văn bản. Hãy mở tệp bằng trình soạn thảo văn bản như Notepad hoặc VS Code, chọn tất cả rồi chép sang. Cách này cũng có cái lợi là nội dung không bao giờ rời khỏi trình duyệt của bạn.
Sau khi tối ưu có cần bật nén trên máy chủ nữa không?
Rất nên. SVG là văn bản nên nén bằng gzip hoặc brotli cho mức giảm rất lớn khi truyền, thường còn lớn hơn phần bạn tiết kiệm được bằng việc dọn khoảng trắng. Hãy kiểm tra tiêu đề phản hồi của máy chủ xem tệp SVG có nằm trong danh sách được nén hay không.
Số hiển thị trong dòng thống kê có phải byte thật không?
Là số ký tự. Với mã SVG chỉ gồm ký tự Latin thì trùng với số byte, nhưng nếu bên trong có chữ tiếng Việt có dấu, mỗi chữ có dấu chiếm hai đến ba byte khi lưu theo UTF-8 mà ở đây vẫn đếm là một. Tệp thật sẽ lớn hơn con số hiển thị đôi chút.
Nên nhúng SVG vào trang hay dùng thẻ ảnh?
Nhúng nội tuyến cho phép đổi màu bằng CSS và tạo hoạt cảnh, nhưng làm tăng dung lượng trang và không được lưu vào bộ nhớ đệm riêng. Dùng thẻ ảnh thì tệp được lưu đệm và chia sẻ giữa nhiều trang, an toàn hơn, nhưng bạn mất khả năng can thiệp vào từng phần của hình.
Có khôi phục lại được bản trước khi tối ưu không?
Công cụ không lưu lịch sử, ô bên trái vẫn giữ mã bạn dán vào cho tới khi bạn xóa hoặc tải lại trang. Nguyên tắc an toàn là luôn giữ tệp gốc trong dự án và chỉ dùng bản tối ưu cho khâu xuất bản, vì bản đã ép một dòng gần như không thể sửa tay được nữa.
Từ khóa liên quan
- tối ưu file svg
- nén svg online
- svg optimizer online
- minify svg
- giảm dung lượng file svg
- xóa metadata trong svg
- svg xuất từ illustrator quá nặng
- svg từ figma tối ưu
- làm tròn tọa độ trong path svg
- svgo là gì
- nhúng svg vào html
- svg có chứa script không
- làm sạch svg an toàn
- thuộc tính viewbox svg
- gzip cho file svg
- icon svg cho website
- so sánh svg và png
- svg không hiển thị đúng kích thước
- công cụ nén svg miễn phí
- tối ưu icon vector cho web
