Làm theo ví dụ đã thực hiện này, sau đó điều chỉnh các điều khiển tương tự cho hình ảnh của riêng bạn. Mở Trình nén SVG.
Tải lên SVG tĩnh hoặc dán mã đánh dấu
Mở Trình nén SVG và chọn tệp SVG hoặc Thử một mẫu. Mẫu là svg-compressor.svg, một biểu tượng quỹ đạo 985 byte với viewBox 512 × 512, tô màu gradient, tiêu đề và mô tả. Sử dụng Dán SVG khi mã đánh dấu đã có trong trình chỉnh sửa hoặc khay nhớ tạm.
Công cụ chấp nhận tối đa 20 tệp với dung lượng 2 MB mỗi tệp. Nó phân tích cú pháp tài liệu SVG hoàn chỉnh và xóa các khai báo tài liệu SVG tiêu chuẩn mà không cần tải các tệp bên ngoài. XML bị lỗi, khai báo thực thể tùy chỉnh và các tập con tài liệu nội bộ sẽ bị từ chối. Các tệp rất phức tạp cũng có thể đạt đến giới hạn phần tử hoặc thời gian xử lý.
Quy trình này tạo ra tác phẩm nghệ thuật vector tĩnh. Các tập lệnh, trình xử lý sự kiện, tài nguyên bên ngoài, hoạt ảnh và hình ảnh raster nhúng sẽ bị xóa. Bản xem trước Gốc đã được làm sạch, vì vậy nó không nên được hiểu là bản hiển thị không hạn chế của mọi tính năng trong tệp nguồn.
Giữ một bản sao của SVG gốc. Một hình minh họa tương tác hoặc SVG chứa ảnh là một trường hợp sử dụng khác với biểu tượng vector tĩnh.
So sánh kết quả và đặt độ chính xác thập phân
Hai bảng xem trước hiển thị bản gốc đã được làm sạch và kết quả đã tối ưu hóa. Kích thước bên cạnh Gốc và Tối ưu hóa cùng tóm tắt byte so sánh tệp nguồn với đầu ra hoàn thiện. Nó báo cáo mức tăng khi việc tối ưu hóa làm cho một tệp cụ thể lớn hơn thay vì hứa hẹn giảm dung lượng mọi lúc.
Mở Cài đặt và đặt Độ chính xác thập phân thành 2 cho ví dụ. Độ chính xác nằm trong khoảng từ 1 đến 5 và bắt đầu ở 3. Các giá trị thấp hơn có thể đơn giản hóa hình học số nhưng có thể làm lệch các đường cong tinh tế, khoảng cách nhỏ hoặc các cạnh được căn chỉnh. Hãy tăng giá trị này khi bản xem trước làm mất các chi tiết quan trọng.
Mẫu này sử dụng hình học đơn giản, vì vậy độ chính xác 2 giữ được hình dạng dễ nhận biết của nó. Các tệp SVG khác với tọa độ thập phân phức tạp có thể thay đổi nhiều hơn. Xem mã đánh dấu SVG đã tối ưu hóa sẽ hiển thị văn bản thực tế sẽ được tải xuống; đó không phải là một biểu diễn riêng biệt của bản gốc.
Kiểm tra vector ở kích thước hiển thị dự kiến và ở chế độ xem lớn hơn. Một sự thay đổi tinh tế có thể khó nhìn thấy trong hình thu nhỏ.
Ví dụ trong hướng dẫn này
Thử một mẫu: svg-compressor.svg, 985 byte, 512 × 512 viewBox. Độ chính xác thập phân 2; đã bật giữ lại tiêu đề/mô tả có thể truy cập và rút gọn ID nội bộ; đã tắt kích thước phản hồi và mã đánh dấu đầu ra dễ đọc. SVG đã tải xuống: 635 byte.
- Nguồn SVG
- 985 byte
- SVG đã tối ưu hóa
- 635 byte
- Mức giảm đo được
- 35.5%
- Ngữ cảnh được bảo toàn
- Tiêu đề, mô tả và viewBox 512 × 512
Bảo toàn mô tả và xem xét các ID bên ngoài
Để bật Giữ tiêu đề và mô tả có thể truy cập cho ví dụ đã thực hiện. Điều này giữ lại tiêu đề và mô tả SVG trong khi xóa siêu dữ liệu trình chỉnh sửa dư thừa và đơn giản hóa mã đánh dấu đủ điều kiện. Đây là các loại thông tin khác nhau và không nên được coi là có thể thay thế cho nhau.
Rút ngắn ID nội bộ được bật theo mặc định. Trình tối ưu hóa cập nhật các tham chiếu trong SVG, nhưng CSS bên ngoài hoặc JavaScript vẫn có thể dựa vào các ID gốc. Tắt tùy chọn này khi tệp là một phần của ứng dụng lớn hơn đặt tên cho các phần tử của nó và kiểm tra SVG đã hoàn thiện trong ngữ cảnh đó.
Để tắt Kích thước phản hồi và Mã đánh dấu đầu ra dễ đọc cho ví dụ. Kích thước phản hồi xóa chiều rộng và chiều cao cố định khi viewBox tọa độ có thể cung cấp kích thước có thể mở rộng. Đầu ra dễ đọc thêm thụt lề và hữu ích cho việc bảo trì, nhưng có thể làm tăng kích thước văn bản.
Đối với tệp biểu tượng độc lập, việc dọn dẹp ID nội bộ thường rất đơn giản. Đối với sơ đồ được viết kịch bản bên ngoài, việc bảo toàn các định danh có thể quan trọng hơn một vài byte được tiết kiệm.
Tải xuống và xác minh vector đã hoàn thiện
Chọn Bắt đầu, sau đó Tải xuống. Đầu ra đã thực hiện là 635 byte so với nguồn 985 byte: mức giảm 35.5%. Tiêu đề và mô tả của nó vẫn còn, và bản so sánh được hiển thị được kết xuất từ nguồn chính hãng và SVG đã tải xuống.
Bài viết hiển thị cả hai vector ở 1,024 pixel để minh họa rõ nét kết quả; kích thước tọa độ logic của chúng vẫn là 512 × 512. Bản xem trước lớn hơn không thêm nội dung raster vào SVG đã lưu. Xem lại vector thực tế trong trang đích của bạn trước khi thay thế tài sản sản xuất hiện có.
Một tệp tải xuống dưới dạng SVG với tên cơ sở gốc của nó. Một lô tải xuống dưới dạng một tệp ZIP, với các hậu tố được đánh số cho các tên tệp trùng lặp. Quá trình xử lý diễn ra trong trình duyệt. Giữ lại nguồn gốc nếu bạn muốn thử các cài đặt tối ưu hóa khác nhau sau này.
Mức tiết kiệm dung lượng tệp chỉ được đo lường dựa trên mẫu này. Một tệp SVG đã được tối ưu hóa có thể cho thấy rất ít cải thiện hoặc trở nên lớn hơn một chút.
Câu hỏi thường gặp
SVG đã tối ưu hóa có trông hoàn toàn giống bản gốc không?
Trình tối ưu hóa nhằm mục đích bảo toàn hình thức tĩnh, nhưng việc làm tròn và loại bỏ nội dung không được hỗ trợ có thể làm thay đổi tệp. Hãy so sánh các bản xem trước và kiểm tra SVG đã lưu trong dự án của bạn.
Độ chính xác thập phân thay đổi điều gì?
Nó kiểm soát độ chính xác được sử dụng cho dữ liệu hình học và đường dẫn số. Các giá trị thấp hơn có thể giảm kích thước nhưng có thể làm lệch các chi tiết nhỏ. Mặc định là 3.
Nó có giữ lại tiêu đề và mô tả không?
Có, theo mặc định. Hãy để tùy chọn Giữ lại các tiêu đề và mô tả có thể truy cập được ở trạng thái bật để bảo toàn các phần tử SVG đó.
Tại sao các tập lệnh hoặc hình ảnh raster bị thiếu?
Công cụ này tạo ra đầu ra vector tĩnh. Các tập lệnh, sự kiện, tài nguyên bên ngoài, hoạt ảnh và hình ảnh raster nhúng sẽ bị xóa có chủ đích trong quá trình làm sạch.
Tôi có thể giữ lại các ID được tham chiếu bởi CSS không?
Tắt tùy chọn Rút ngắn ID nội bộ khi mã bên ngoài phụ thuộc vào các ID cụ thể. Hãy xác minh tệp đã tối ưu hóa trong trang đích trước khi thay thế tệp gốc.
Các tệp SVG có được tải lên để tối ưu hóa không?
Không. Công cụ thực hiện phân tích và tối ưu hóa ngay trong trình duyệt và tải kết quả xuống cục bộ.
Tôi có thể tải lên một SVG có DOCTYPE không?
Một khai báo tài liệu SVG tiêu chuẩn được chấp nhận và sẽ bị xóa mà không cần tìm nạp định danh bên ngoài của nó. Các khai báo thực thể tùy chỉnh và tập hợp con tài liệu nội bộ sẽ bị từ chối.
Làm cho vector nhẹ hơn, với kết quả mà bạn có thể kiểm tra.
Thử một mẫu hoặc sử dụng tệp của riêng bạn, và xem lại kết quả trước khi chia sẻ.
