Tối ưu và nén file SVG
Công cụ tối ưu và nén file SVG online miễn phí của Tấn Phát Digital dành cho web developers và designers. Giảm dung lượng SVG 30-70% mà không mất chất lượng (vector graphics). Xóa comments, metadata, editor data không cần thiết. Minify SVG code - loại bỏ whitespace, newlines, indentation. Xóa empty attributes và unused definitions. Tối ưu path data với precision control. Round/rewrite numbers để giảm decimal places. Merge paths khi có thể. Preview trước và sau khi optimize. So sánh file size reduction. Copy optimized SVG hoặc download file. Xử lý 100% trên trình duyệt, không upload lên server. Hữu ích cho tối ưu icons, logos, illustrations cho website.
SVG (Scalable Vector Graphics) là format tuyệt vời cho icons, logos, và illustrations trên web vì scalable và sharp ở mọi kích thước. Tuy nhiên, SVG từ design tools (Illustrator, Figma, Sketch) thường chứa nhiều data không cần thiết: Editor metadata và comments. Unused definitions và styles. Excessive decimal precision (10 chữ số sau dấu phẩy). Empty groups và attributes. Hidden layers. Những data này có thể chiếm 30-70% file size mà không ảnh hưởng đến visual. Tối ưu SVG giúp: Giảm page weight - website load nhanh hơn. Cải thiện Core Web Vitals (LCP, FCP). Tiết kiệm bandwidth cho users. Tăng SEO ranking (Google ưu tiên fast sites). Inline SVG nhỏ hơn = HTML document nhỏ hơn. Với icons và logos xuất hiện trên mọi trang, việc tối ưu SVG có impact lớn đến overall performance.
Trước khi optimize: Export từ design tool với settings tối ưu (Figma: 'Outline text', Illustrator: 'Minify'). Flatten layers và merge shapes khi có thể. Remove hidden layers trong design tool. Khi optimize: Bắt đầu với aggressive settings, giảm nếu visual bị ảnh hưởng. Precision 2-3 decimal places thường đủ cho web. Giữ viewBox attribute để SVG scalable. Sau khi optimize: Test SVG ở nhiều sizes. Verify animations vẫn hoạt động (nếu có). Check accessibility (title, desc elements). Gzip SVG files trên server để giảm thêm 60-80%.
Inline SVG (trong HTML): Ưu điểm: Không HTTP request, có thể style với CSS, có thể animate với JS. Nhược điểm: Tăng HTML size, không cache riêng, duplicate nếu dùng nhiều lần. Tốt cho: Icons nhỏ, SVG cần interact. External SVG file: Ưu điểm: Cache riêng, HTML nhỏ hơn, reusable. Nhược điểm: Thêm HTTP request, khó style từ CSS. Tốt cho: Logos lớn, illustrations, SVG dùng nhiều trang. SVG Sprites: Combine nhiều icons vào 1 file, dùng <use> để reference. Best of both worlds cho icon systems. Dù inline hay external, luôn optimize SVG trước khi deploy.
KHÔNG. SVG là vector graphics - định nghĩa bằng math (paths, shapes), không phải pixels. Tối ưu chỉ loại bỏ data không cần thiết (comments, metadata, excessive precision) mà không thay đổi visual output. SVG vẫn sharp ở mọi kích thước sau khi optimize. Khác với JPEG/PNG compression có thể mất chất lượng.
Tùy thuộc vào SVG gốc: SVG từ Illustrator với nhiều metadata: 50-70% reduction. SVG từ Figma (đã khá clean): 20-40% reduction. SVG đã optimize trước đó: 5-15% reduction. Hand-coded SVG: 10-30% reduction. Kết hợp với Gzip trên server có thể giảm thêm 60-80% khi transfer.
Precision là số decimal places cho coordinates. Precision 2: Đủ cho hầu hết icons và logos web. Precision 3: Cho illustrations chi tiết. Precision 1: Cho icons rất đơn giản. Precision cao hơn (4+): Hiếm khi cần, chỉ cho CAD/technical drawings. Giảm precision từ 10 xuống 2 có thể giảm 20-30% file size.
KHÔNG BAO GIỜ remove viewBox. viewBox định nghĩa coordinate system của SVG, cho phép SVG scale properly. Không có viewBox, SVG sẽ có fixed size và không responsive. Luôn giữ viewBox, có thể remove width/height attributes nếu muốn SVG fill container.
Có thể. Một số optimizations có thể break animations: Remove IDs - animations reference elements by ID. Merge paths - animated paths cần riêng biệt. Remove groups - animations có thể target groups. Nếu SVG có animations, test kỹ sau khi optimize. Có thể cần disable một số options.
Illustrator thêm nhiều metadata: Adobe namespace, generator info, layer names, AI-specific data. Figma export cleaner hơn by default. Cả hai đều cần optimize, nhưng Illustrator SVGs thường giảm nhiều hơn (50-70% vs 20-40%). Trong Illustrator, dùng 'Export As' với 'Minify' option để có SVG cleaner.
Tool này xử lý từng file một. Để batch optimize: Dùng SVGO CLI: npx svgo -f ./input -o ./output. Dùng build tools: webpack với svgo-loader, gulp với gulp-svgo. Dùng Figma plugin: 'SVGO Compressor' optimize khi export. Dùng VS Code extension: 'SVG' extension có optimize command.
KHÔNG. Toàn bộ xử lý diễn ra 100% trên browser của bạn bằng JavaScript. SVG code không được gửi đi đâu cả. Bạn có thể verify bằng Network tab trong DevTools. An toàn để optimize SVG chứa proprietary designs hoặc client work.
Chúng tôi không chỉ thiết kế website, mà còn giúp doanh nghiệp xây dựng thương hiệu số mạnh mẽ. Cung cấp dịch vụ thiết kế website trọn gói từ thiết kế đến tối ưu SEO. Hãy liên hệ ngay với Tấn Phát Digital để cùng tạo nên những giải pháp công nghệ đột phá, hiệu quả và bền vững cho doanh nghiệp của bạn tại Hồ Chí Minh.
