Visor y minificador de SVG

¿Qué es un visor y minificador de SVG?#

SVG es el formato de elección para iconos, logos y arte lineal en la web: se mantiene nítido a cualquier tamaño y es editable como texto. Pero los archivos SVG exportados por herramientas de diseño llevan mucha basura: espacios de nombres de Inkscape y Sodipodi, bloques <metadata>, comentarios de autoría y espacios en blanco entre cada etiqueta. Ese lastre infla el archivo y da dolor de cabeza a cualquiera que lea el código fuente. Un minificador de SVG elimina lo que no afecta al renderizado e informa de cuánto ahorró.

Esta página es a la vez un visor y un minificador. Pega el código SVG a la izquierda, ve cómo se renderiza a la derecha, cambia a Minificar para ejecutar una pasada de limpieza de autoría propia que elimina comentarios, metadatos, espacios de nombres de editor y espacios en blanco entre elementos, y lee el ahorro en bytes. La vista previa se renderiza a través de un data URI de imagen, de modo que cualquier script incrustado en el SVG nunca se ejecuta: puedes inspeccionar con seguridad un archivo que no es de confianza.

Cómo se usa#

1. Pega tu SVG en el panel Entrada de la izquierda o haz clic en Ejemplo para cargar un pequeño ejemplo.
2. El panel Salida y la vista previa se actualizan de inmediato. Por defecto la barra de herramientas está en Minificar, así que la salida es el SVG limpio y más pequeño.
3. Cambia a Original si quieres que la salida muestre el código fuente original sin tocar (útil para compararlo con la versión minificada).
4. Lee el panel de estadísticas bajo los paneles:
   • Antes / Después / Ahorrado — el tamaño UTF-8 de la entrada frente a la salida y el porcentaje ahorrado.
   • Resumen de eliminados — cuántos comentarios, bloques de metadatos, elementos de editor, atributos de editor y nodos de espacios en blanco se eliminaron.
   • ViewBox — la geometría width / height / viewBox leída del <svg> raíz, para que confirmes el tamaño del lienzo de un vistazo.
5. Usa Copiar o Descargar en el panel de salida para llevarte el SVG minificado. Usa Limpiar para vaciar ambos paneles.

Características clave#

• Un minificador real, escrito desde cero: no es svgo. svgo es la herramienta Node estándar, pero depende de fs y path de Node y no se ejecuta limpiamente en un navegador. Esta página envía su propio recorrido del árbol, así que funciona sin dependencias del lado del servidor.
• Cinco categorías de basura eliminadas. Comentarios, bloques <metadata>, elementos y atributos de espacios de nombres de Inkscape/Sodipodi y espacios en blanco entre elementos; cada uno contado y reportado.
• Manejo de espacios en blanco consciente del texto. Los espacios en blanco dentro de <text>, <tspan>, <title>, <desc>, <style> y <script> se preservan, así que las etiquetas y el CSS incrustado sobreviven a la pasada.
• Vista previa segura. El render usa un <img> con un data URI, que el navegador trata como una imagen que no ejecuta nada: los scripts incrustados en el SVG no se ejecutan. Puedes pegar un archivo que no es de confianza sin riesgo.
• Contabilidad de bytes honesta. Los tamaños se miden en bytes UTF-8 (no en recuento de caracteres), así que un archivo con texto CJK o emoji informa de su tamaño real en el cable.
• 100 % local. El análisis y la serialización ocurren en tu navegador. El SVG nunca sale de la página.

Ejemplo práctico#

Una exportación típica de Inkscape podría abrirse con varias líneas de declaraciones de espacios de nombres de editor y un bloque <metadata> antes del arte real:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="24" height="24" viewBox="0 0 24 24">
  <metadata id="metadata8">
    <rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format></cc:Work></rdf:RDF>
  </metadata>
  <!-- a checkmark path drawn by hand -->
  <path inkscape:connector-curvature="0" d="M5 13l4 4L19 7" stroke="#000" stroke-width="2" fill="none"/>
</svg>

Pégalo, deja el modo en Minificar y la salida colapsa a:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke="#000" stroke-width="2" fill="none"/></svg>

El panel de estadísticas informa aproximadamente antes ~520 bytes, después ~210 bytes, ahorrado ~60 %, con el resumen de eliminados mostrando 1 comentario, 1 bloque de metadatos y 1 atributo de editor (inkscape:connector-curvature). El checkmark se renderiza idénticamente en la vista previa: nada que afectara al dibujo fue eliminado.

Preguntas frecuentes#

¿Esto ejecuta los scripts incrustados en el SVG?#

No. La vista previa se renderiza como <img src="data:image/svg+xml;base64,…">, y las imágenes cargadas a través de <img> son un contexto de no ejecución: el navegador no ejecutará ningún <script> dentro de ese SVG. Eso hace que la página sea segura para inspeccionar archivos SVG que no escribiste. La etiqueta <script> de origen se preserva en la salida minificada, sin embargo; si se ejecuta depende de cómo incrustes el SVG después.

¿Por qué no usar simplemente svgo?#

svgo es la herramienta adecuada en un pipeline de build de Node, pero depende de los módulos fs y path de Node y no se ejecuta limpiamente en una pestaña del navegador. El minificador de esta página es un recorrido de árbol autocontenido sin dependencias de Node, así que funciona totalmente del lado del cliente, a cambio de ser menos agresivo que las optimizaciones más profundas de svgo.

El ahorro es pequeño en mi archivo.#

Los archivos escritos a mano (sin espacios de nombres de editor, sin metadatos, sin comentarios) tienen poco que eliminar, así que el ahorro puede ser de solo unos pocos puntos porcentuales por los espacios en blanco. Las mayores ganancias vienen de exportaciones de herramientas de diseño (Inkscape, Illustrator), que es justo donde se origina la mayor parte de la basura.

¿La minificación cambia cómo se renderiza el SVG?#

No, para las categorías que esta herramienta elimina: comentarios, metadatos, espacios de nombres de editor y espacios en blanco entre elementos no tienen semántica de renderizado. Los espacios en blanco dentro de elementos textuales (<text>, <title>, <desc>, <style>, <script>) se preservan deliberadamente, porque ahí sí pueden ser relevantes.