Optimizador de SVG
Limpia y reduce archivos SVG eliminando metadatos del editor, comentarios y espacios en blanco redundantes, localmente en tu navegador.
Cargando Optimizador de SVG… Si no ocurre nada, activa JavaScript.
SVG, abreviatura de Scalable Vector Graphics (gráficos vectoriales escalables), es un formato basado en XML para gráficos bidimensionales que describe las formas como trazados matemáticos en lugar de una rejilla de píxeles. Como es texto, un SVG escala a cualquier tamaño sin volverse borroso, se comprime bien con gzip, puede estilizarse con CSS, animarse y editarse en un editor de texto plano. El inconveniente es que los archivos SVG exportados por las herramientas de diseño rara vez son ligeros. Editores como Inkscape, Illustrator y Sketch llenan su salida de espacios de nombres privados, historial de edición, comentarios del generador, metadatos del documento y una generosa sangría, todo lo cual el navegador ignora cuando renderiza la imagen, pero que aun así tiene que descargar y analizar.
Preguntas frecuentes
¿Se envía mi SVG a un servidor?
¿Qué elimina exactamente el optimizador?
¿Optimizar cambiará el aspecto de mi imagen?
¿Debería conservar el elemento title?
¿Por qué los archivos de Inkscape e Illustrator son mucho más grandes de lo necesario?
¿Cuánto más pequeño quedará mi archivo?
¿Esto también minifica o reescribe los datos de los trazados?
¿Puedo pegar código SVG en lugar de subir un archivo?
Acerca de Optimizador de SVG
Este optimizador elimina esa basura. Analiza tu SVG con el propio DOMParser del navegador, que entiende la estructura XML correctamente en lugar de recortarla con frágiles expresiones regulares, y luego recorre el árbol y elimina los nodos de comentario, los elementos metadata y desc, los elementos title opcionales, y los elementos y atributos específicos del editor como los espacios de nombres inkscape y sodipodi. Borra la declaración XML y cualquier doctype, y opcionalmente colapsa los espacios en blanco redundantes entre etiquetas. El árbol limpio se serializa de vuelta a SVG válido con XMLSerializer, así que el resultado sigue siendo un documento bien formado que puedes colocar directamente en una página web o en un sistema de iconos.
Puedes pegar el marcado directamente en el editor o subir un archivo .svg, y la herramienta muestra el tamaño original en bytes, el tamaño optimizado en bytes y el porcentaje ahorrado en tiempo real a medida que activas las opciones. La salida aparece en un segundo panel lista para copiar a tu portapapeles o descargar como un archivo nuevo. Para las exportaciones de editor habituales, el ahorro es sustancial, a menudo entre el treinta y el setenta por ciento, sin ningún cambio visible en la imagen renderizada porque solo se eliminan datos que no se renderizan.
Todo se ejecuta enteramente en tu navegador. El SVG nunca sale de tu dispositivo, no hay subida, ni servidor, ni cuenta, así que la herramienta es segura para iconos propietarios, recursos de marca y diagramas confidenciales. También sigue funcionando sin conexión una vez cargada la página. El optimizador es deliberadamente conservador: elimina datos que no afectan al renderizado en lugar de reescribir la geometría de los trazados o redondear coordenadas, lo que significa que la salida visual se preserva exactamente mientras el archivo se hace considerablemente más pequeño.
Cómo el SVG ganó la guerra de los formatos vectoriales
El SVG no fue el único aspirante a los gráficos vectoriales en la web. A finales de la década de 1990, Microsoft y otros respaldaron VML, el Vector Markup Language (lenguaje de marcado vectorial), mientras que Adobe y Sun impulsaban PGML, el Precision Graphics Markup Language (lenguaje de marcado de gráficos de precisión). El World Wide Web Consortium tomó ambas propuestas, convocó un grupo de trabajo y fusionó las mejores ideas en un único estándar abierto. SVG 1.0 se convirtió en una Recomendación del W3C en septiembre de 2001, pero la adopción fue lenta porque Internet Explorer, entonces el navegador dominante, solo admitía VML y requería un complemento para SVG.
El punto de inflexión llegó con los otros navegadores. Firefox, Safari y más tarde Chrome incorporaron el renderizado nativo de SVG a lo largo de la década de 2000, y cuando Internet Explorer 9 finalmente añadió soporte nativo en 2011 el formato tenía alcance universal. El auge de las pantallas Retina de alta densidad por esa misma época hizo que el SVG se volviera de pronto esencial: un único icono vectorial se mantiene nítido como una cuchilla en cualquier densidad de píxeles, mientras que los iconos de mapa de bits necesitan múltiples exportaciones y aun así se ven borrosos en pantallas para las que no fueron creados. Las fuentes de iconos tuvieron un breve momento, pero los iconos SVG demostraron ser más accesibles y más flexibles y los reemplazaron en gran medida.
Como el SVG es solo texto XML, heredó tanto las fortalezas como el exceso del instrumental XML. Las aplicaciones de diseño tratan el archivo como un documento de proyecto y lo rellenan con sus propios datos privados, que es por lo que un icono que se renderiza con unos pocos cientos de bytes de datos de trazado esenciales puede entregarse como varios kilobytes de metadatos del editor. Optimizar los SVG se ha convertido por tanto en un paso de compilación estándar en los flujos de trabajo de front-end modernos, y hacerlo de forma segura, analizando el árbol del documento real en lugar de adivinar con reemplazo de texto, es lo que separa a un limpiador fiable de uno que ocasionalmente corrompe tu arte.