Visor SVG gratuito

Acerca del SVG

El SVG (Scalable Vector Graphics) es un formato XML para los gráficos vectoriales. A diferencia de los formatos matriciales (PNG, JPG), las imágenes SVG se adaptan perfectamente a cualquier tamaño sin pérdida de calidad. Son ligeras, accesibles y ampliamente compatibles con los navegadores modernos.

Preguntas frecuentes

¿Qué es el SVG?

El SVG (Scalable Vector Graphics) es un formato de gráficos 2D que usa curvas y trazos matemáticos en lugar de píxeles. Eso hace que los archivos SVG sean independientes de la resolución, permanecen nítidos a cualquier tamaño, desde pequeños iconos hasta vallas publicitarias.

¿Cuál es la diferencia entre SVG y PNG?

PNG es matricial (basado en píxeles) y tiene un tamaño fijo, ampliarlo provoca borrosidad. SVG es vectorial (basado en matemáticas) y se amplía infinitamente sin pérdida. SVG es ideal para logos, iconos e ilustraciones. PNG es mejor para fotos e imágenes complejas.

¿Puedo modificar el código SVG directamente?

Sí, el SVG es texto XML, así que puedes editarlo en cualquier editor de texto. Puedes cambiar colores, tamaños, posiciones y más modificando los atributos. Usa este visor para pegar tu código y ver los cambios al instante.

SVG ganó la guerra de formatos, dos veces

Antes de que existiera SVG, se presentaron al W3C dos formatos vectoriales rivales a principios de 1998. PGML (Precision Graphics Markup Language), presentado el 10 de abril de 1998 por Adobe, IBM, Netscape y Sun, se basaba en el modelo de imagen PostScript de Adobe. VML (Vector Markup Language), presentado el 13 de mayo de 1998 por Microsoft, Macromedia, Hewlett-Packard, Autodesk y Visio, usaba una sintaxis cercana a lo que Microsoft ya distribuía en Office 2000 e Internet Explorer 5. El W3C no eligió un ganador. En su lugar, formó un grupo de trabajo de SVG presidido por Chris Lilley para diseñar un único estándar que sustituyera a ambos. El primer borrador de trabajo público de SVG apareció el 11 de febrero de 1999.

SVG 1.0 se publicó como Recomendación del W3C el 4 de septiembre de 2001, con Jon Ferraiolo (Adobe) como editor y colaboradores de Adobe, IBM, Sun, Apple, Canon, Corel, Kodak, Macromedia, Microsoft, Netscape, Oracle, Sharp, Quark y Xerox, una de las coaliciones de fabricantes más amplias de cualquier especificación del W3C. SVG 1.1 le siguió el 14 de enero de 2003 y sigue siendo la base de facto de la web moderna; su Segunda Edición (16 de agosto de 2011) incorporó las erratas. SVG 1.1 dividió la especificación en módulos y definió tres perfiles (Full, Basic, Tiny). VML siguió distribuyéndose en IE 5 hasta el 9 y Microsoft Office lo usaba internamente, pero quedó obsoleto en IE 9 (marzo de 2011) en favor del SVG nativo y estaba prácticamente muerto en IE 11. SVG 2 es un borrador de trabajo del W3C desde 2016 sin fecha de Recomendación a la vista; los navegadores incorporan funciones poco a poco a medida que surge la demanda de interoperabilidad.

Qué hace a SVG genuinamente diferente

• Es solo XML. Un icono entero puede ser una sola línea: <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="currentColor"/></svg>. Como SVG es texto, se le pueden aplicar diffs y control de versiones (Git lo trata como código fuente), se puede generar en el servidor, lo indexan los motores de búsqueda (el texto dentro de <text> es rastreable), se comprime de forma eficiente (a gzip y brotli les encantan los tokens XML repetidos, reducción típica del 60-80 %) y se edita en cualquier editor de texto sin software especializado.
• Independencia de la resolución. Como los trazados de SVG se definen como curvas y coordenadas matemáticas, no como cuadrículas de píxeles, un SVG se renderiza de forma idéntica a cualquier nivel de zoom y a cualquier densidad de píxeles del dispositivo. No hay ningún recurso Retina «@2x» ni «@3x» que gestionar. Un único icono de 2 KB se escala desde un favicon de 16×16 hasta una ilustración principal de 400×400 sin ninguna pérdida de calidad.
• Tamaño de archivo minúsculo para el dibujo lineal. Un icono de un solo color típico de 24×24 ocupa ~200-500 bytes como SVG frente a 1-3 KB como PNG transparente. El logotipo plano de una empresa ocupa 1-5 KB como SVG frente a 15-50 KB como PNG. Un conjunto de iconos de 1000 símbolos ocupa ~50 KB como un único sprite SVG frente a 2-5 MB de sprites PNG multi-DPI.
• Insertado en línea en HTML y estilizable con CSS. Una vez que el SVG está en línea, cada elemento forma parte del DOM. El CSS puede dirigirse a él: .icon-stroke { stroke: currentColor; stroke-width: 2; }. La única propiedad currentColor es lo que hace funcionar los sistemas de iconos modernos: un icono hereda automáticamente el color del texto que lo rodea.
• Animable de tres formas distintas. Animación/transición de CSS (el enfoque moderno preferido), XML declarativo SMIL dentro del SVG (<animate>, <animateTransform>, <animateMotion>), o JavaScript mediante el DOM de SVG. SMIL todavía funciona hoy en Chrome, Firefox y Safari después de que Chrome revirtiera su plan de obsolescencia de 2015.
• Manipulable mediante programación. document.querySelector('#chart-bar-3').setAttribute('height', newValue). Esta es la base de D3.js, Vega, Plotly, Highcharts, ApexCharts y el resto del ecosistema de visualización de datos.
• Accesible por defecto. <title> aparece como información sobre herramientas al pasar el cursor. <desc> se expone a los lectores de pantalla. Los atributos ARIA (role="img", aria-label, aria-labelledby, aria-describedby) funcionan con normalidad. En comparación con un elemento <canvas> (una caja negra para la tecnología asistencial), SVG es totalmente accesible.

La compatibilidad de los navegadores es universal desde 2011

El SVG nativo llegó con Firefox 1.5 (noviembre de 2005), Opera 9 (junio de 2006), Safari 3.0 (junio de 2007), Chrome 1.0 (septiembre de 2008) y, por último, Internet Explorer 9 (marzo de 2011): que fue el punto de inflexión. Antes de IE 9, los sitios tenían que distribuir shims de conversión de VML o el complemento Adobe SVG Viewer para ser compatibles con IE 6-8. Safari de iOS tuvo SVG parcial desde su lanzamiento y compatibilidad completa desde iOS 5 (octubre de 2011); Android llegó con Honeycomb 3.0 (febrero de 2011) y ChromeWebView sustituyó al navegador de AOSP en torno a Android 4.4 (2013). El límite inferior práctico para SVG como imagen (<img src="x.svg">) es aproximadamente finales de 2011. Para 2026, ningún proyecto web realista necesita ser compatible con navegadores sin SVG completo.

SVG no es solo un formato de imagen: es un tipo de documento ejecutable

Esto es lo más importante que hay que entender sobre la seguridad de SVG. Un SVG malicioso puede incluir bloques <script>, controladores de eventos (onload, onclick, onmouseover) o enlaces <a xlink:href="javascript:...">. Cuando un SVG así se carga en un contexto activo (mediante <object>, <iframe>, la navegación del navegador a una URL .svg o mediante la inserción con innerHTML), el navegador ejecuta el script. Los sitios que permiten incrustar de esta forma los SVG subidos pueden sufrir ataques XSS por parte de quienes los suben.

La etiqueta <img> es la vía segura. Cuando el SVG se carga mediante <img src="x.svg"> o como una background-image de CSS, los navegadores ejecutan el SVG en un modo aislado con los scripts desactivados y sin obtención de recursos externos. Los scripts del interior no se ejecutan, las obtenciones externas se bloquean y el SVG no puede interactuar con la página principal. El CSS del interior del SVG se renderiza, pero todo lo que pudiera tener efectos secundarios está desactivado. Esta es la forma recomendada de usar SVG hoy en día.

Para la defensa del lado del servidor, OWASP recomienda sanear los SVG subidos con DOMPurify (DOMPurify.sanitize(svg, {USE_PROFILES: {svg: true}})), svg-sanitizer (PHP), sanitize-svg (Node) o Bleach (Python), eliminando <script>, <foreignObject> y todos los controladores on*, y rechazando los valores de xlink:href que empiecen por javascript: o data:. Establecer una Content-Security-Policy estricta en la página que muestra el SVG del usuario y servir los SVG descargados con Content-Disposition: attachment son medidas de precaución adicionales. Este visor es puramente del lado del cliente y el SVG nunca sale de tu dispositivo, pero si vas a incrustar SVG proporcionado por el usuario en un sitio público, sanéalo.

SVG frente a PNG frente a JPG frente a WebP frente a AVIF: cuándo usar cada uno

• Logotipo, icono, ilustración, diagrama, gráfico, infografía con texto: SVG. Se escala a cualquier tamaño, archivo minúsculo, se puede recolorear mediante CSS, el texto sigue siendo texto (seleccionable, traducible, indexable).
• Fotografía: JPG (o AVIF/WebP para las pilas modernas). La codificación vectorial de fotos sería enorme.
• Captura de pantalla: PNG (o WebP). El rasterizado sin pérdidas conserva una interfaz perfecta al píxel.
• Pegatina de interfaz animada: SVG (CSS o SMIL). Más pequeña y nítida que un GIF, más fluida que el vídeo para bucles cortos.

WebP (Google, 2010) y AVIF (AOMedia, 2019) son formatos rasterizados modernos que compiten con PNG y JPG, no con SVG: no son vectoriales. El modo de fallo de SVG son las fotografías y las imágenes de tono continuo: representar cada píxel como una primitiva vectorial infla el archivo mucho más allá de un JPEG. Para los casos de iconos y logotipos, SVG sigue siendo insuperable.

Optimizar tu SVG con SVGO

Un SVG típico exportado desde Adobe Illustrator, Sketch, Figma o Inkscape arrastra una sobrecarga enorme: metadatos específicos del editor (<sodipodi:namedview>, <inkscape:groupmode>), nombres de capa predeterminados y jerarquías de grupos, precisión excesiva en las coordenadas de trazado (d="M 12.000023 18.999991 ..."), atributos de estilo en línea que podrían ser clases CSS, bloques de comentarios que identifican el editor.

SVGO (SVG Optimizer), escrito originalmente por Kir Belevich en 2012, es la herramienta del sector. Es una herramienta de línea de comandos de Node.js con unos 50 complementos que se encargan de optimizaciones individuales: removeComments, removeMetadata, removeEditorsNSData, convertColors (que convierte rgb(255,0,0) en #f00), convertPathData (que colapsa los comandos de trazado y descarta la precisión redundante), mergePaths, cleanupNumericValues (que redondea a una precisión configurable, 3 decimales por defecto). La compresión típica es de archivos un 30-70 % más pequeños para los SVG creados a mano desde herramientas de diseño, y a veces alcanza el 80 % en las exportaciones de Inkscape por los pesados metadatos del editor. SVGOMG (svgomg.net) es la interfaz web de SVGO creada por Jake Archibald (Google) y la versión con interfaz gráfica más usada.

El panorama de las bibliotecas de iconos

Las bibliotecas de iconos SVG dominan la pila web moderna. Los grandes conjuntos que te encontrarás son Heroicons (Tailwind Labs, ~280 iconos, MIT), Lucide (una bifurcación de Feather, ~1400 iconos), Bootstrap Icons (~2000), Material Symbols (Google, ~3000 en varios pesos), Font Awesome 6 (~30.000 gratis + Pro), Phosphor Icons (~9000 en seis pesos) y Tabler Icons (~5200). El agregador Iconify aloja más de 200.000 iconos de código abierto de más de 150 conjuntos de iconos tras una única API; un desarrollador puede escribir <iconify-icon icon="mdi:home"></iconify-icon> y el framework obtiene bajo demanda solo el SVG de ese icono. El cambio de las fuentes de iconos (la era de Font Awesome 4 / Glyphicons) a los iconos SVG ocurrió en torno a 2017-2019, impulsado por la accesibilidad, la posibilidad de recolorear y la eliminación del FOUT (destello de texto sin estilo, cuando la fuente de iconos no se había cargado).

Más preguntas

¿Cuál es la diferencia entre viewBox y width/height?

viewBox="0 0 100 100" define el sistema de coordenadas de usuario interno del SVG: su lienzo «natural» es de 100×100 unidades, con independencia del tamaño en píxeles renderizado. width y height establecen el tamaño de visualización renderizado. Con ambos presentes, el SVG escala el viewBox para que encaje en la caja renderizada. preserveAspectRatio (por defecto xMidYMid meet) controla cómo gestiona el escalado los desajustes de relación de aspecto: meet conserva la relación y centra, none estira, slice recorta para rellenar. Establecer solo viewBox y dejar que CSS controle width y height es la práctica recomendada moderna para los sistemas de iconos.

¿Por qué mis iconos SVG se ven borrosos en las pantallas?

Casi siempre una de tres causas: (1) el SVG se está renderizando en un tamaño de píxeles fijo que no coincide con la relación de aspecto del viewBox, así que el navegador lo estira; (2) el SVG se exportó desde una herramienta de diseño con coordenadas subpíxel («M 12.5 7.5 L ...»), y el suavizado del navegador hace lo que puede con los bordes no enteros; o (3) se estableció preserveAspectRatio="none", que deja que el SVG se estire de forma arbitraria. Arréglalo asegurándote de que el contenedor renderizado coincida con la relación del viewBox, ajustando las coordenadas a enteros en las opciones de exportación de tu herramienta de diseño y evitando preserveAspectRatio="none" a menos que quieras específicamente el estiramiento.

¿Puedo usar SVG como favicon?

Sí. <link rel="icon" type="image/svg+xml" href="icon.svg"> es compatible con Chrome 80+, Firefox 41+ y Safari 14+. Un patrón habitual es distribuir un favicon SVG para los navegadores modernos y una alternativa ICO (<link rel="icon" sizes="any" href="favicon.ico">) para los clientes más antiguos. Los favicon SVG también pueden usar consultas de medios prefers-color-scheme dentro del SVG para cambiar automáticamente entre las variantes de tema claro y oscuro.

¿Es el atributo d de trazado realmente un minilenguaje?

Sí, y aprender la docena aproximada de comandos es lo más parecido que hay a aprender a leer SVG a mano. Los comandos son: M/m (mover a, absoluto/relativo), L/l (línea hasta), H/h (línea horizontal), V/v (línea vertical), C/c (Bézier cúbica con dos puntos de control), S/s (cúbica suave, refleja el punto de control anterior), Q/q (Bézier cuadrática), T/t (cuadrática suave), A/a (arco elíptico, el más complejo) y Z/z (cerrar trazado). Un d de icono típico como M5 12h14M12 5l7 7-7 7 es «mover a (5,12), línea horizontal de 14 unidades, mover a (12,5), línea 7 a la derecha 7 abajo, línea 7 a la izquierda 7 abajo», es decir, una flecha que apunta a la derecha.

Herramientas relacionadas