Cómo a Optimizar SVG Archivos

Reducir SVG archivo tamaño por removing metadata, unused elements, y redundant datos.

问题

Your SVG archivos contain unnecessary datos ese increases sus tamaño y slows página loads.

Requisitos previos

Understanding of SVG structure
Knowledge of XML optimization

Pasos

1. Remove unnecessary metadata

SVG editors (Illustrator, Inkscape) embed metadata: editor info, layer names, comments, and unused definitions. Remove these to reduce size. Also remove the XML declaration and DOCTYPE if not needed, and the inkscape/sodipodi namespaces.
entrada
```
SVG with metadata
```
输出
```
metadata removed
```
2. Simplify paths and shapes

Reduce path precision to fewer decimal places (typically 2-3 is sufficient for display). Convert shapes to paths where it reduces size. Merge overlapping paths. Remove invisible elements and unused gradients/filters. Round coordinates.
entrada
```
path: M 10.123456 20.789012 L...
```
输出
```
M 10.12 20.79 L...
```
3. Minify and validate

Remove whitespace between tags, collapse attributes, and shorten IDs. Validate the optimized SVG renders identically to the original. Tools like SVGO automate all these optimizations safely. Compare file sizes before and after.
entrada
```
optimized SVG
```
输出
```
size reduced ~50-70%
```

Resultado esperado

Un smaller SVG archivo ese renders identically a el original.

Errores comunes

Optimized SVG renders differently: Some optimizations (like removing gradients) change appearance. Use a conservative optimizer or disable specific plugins that cause issues.
IDs referenced by JavaScript are removed: Configure the optimizer to preserve IDs that are referenced by CSS or JavaScript. SVGO has a cleanupIDs plugin that can be configured with a preserve list.

Solución de problemas指引

If the SVG looks different after optimization, compare the original and optimized rendering.
Keep IDs used by animations or scripts. Configure the optimizer to preserve them.

Límites de seguridad

SVG can contain scripts and external references. Sanitize SVGs from untrusted sources before embedding.
All optimization is local.

Herramientas relacionadas

Optimizador SVG

Optimize SVG by removing comments, metadata, redundant attributes, and whitespace. Shows before/after size comparison. Gratis, privado y 100% del lado del cliente.

Compresor de imágenes

Compress images locally using Canvas. Adjust quality and dimensions, export as JPEG/PNG/WebP. Shows before/after size comparison. Gratis, privado y 100% del lado del cliente.

Términos relacionados

Un path SVG describe el contorno de un gráfico vectorial mediante una cadena de comandos en el atributo d (M/L/C/Z, etc.); es el elemento de forma SVG más potente.

参考链接

SVGO — SVG Optimizer