Herramientas SVG — Minificar, optimizar, convertir y validar
Nueve utilidades SVG en el navegador: minificación rápida, optimizar con SVGO, previsualización, export Data URI, embellecer, desminificar, conversión a JSX React, corrección de resize/viewBox y validación de accesibilidad.
- Minificar y optimizar SVG para entrega web.
- Convertir SVG a JSX, data URI o viewBox redimensionado.
- Previsualizar y validar SVG antes de publicar iconos.
Minificar SVG
Elimina comentarios, espacios y elementos metadata del SVG — una minificación ligera en el navegador, no una reescritura de paths ni de precisión.
Embellecer SVG
Formatea markup SVG para editar iconos e ilustraciones a mano sin perder la estructura.
Desminificar SVG
Desminifica paths y atributos SVG al auditar assets vectoriales.
Validar SVG
Comprueba la sintaxis SVG, la presencia de viewBox y pistas básicas de accesibilidad antes de publicar.
Visor SVG
Previsualiza SVG sobre cuadrícula, fondos claros u oscuros e inspecciona width, height y viewBox al instante.
Optimizar SVG
Ejecuta presets SVGO en local para comprimir exports SVG más allá de una minificación solo de espacios.
Redimensionar SVG
Corrige problemas de width, height y viewBox cuando el escalado responsive del SVG se comporta de forma extraña.
SVG a Data URI
Genera una data URI SVG compacta y un snippet CSS background-image listo para pegar.
SVG a JSX
Convierte markup SVG en bruto a un componente compatible con React, con atributos camelCase.
Guías
SVG y accesibilidad: validar title, desc y estructura sin romper la optimización
Iconos decorativos vs informativos: reglas WCAG, etiquetas title/desc y validación en línea sin romper la optimización SVG.
SVG → React: del archivo bruto al componente listo para usar
Convierte iconos SVG en componentes React/JSX, optimízalos con SVGO e intégralos con limpieza en tu design system.
Presets SVGO explicados: optimizar un SVG sin romper el render
¿Safe, default o aggressive? Elige el preset SVGO adecuado, optimiza tus SVG para prod y evita regresiones visuales.
Optimizar SVG para la web: SVGO, presets y buenas prácticas
Guía de optimización SVG: minificar vs presets SVGO (safe, default, aggressive), exports Figma, iconos 30–70 % más ligeros sin pérdida visual.