Optimizador de SVG
Suelta archivos aquí o haz clic para seleccionar
- Seguro
- El procesamiento se realiza en tu dispositivo, por lo que la entrada/salida no se envía a ningún lugar.
Explicación
Analyzes the SVG structure and removes unnecessary markup within the range that does not affect rendering. It expands styles, optimizes size declarations, reduces attributes, and simplifies numeric/path data to effectively reduce file size while maintaining visual quality.
What optimization does
| Styles | Expands CSS in <style> into per-element style attributes where possible. After expansion, it may convert them further into presentation attributes such as fill and stroke, and removes <style> elements that become empty and unnecessary. |
|---|---|
| Sizing | Removes width / height declarations in style as well as width / height attributes from the root <svg> element. viewBox, which is needed for responsive rendering, is preserved. |
| Attributes | Removes unnecessary attributes added by design tools such as Figma, Adobe XD, and Illustrator (e.g. data-name). id and class may also be removed when they are not referenced, or when element merging/conversion (e.g. <line> to <path>) makes them unnecessary. |
| References | Checks reference attributes such as filter, clip-path, and mask, and removes them when the referenced target does not exist. If a valid reference exists (and affects appearance), it is kept. |
| Numbers & paths | Automatically chooses the lightest rounding precision (floatPrecision) by comparing render results across candidates to minimize visual differences. It also simplifies path data such as the d attribute on <path>, removes unnecessary whitespace/redundancy, and applies multipass to iterate optimization for maximum size reduction. |
| Compatibility | To prevent rendering issues, viewBox is preserved. When an SVG contains <text> elements, xml:space (which controls whitespace handling) is preserved (it may be removed when there is no <text>). For SVGs with animations, some optimizations are suppressed to stay on the safe side. Complex CSS that is difficult to inline may also be kept to preserve the original appearance. |
Notes
Depending on the SVG structure and markup, the size reduction rate and final output can vary. For styles that are difficult to expand/inline automatically (e.g. complex selectors or media queries), the optimizer may keep them to preserve rendering.
When elements are merged or converted (e.g. converting <line> to <path>), id and class on the original elements may be removed if they become unnecessary due to structural changes.
Reference attributes such as filter, clip-path, and mask are automatically removed when their targets do not exist (e.g. broken url(#...) references) to keep the SVG consistent.
SVGs with animations (CSS animations or <animate> tags) can be optimized, but some optimizations are suppressed because animation behavior can break easily. If the SVG contains scripts (JS), optimization may lead to unexpected behavior.