35: Tối ưu hóa SVG với Công cụ - Thủ thuật CSS

Chúng tôi đã nói về việc tối ưu hóa SVG bằng tay. Đưa ra các lựa chọn theo cách thủ công về chi tiết và những loại thứ nào có thể được kết hợp hoặc loại bỏ. Trong video màn hình này, chúng ta sẽ xem xét việc tối ưu hóa SVG bằng các công cụ. Các công cụ có thể giảm kích thước tệp của SVG mà không (hy vọng) thay đổi giao diện của nó. Những thứ hoàn hảo cho tự động hóa. Giống:

Loại bỏ khoảng trắng
Giảm độ chính xác của các con số
Xóa phần mềm siêu dữ liệu

Công cụ phổ biến nhất cho điều đó là SVGO, một công cụ lệnh dựa trên nút để tối ưu hóa SVG theo cách này. Nó có phiên bản GUI, vì vậy bạn có thể chỉ cần kéo và thả cũng như những thứ như ImageOptim. (Trong video, chúng tôi cần cái này để giải nén nó.)

Chúng tôi cũng đã xem xét các công cụ tối ưu hóa SVG của Peter Collingridge, công cụ này rất gọn gàng ở chỗ bạn có thể chọn và chọn quy tắc nào bạn muốn áp dụng sau đó xem kết quả và kích thước tệp.

Tối ưu hóa bằng tay có thể phù hợp trong một số trường hợp khi bạn đang làm việc với một số lượng nhỏ tệp và đôi khi. Nhưng nếu bạn đang làm việc với SVG nhiều, giống như bạn đang xây dựng một hệ thống biểu tượng, có lẽ tốt nhất bạn nên kết hợp công cụ này vào hệ thống xây dựng.

Chúng tôi đã xem xét Grunt ở đây trước đây, vì vậy hãy tưởng tượng một hệ thống:

Tối ưu hóa SVG bất cứ khi nào tệp SVG được thêm vào hoặc thay đổi trong dự án của chúng tôi
Sau đó, xây dựng tất cả chúng lại với nhau thành một khối defs.svg

Bạn sẽ thực hiện việc tối ưu hóa trước tiên và tạo một thư mục chứa đầy những thứ đó (để chúng có thể được kiểm tra từng cái một nếu cần), sau đó xây dựng chúng lại với nhau. Đây là Gruntfile sẽ trông như thế nào khi sử dụng grunt-svgmin và grunt-svgstore:

module.exports = function(grunt) ( grunt.initConfig(( svgmin: ( options: ( plugins: ( ( removeViewBox: true ), ( removeUselessStrokeAndFill: false ) ) ), dist: ( files: (( expand: true, cwd: "svg/", src: ('*.svg'), dest: 'svgo/' )) ) ), svgstore: ( options: ( formatting : ( indent_size : 2 ) ), default: ( files: ( 'includes/defs.svg': ('svgo/*.svg'), ) ) ) )); grunt.loadNpmTasks('grunt-svgstore'); grunt.loadNpmTasks('grunt-svgmin'); grunt.registerTask('default', ('svgmin', 'svgstore')); );

Tôi sẽ thả hình ảnh SVG mà chúng tôi đã chơi cùng (từ Freepik) và một tệp zip của dự án Grunt dưới dạng tải xuống.