Optimizador y Compresor SVG

Minimizador visual de código SVG para eliminar declaraciones XML redundantes, metadatos de editores, redondear coordenadas flotantes y exportar componentes React JSX.

Tamaño Original
968 B
Tamaño Optimizado
523 B
Ahorro
-46% (445 B)
Elementos DOM
6
Código Fuente SVG
Loading Editor...

Reglas de Optimización

2 dp

Vista Previa en Vivo

SVG Live Preview
SVG
Loading Editor...

Continuar con

Continúe su flujo de trabajo con estos siguientes pasos
Trazador Vectorial SVG

Suba una imagen PNG/JPG/WebP ➔ Trace y simplifique rutas localmente ➔ Exporte un SVG editable

Convertidor de Archivos Base64

Arrastre imágenes o archivos ➔ Genera DataURL incrustada o cadenas Base64 en local

Herramientas Relacionadas

Estudio de Color

Estudio profesional de conversión de color y generación de paletas con soporte para HEX, RGB, HSL, HSV, CMYK, escala Tailwind 50-950, contraste WCAG 2.1 y armonías cromáticas.

Paleta de Color de Imagen

Extractor inteligente de colores dominantes y cuentagotas con lupa a nivel de píxel basado en el algoritmo de agrupamiento K-Means, con exportación a CSS, Tailwind y PNG.

Editor de Imágenes

Suba una imagen ➔ Recorte, gire, aplique filtros de color y dibuje anotaciones con pincel

Procesamiento local en memoria del cliente · Cero envío de datos

Guía de Uso

  • 1. Pegue el código XML de su SVG o arrastre un archivo .svg al área de trabajo.
  • 2. Active reglas de optimización (eliminar cabeceras XML, comentarios, metadatos y grupos vacíos) y ajuste la precisión flotante.
  • 3. Revise la vista previa vectorial, compruebe el ahorro de bytes y copie el código SVG, componente React JSX o descargue el archivo.

Ventajas Técnicas y Privacidad

  • 1. Limpia metadatos específicos de Figma, Illustrator, Inkscape y Sketch sin alterar la composición gráfica.
  • 2. La precisión de coordenadas ajustable (2-3 decimales) reduce el peso entre un 30% y 50% conservando nitidez en pantallas Retina.
  • 3. Procesamiento local mediante DOM del navegador; sus gráficos vectoriales y logotipos nunca se envían a la nube.

Preguntas Frecuentes FAQ

Q: ¿Por qué los archivos SVG exportados de Figma o Illustrator son tan pesados?
A: Las herramientas de diseño incluyen metadatos de capas, espacios de nombres XML de edición, coordenadas con excesivos decimales y etiquetas etiquetas g vacías que no se requieren en la web.
Q: ¿Deformará los trazos reducir la precisión de los decimales?
A: Mantener 2 o 3 decimales no produce ninguna diferencia perceptible a simple vista en resoluciones estándar y de alta densidad, pero acorta significativamente la cadena del atributo 'd'.
Q: ¿Puedo exportar el SVG directamente como componente de React?
A: Sí. Seleccione la pestaña React JSX para obtener código compatible con JSX con atributos en formato camelCase (como strokeWidth y fillRule).
Q: ¿Afecta la optimización a las animaciones CSS o degradados?
A: La limpieza segura preserva elementos clave como viewBox, clases, identificadores, etiquetas defs y etiquetas linearGradient, garantizando el funcionamiento de animaciones y estilos.