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.
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.
Visor SVG
Previsualiza SVG sobre cuadrícula, fondos claros u oscuros e inspecciona width, height y viewBox al instante.
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.