Loading…

Giới thiệu Công cụ Làm đẹp & Thu nhỏ SVG Trực tuyến

Đang làm việc với các tập tin SVG lộn xộn hoặc quá khổ? Dán mã của bạn hoặc tải lên tập tin `.svg`, chọn **Định dạng** để làm đẹp hoặc **Thu nhỏ** để giảm kích thước, và ngay lập tức nhận được mã SVG sạch sẽ, tối ưu hóa. Hoàn hảo cho nhà thiết kế, nhà phát triển front-end và bất kỳ ai cần tối ưu hóa vector nhanh chóng, an toàn. 🚀

Tính năng Chính của Công cụ Định dạng SVG của Chúng tôi

  • **Chế độ làm đẹp** với thụt lề thông minh, ngắt dòng và căn chỉnh thuộc tính
  • **Chế độ thu nhỏ** loại bỏ khoảng trắng, chú thích và siêu dữ liệu dư thừa
  • Định dạng kiểu Prettier và tối ưu hóa kiểu SVGO bên dưới
  • Có thể cấu hình kiểu thụt lề (khoảng trắng hoặc tab) và kích thước thụt lề
  • Cột ngắt tùy chọn để giữ các đường dẫn và thuộc tính dài gọn gàng
  • Phong cách kết thúc dòng nhất quán (LF / CRLF) cho các diff sạch sẽ trên mọi hệ điều hành
  • Kéo thả tệp `.svg` lên đến 5 MB hoặc dán mã SVG nội tuyến
  • Xử lý 100% phía máy khách — tác phẩm của bạn không bao giờ rời khỏi trình duyệt
  • Sao chép hoặc tải xuống một cú nhấp chuột với đầu ra được định dạng (`.formatted.svg`) hoặc thu nhỏ (`.min.svg`)
  • Giao diện người dùng đáp ứng hoạt động tốt trên máy tính xách tay, máy tính để bàn và máy tính bảng

🔧 Cách Định dạng hoặc Thu nhỏ SVG: Hướng dẫn Nhanh for svg-formatter

1

1. Dán hoặc Tải lên SVG

📥 Kéo thả tệp `.svg` của bạn hoặc dán mã SVG thô vào trình chỉnh sửa. Công cụ tự động phát hiện nội dung `image/svg+xml` tiêu chuẩn.

2

2. Chọn Định dạng hoặc Thu nhỏ

✨ Chọn **Định dạng** để có mã dễ đọc (tuyệt vời cho việc xem xét và kiểm soát phiên bản) hoặc **Thu nhỏ** để có kích thước tệp nhỏ nhất có thể.

3

3. Điều chỉnh Tùy chọn Định dạng

⚙️ Điều chỉnh **Kiểu Thụt lề** (khoảng trắng hoặc tab), **Kích thước Thụt lề** và tùy chọn **Ngắt dòng / Độ dài Dòng**. Những cái này ánh xạ trực tiếp đến các cài đặt định dạng cơ bản.

4

4. Xem trước & Xuất

👀 Kiểm tra mã SVG đã tối ưu hóa, thử nghiệm nhanh trong dự án của bạn, sau đó sao chép vào clipboard hoặc tải kết quả dưới dạng tệp `.svg` mới.

Chi tiết Kỹ thuật

Công cụ Làm đẹp (Chế độ Định dạng)

Chế độ định dạng sử dụng một công cụ kiểu Prettier được điều chỉnh cho mã XML SVG. Nó tập trung vào khả năng đọc và các diff ổn định, dự đoán được.

Khía cạnhHành viGhi chú
Kiểu Thụt lềKhoảng trắng hoặc TabCó thể cấu hình qua **Kiểu Thụt lề** (ánh xạ tới `indentStyle`).
Kích thước Thụt lề1–8 khoảng trắngĐiều khiển chiều rộng lồng nhau khi sử dụng khoảng trắng (ánh xạ tới `indentSize`).
Ngắt dòng / Độ dài Dòng0–120 cột`0` tắt ngắt dòng; ngược lại, các dòng dài được ngắt quanh cột đã chọn (ánh xạ tới `wrapLineLength`).
Kết thúc DòngLF (`\n`) hoặc CRLF (`\r\n`)Giữ kết thúc dòng nhất quán trên mọi hệ điều hành (ánh xạ tới `endOfLine`).
Ngôn ngữ đầu raSVG kiểu XMLDuy trì cấu trúc XML tương thích SVG để nhúng an toàn.

Quy trình Thu nhỏ (Chế độ Minify)

Chế độ Minify sử dụng quy trình lấy cảm hứng từ SVGO tập trung vào giảm kích thước trong khi bảo toàn đầu ra hình ảnh.

BướcMô tảTác động
Loại bỏ chú thíchGỡ bỏ các nút chú thích `<!-- ... -->` không ảnh hưởng đến hiển thị.Tệp nhỏ hơn, khác biệt sạch hơn.
Giảm khoảng trắng thừaThu gọn các khoảng trắng, tab và ngắt dòng không cần thiết.Hiệu quả lớn với SVG xuất từ trình chỉnh sửa chi tiết.
Cắt bỏ siêu dữ liệuTùy chọn loại bỏ các nút siêu dữ liệu không hiển thị khi an toàn.Tốt cho tài sản sản xuất công khai.
Chuẩn hóa thuộc tínhĐơn giản hóa và sắp xếp lại thuộc tính một cách ổn định.Đầu ra gọn hơn, khả năng lưu đệm tốt hơn.

Mã hóa & Tương thích

Đầu ra là SVG UTF-8 tương thích với trình duyệt và công cụ hiện đại, tuân thủ đặc tả SVG 2.

Hiệu suất & Giới hạn (Trình duyệt Máy tính Điển hình)

Loại tệpKích thước đầu vàoThời gian Làm đẹpThời gian Thu nhỏGiảm kích thước Điển hình
Biểu tượng5 KB⚡ < 15 ms⚡ < 20 ms≈ 25–40%
Minh họa100 KB⚡ < 60 ms⚡ < 90 ms≈ 40–55%
Hình Ảnh Chính500 KB⏱️ < 300 ms⏱️ < 450 ms≈ 50–60%
Hiệu suất thực tế phụ thuộc vào CPU, trình duyệt và độ phức tạp của SVG.

Tùy Chọn CLI Cho Người Dùng Chuyên Nghiệp

Thích quy trình làm việc qua terminal hoặc tích hợp CI? Kết hợp Prettier và SVGO để có hành vi tương tự công cụ này:

Linux / 🍎 macOS

Làm đẹp SVG với Prettier

npx prettier --parser xml --print-width 80 --tab-width 2 --write input.svg

Áp dụng thụt lề và ngắt dòng nhất quán cho mã đánh dấu SVG của bạn.

Thu nhỏ SVG với SVGO

npx svgo input.svg -o input.min.svg

Loại bỏ nhận xét, siêu dữ liệu và khoảng trắng thừa để có tập tin nhỏ hơn.

Windows (PowerShell hoặc CMD)

Định dạng đẹp SVG bằng xmlstarlet (qua WSL hoặc bản địa)

xmlstarlet fo --indent-spaces 2 input.svg > pretty.svg

Định dạng SVG/XML với thụt lề 2 khoảng trắng.

Thu nhỏ SVG với SVGO (không cần cài đặt toàn cục)

npx svgo input.svg -o min.svg

Chạy SVGO trực tiếp qua `npx` để tối ưu hóa một lần.

Thêm Prettier + SVGO vào quá trình xây dựng hoặc hook pre-commit để nhà thiết kế có thể xuất SVG thô và đường ống của bạn giữ chúng được tối ưu hóa.

Ứng Dụng Thực Tiễn

Hiệu Suất Web & Gói Frontend

  • Giảm tải trọng SVG trong hệ thống thiết kế, bộ biểu tượng và bảng sprite.
  • Nhúng SVG đã thu nhỏ trong HTML/CSS để tiết kiệm yêu cầu HTTP bổ sung.
  • Cải thiện Core Web Vitals bằng cách thu nhỏ hình minh họa chính trên trang đích.
<img src="/assets/hero.min.svg" alt="Hình ảnh chính đã tối ưu" />
.icon-check { background-image: url('data:image/svg+xml;utf8,<svg ...>'); }

Bàn Giao Thiết Kế & Quản Lý Phiên Bản

  • Làm đẹp SVG đã xuất trước khi xem xét mã để làm khác biệt dễ đọc.
  • Giữ một `.formatted.svg` đẹp để cộng tác và một `.min.svg` cho sản xuất.
  • Áp dụng thụt lề và thứ tự thuộc tính nhất quán trên toàn hệ thống thiết kế.

Di Động, Email & Ứng Dụng Lai

  • Thu nhỏ SVG nhúng trong email HTML để chiến dịch nhẹ hơn.
  • Giảm kích thước gói ứng dụng trong React Native / Capacitor / Ionic khi gửi nhiều biểu tượng.
  • Tiết kiệm băng thông cho người dùng có kết nối chậm hoặc bị giới hạn.

❓ Frequently Asked Questions

❓Định dạng SVG là gì?

Định dạng (hoặc làm đẹp) cấu trúc lại mã đánh dấu SVG của bạn với thụt lề nhất quán, ngắt dòng và sắp xếp thuộc tính. Nó không thay đổi cách hình ảnh hiển thị, chỉ thay đổi cách mã trông và hoạt động khác biệt.

📏Việc thu nhỏ có làm thay đổi diện mạo SVG của tôi không?

Trong trường hợp bình thường, không. Thu nhỏ loại bỏ các chú thích, khoảng trắng dư thừa và siêu dữ liệu không hiển thị. Nó được thiết kế để bảo toàn kết quả hình ảnh trong khi giảm kích thước. Nếu bạn dựa vào siêu dữ liệu đặc biệt cho các công cụ chỉnh sửa, hãy giữ một bản sao lưu của tệp gốc.

🔒SVG của tôi có được tải lên máy chủ không?

Không bao giờ. Tất cả định dạng và thu nhỏ chạy hoàn toàn trong trình duyệt của bạn bằng JavaScript/WebAssembly. Các tệp SVG của bạn không được gửi đến bất kỳ máy chủ nào hoặc lưu trữ từ xa.

🚀Thu nhỏ có thể tiết kiệm bao nhiêu kích thước?

Tiết kiệm thực tế thường nằm trong khoảng **30% đến 70%**, tùy thuộc vào cách SVG được xuất và lượng siêu dữ liệu hoặc khoảng trắng nó chứa.

⚠️Việc loại bỏ `<metadata>` hoặc chú thích có thể phá vỡ quy trình làm việc của tôi không?

Đối với đồ họa web công khai, việc loại bỏ siêu dữ liệu và chú thích thường an toàn. Tuy nhiên, nếu công cụ thiết kế của bạn lưu trữ dữ liệu chỉnh sửa hoặc thông tin cấp phép trong các phần đó, hãy giữ một bản gốc, chưa thu nhỏ trong kiểm soát phiên bản để chỉnh sửa trong tương lai.

Pro Tips

Best Practice

Giữ một tệp `icon.formatted.svg` chưa thu nhỏ trong kho lưu trữ của bạn để có sự khác biệt sạch sẽ, sau đó tạo `icon.min.svg` như một phần của bước xây dựng.

Best Practice

Luôn bao gồm các phần tử `<title>` và `<desc>` có ý nghĩa trước khi thu nhỏ để giữ cho SVG của bạn có thể truy cập được với trình đọc màn hình.

Best Practice

Kết hợp thu nhỏ SVG với nén HTTP (Gzip/Brotli) để giảm thêm byte từ các minh họa và biểu đồ nặng.

Best Practice

Đối với bộ biểu tượng, hãy xem xét chiến lược sprite: thu nhỏ một lần, sau đó tham chiếu biểu tượng qua `<use>` thay vì sao chép mã SVG ở khắp mọi nơi.

Additional Resources

Đặc tả W3C SVG 2
Documentation
Tài liệu Web MDN: SVG
Documentation
SVGO (GitHub)
Documentation
Định dạng XML/SVG Prettier
Documentation

Other Tools