Descubre cómo un archivo SVG describe formas, utiliza viewBox y se integra en una página web, con buenas prácticas de responsive, accesibilidad y seguridad.
Publicado el 31 de agosto de 2026Lectura : 30 minPor Equipo Bethemesh
Un logotipo PNG puede parecer perfectamente nítido a su tamaño original y después revelar sus píxeles cuando se amplía mucho. El mismo logotipo en SVG puede mantenerse nítido en un icono pequeño, una pantalla Retina o un cartel, porque no memoriza una cuadrícula fija de píxeles: describe las formas que deben dibujarse.
SVG significa Scalable Vector Graphics, o gráficos vectoriales escalables. En la Web, su particularidad es importante: SVG es a la vez un formato de imagen vectorial y un lenguaje de marcado basado en XML.
Esta doble naturaleza explica casi todo:
por qué un SVG puede redimensionarse sin pixelar sus formas;
por qué a veces sus colores pueden controlarse mediante CSS;
por qué puede contener texto, enlaces, degradados, máscaras o animaciones;
por qué un archivo SVG puede inspeccionarse y modificarse en un editor de texto;
por qué también hay que pensar en su accesibilidad y seguridad.
Sin embargo, SVG no es «mejor» que PNG, JPEG, WebP o AVIF. Responde a otro tipo de problema.
Para una fotografía, un formato raster moderno suele ser mucho más adecuado. Para un logotipo, un icono, un esquema, un gráfico o una ilustración geométrica, SVG puede ser, en cambio, la elección natural.
SVG en una frase
Una imagen raster dice esencialmente:
«este es el color de cada uno de mis píxeles».
Un SVG dice más bien:
«dibuja un círculo aquí, una curva allí, rellena esta forma con este color y aplica esta transformación».
Esta diferencia de representación explica por qué el vectorial puede volver a dibujarse a diferentes tamaños.
Raster y vectorial: dos maneras de representar una imagen
Una imagen raster está formada por una cuadrícula.
Una fotografía de:
1200 × 800 px
contiene:
960 000 píxeles
Cada píxel almacena información de color y, eventualmente, de transparencia.
Si ampliamos mucho esta imagen, el navegador debe interpolar píxeles adicionales. No descubre nuevos detalles: estima cómo rellenar el espacio.
Un dibujo vectorial funciona de otra manera.
Un círculo puede describirse mediante:
<circle cx="50" cy="50" r="40" />
El navegador conoce:
el centro;
el radio;
las propiedades gráficas.
Por tanto, puede recalcular la forma al tamaño necesario.
No es una imagen «infinitamente detallada». Es una descripción geométrica que puede rasterizarse a la resolución de visualización.
¿Por qué un SVG se mantiene nítido al ampliarlo?
Porque las formas vectoriales no dependen de una cuadrícula fija de píxeles de origen.
Cuando el navegador debe mostrar un círculo SVG más grande, no amplía una pequeña matriz existente. Vuelve a dibujar el círculo en la cuadrícula de píxeles de la pantalla.
Esto funciona especialmente bien para:
líneas;
curvas;
contornos;
formas geométricas;
tipografías convertidas o conservadas de forma adecuada;
logotipos;
pictogramas.
Pero atención: un SVG puede contener una imagen raster incrustada.
En ese caso, los elementos vectoriales siguen siendo escalables, pero la fotografía incrustada conserva sus propios límites de resolución.
Por tanto, la extensión .svg no garantiza que todo el contenido del archivo sea realmente vectorial.
¿Cuándo utilizar SVG?
SVG resulta especialmente adecuado para contenidos cuya estructura puede describirse con relativamente pocas formas.
Logotipos
Un logotipo geométrico suele tener que existir en muchos tamaños.
SVG evita mantener una multitud de PNG únicamente para conservar la nitidez.
Iconos
Los pictogramas suelen estar formados por unos pocos trazados.
También pueden utilizar currentColor cuando se integran directamente en el HTML.
Ilustraciones geométricas
Las formas, colores planos, degradados y curvas pueden ser muy eficaces en SVG.
Esquemas y diagramas
El vectorial se adapta de forma natural a líneas, flechas, bloques y etiquetas.
Gráficos de datos
Ejes, curvas, puntos y áreas pueden describirse como elementos vectoriales y, eventualmente, hacerse interactivos.
Patrones y decoraciones
Las formas repetitivas pueden definirse y reutilizarse.
¿Cuándo no utilizar SVG?
Una fotografía clásica rara vez es una buena candidata.
Imagina intentar describir cada detalle de un paisaje mediante:
trazados;
formas;
degradados;
máscaras.
El documento se volvería extremadamente complejo.
Para fotografías, JPEG, WebP o AVIF suelen ser más apropiados.
SVG también puede ser una mala elección cuando una ilustración vectorial es tan compleja que contiene decenas o cientos de miles de puntos. En ese caso, un raster correctamente dimensionado puede ser más ligero y menos costoso de renderizar.
¿SVG es un formato de imagen o código?
Ambas descripciones son útiles.
Un archivo SVG independiente es una imagen que puede cargarse así:
Es un documento XML que utiliza el vocabulario SVG.
Por tanto, podemos:
abrirlo como una imagen;
leer su marcado;
modificarlo;
generarlo mediante programación;
insertarlo directamente en HTML.
Esta naturaleza documental hace que SVG sea extremadamente potente, pero también explica por qué debe tratarse con más precauciones que una simple matriz de píxeles.
¿Qué aspecto tiene un SVG mínimo?
Este es un ejemplo independiente:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 80" role="img" aria-labelledby="logo-title"> <title id="logo-title">Disco azul en un marco redondeado</title> <rect width="120" height="80" rx="12" fill="#E8F0FF" /> <circle cx="60" cy="40" r="24" fill="#2457D6" /></svg>
Vamos a descomponerlo.
<svg>
Es el elemento raíz.
Delimita el documento o fragmento SVG.
xmlns
En un archivo SVG independiente, el espacio de nombres:
http://www.w3.org/2000/svg
identifica el vocabulario SVG.
viewBox
Define el sistema de coordenadas y el encuadre.
<title>
Puede participar en la alternativa accesible según el modo de integración.
<rect>
Dibuja un rectángulo.
<circle>
Dibuja un círculo.
Ya se entiende por qué SVG es interesante: el dibujo sigue siendo relativamente legible incluso sin software gráfico.
XML: ¿qué consecuencias prácticas tiene?
SVG utiliza sintaxis XML.
Esto implica, entre otras cosas, una estructura correctamente anidada.
Por ejemplo:
<g> <circle cx="20" cy="20" r="10" /></g>
Los elementos deben cerrarse correctamente.
Los atributos utilizan una sintaxis estructurada:
fill="#2457D6"
Una exportación desde un programa gráfico puede añadir:
espacios de nombres adicionales;
metadatos;
identificadores;
grupos;
estilos;
información propia del editor.
Parte de estos datos puede ser inútil para su distribución en la Web.
El sistema de coordenadas sigue siendo de 120 × 80, pero el tamaño propuesto es de 240 × 160.
El navegador realiza la correspondencia entre ambos.
¿Hay que eliminar width y height?
No sistemáticamente.
A veces se lee:
«Para hacer que un SVG sea responsive, elimina siempre width y height».
Es demasiado simplista.
Estas dimensiones pueden aportar información útil sobre el tamaño intrínseco y contribuir a un comportamiento previsible.
Lo esencial es disponer de un viewBox coherente y utilizar CSS cuando queramos adaptar el tamaño.
Por ejemplo:
.logo { width: 10rem; height: auto;}
El archivo puede conservar su viewBox y redimensionarse correctamente.
El optimizador SVG puede proponer eliminar determinadas dimensiones cuando existe un viewBox, pero esta transformación debe corresponder a tu contexto de integración.
preserveAspectRatio
¿Qué ocurre si la relación del viewBox y la de la zona de visualización son diferentes?
SVG utiliza preserveAspectRatio para determinar cómo adaptar el dibujo.
En el comportamiento habitual, las proporciones se conservan.
Esto puede producir espacios libres si el marco externo no tiene la misma relación.
Un valor como:
preserveAspectRatio="none"
permite estirar independientemente ambos ejes.
Un círculo puede convertirse entonces en una elipse.
Este comportamiento puede ser deseable para determinados efectos, pero rara vez para un logotipo.
Las formas básicas
SVG dispone de varias primitivas gráficas.
Rectángulo
<rect x="10" y="10" width="80" height="40" />
Círculo
<circle cx="50" cy="50" r="30" />
Elipse
<ellipse cx="60" cy="40" rx="50" ry="25" />
Línea
<line x1="10" y1="10" x2="90" y2="90" />
Polilínea
<polyline points="10,80 40,20 70,80" />
Polígono
<polygon points="10,80 40,20 70,80" />
Trazado
<path d="M 10 60 L 40 20 L 70 60 Z" />
Estas primitivas pueden combinarse, agruparse y transformarse.
¿Por qué <path> está por todas partes?
<path> puede describir formas extremadamente variadas.
Su atributo d contiene una secuencia de comandos.
Ejemplo:
<path d="M 10 60 L 40 20 L 70 60 Z" />
Puede leerse así:
M 10 60: mover el punto actual;
L 40 20: trazar una línea;
L 70 60: trazar otra línea;
Z: cerrar la forma.
Otros comandos permiten dibujar:
curvas de Bézier;
arcos;
segmentos horizontales;
segmentos verticales.
Los programas de creación producen muchísimos trazados porque pueden representar casi cualquier forma.
Coordenadas absolutas y relativas
En los trazados, los comandos en mayúsculas utilizan generalmente coordenadas absolutas.
Por ejemplo:
L 80 40
significa «ir hasta el punto 80,40».
Las variantes en minúsculas utilizan desplazamientos relativos.
Por ejemplo:
l 20 10
significa «avanzar 20 unidades horizontalmente y 10 verticalmente desde el punto actual».
Las coordenadas relativas pueden producir a veces un código más compacto.
Los optimizadores pueden transformar algunas representaciones si eso reduce el archivo sin modificar el dibujo.
Curvas de Bézier
Las curvas de Bézier son esenciales en el dibujo vectorial.
Permiten crear curvas suaves a partir de puntos de control.
No necesitas calcular manualmente las coordenadas para utilizar SVG: los programas gráficos lo hacen.
Pero comprender que existen explica por qué una curva puede describirse a veces con unos pocos puntos, mientras que una aproximación formada por cientos de pequeños segmentos sería mucho más pesada.
También explica por qué simplificar los trazados puede reducir considerablemente determinados SVG exportados.
Demasiados puntos: ¿por qué es un problema?
Un trazado procedente de una vectorización automática puede contener miles de puntos.
Esto aumenta:
el tamaño del archivo;
el coste de análisis;
la complejidad del DOM cuando está inline;
el trabajo de renderizado;
la dificultad de edición.
Dos trazados pueden parecer idénticos en pantalla aunque uno contenga diez veces más coordenadas.
Por tanto, la optimización vectorial no consiste únicamente en eliminar espacios. También puede buscar una representación geométrica más sencilla.
Pero cuando SVG se integra inline en una página grande, los identificadores pueden entrar en conflicto si varios archivos utilizan los mismos nombres genéricos, como:
gradientclip0mask0
Por tanto, un pipeline de generación debe evitar las colisiones o añadir prefijos a los identificadores cuando sea necesario.
Los grupos también sirven para aplicar una transformación común:
<g transform="translate(20 10)"> ...</g>
Los programas gráficos utilizan grupos de forma intensiva.
Pero una exportación puede producir muchos más de los necesarios.
Transformaciones
SVG puede transformar las coordenadas.
Traslación
translate(20 10)
desplaza el contenido.
Rotación
rotate(45)
lo hace girar.
Escala
scale(2)
duplica la escala.
Inclinación
También existen transformaciones skewX y skewY.
Pueden combinarse varias transformaciones.
Los optimizadores pueden a veces fusionar o simplificar estas operaciones, pero una modificación incorrecta puede desplazar el dibujo. El control visual sigue siendo indispensable.
Recorte y máscaras
SVG puede limitar la visibilidad de un contenido.
clipPath
Recorta siguiendo una forma.
mask
Controla la opacidad con mayor precisión.
Estos mecanismos permiten composiciones complejas sin convertir todo a píxeles.
Pero también aumentan la complejidad del documento.
Un logotipo sencillo exportado con numerosos grupos y máscaras puede merecer una limpieza.
Filtros SVG
SVG ofrece filtros capaces de crear:
desenfoques;
sombras;
modificaciones de color;
combinaciones de imágenes;
efectos más complejos.
Son potentes, pero pueden resultar costosos de renderizar.
Para un icono pequeño repetido cientos de veces, un filtro complejo puede ser menos apropiado que una solución CSS o una simplificación gráfica.
El objetivo no es evitar los filtros, sino utilizarlos cuando realmente aportan algo.
El texto en SVG
SVG dispone de un elemento <text>.
Puede resultar útil en:
gráficos;
diagramas;
anotaciones.
Pero el texto SVG plantea varias cuestiones:
fuente disponible;
dimensiones;
accesibilidad;
selección;
adaptación a tamaños pequeños;
traducción.
Para una interfaz clásica, el texto HTML suele ser más flexible.
Para un gráfico, el texto SVG puede tener sentido, siempre que se proporcione una alternativa accesible cuando el gráfico transmita información importante.
Convertir el texto en trazados: ¿buena idea?
Los programas gráficos suelen permitir convertir una tipografía en trazados.
Ventaja:
el renderizado deja de depender de que la fuente esté disponible.
Inconvenientes:
el texto deja de ser realmente texto;
el archivo puede hacerse más pesado;
la accesibilidad se complica;
la traducción se vuelve difícil;
desaparecen la selección y la búsqueda.
Para un logotipo donde la forma tipográfica forma parte del diseño, puede ser apropiado.
Para párrafos o datos, suele ser una mala estrategia.
Cuatro grandes formas de integrar SVG
El modo de integración determina qué puedes hacer con el archivo.
Una ilustración compleja procedente de una vectorización automática puede ser enorme.
Y un archivo SVG que contenga una fotografía codificada en base64 puede ser más pesado y menos práctico que el archivo raster original.
Compara siempre:
el contenido real;
el peso;
la complejidad;
el uso.
No elijas SVG únicamente porque sea vectorial.
¿Puede un SVG contener una imagen JPEG o PNG?
Sí.
SVG dispone, entre otros, de un elemento <image> que permite incrustar o referenciar un recurso raster.
Puede ser útil para determinadas composiciones mixtas.
Pero eso significa que:
«mi archivo es SVG»
no significa:
«todo mi contenido es vectorial».
Una fotografía incrustada sigue siendo una fotografía raster.
Si la amplías más allá de la información disponible, no obtiene mágicamente nuevos detalles.
Base64 en un SVG
Una imagen raster puede codificarse directamente dentro del documento como datos.
Esto hace que el archivo sea autónomo, pero suele aumentar el tamaño textual y, a veces, impide gestionar de forma independiente la caché del recurso.
Por tanto, para un raster grande hay que preguntarse si la integración aporta realmente una ventaja.
Un optimizador SVG no transformará automáticamente una fotografía incrustada en una representación vectorial eficiente.
SVG y compresión de red
Como SVG es texto XML, generalmente puede beneficiarse mucho de la compresión HTTP durante la transferencia.
Las repeticiones de etiquetas, atributos y números se comprimen bien.
Esto significa que reducir unos pocos bytes en el archivo fuente no siempre produce la misma ganancia en la red.
Sigue siendo útil limpiar el documento, especialmente para:
simplificar su mantenimiento;
reducir el análisis;
eliminar datos innecesarios;
mejorar el rendimiento global.
Pero mide también el peso transferido en las herramientas de red.
SVGZ: ¿hay que utilizarlo?
SVGZ designa históricamente un SVG comprimido con gzip.
En una arquitectura Web moderna, el servidor o CDN puede comprimir los archivos SVG durante la transferencia sin necesidad de una extensión .svgz.
Utilizar SVG normales correctamente servidos y una compresión HTTP adecuada suele simplificar el flujo de trabajo.
Lo importante es que el servidor proporcione el tipo de contenido correcto y una estrategia coherente de compresión y caché.
Accesibilidad: el formato no decide la alternativa
Un SVG puede ser:
informativo;
decorativo;
funcional;
complejo.
Su alternativa accesible depende de su función, no de su extensión.
Esta regla es la misma que para las demás imágenes.
Un icono decorativo no necesita ser anunciado.
Un gráfico que presenta datos importantes debe transmitir esa información de otra forma además de mediante sus formas.
SVG cargado con <img>
Para un SVG utilizado como imagen:
<img src="/images/logo.svg" alt="Bethemesh">
el atributo alt de <img> desempeña el papel principal.
Si la imagen es decorativa:
<img src="/images/decor.svg" alt="">
Un texto alternativo no debe describir mecánicamente cada forma.
Debe transmitir la información o función útil.
SVG inline informativo
Para un SVG inline sencillo, se puede utilizar un título accesible.
Ejemplo:
<svg role="img" aria-labelledby="chart-title" viewBox="0 0 400 240"> <title id="chart-title"> Evolución de las inscripciones de enero a junio </title></svg>
Los detalles exactos deben probarse con las tecnologías de asistencia objetivo, porque el comportamiento puede variar según la estructura y el contexto.
Para un gráfico complejo, un simple título generalmente no es suficiente.
Gráficos complejos
Supongamos un gráfico que muestra la evolución de tres series durante doce meses.
El SVG puede ser visualmente muy claro, pero un usuario que no perciba el gráfico también debe poder acceder a la información.
Según el caso, proporciona:
un resumen;
las tendencias esenciales;
los valores importantes;
una tabla de datos.
La accesibilidad no consiste en «hacer que el SVG sea legible por un lector de pantalla a cualquier precio». Consiste en hacer accesible la información.
SVG decorativo inline
Si un SVG no aporta ninguna información y simplemente acompaña a una etiqueta que ya es explícita, puede ocultarse a las tecnologías de asistencia.
¿Por qué utilizar solo el color puede ser un problema?
Imagina dos curvas:
verde = éxito;
roja = fracaso.
Sin una leyenda claramente identificable, patrones o formas distintas, algunos usuarios pueden tener dificultades para diferenciarlas.
SVG permite añadir fácilmente:
líneas discontinuas;
marcadores;
etiquetas;
símbolos.
Aprovecha esta flexibilidad en lugar de depender únicamente del color.
Seguridad: ¿por qué SVG merece especial atención?
Un PNG se trata esencialmente como una imagen raster.
SVG es un documento.
Según el contexto, puede contener o referenciar:
enlaces;
estilos;
recursos externos;
animaciones;
elementos interactivos;
scripts u otros mecanismos activos en determinados contextos.
Por tanto, un SVG procedente de una fuente no fiable no debe inyectarse directamente en el DOM sin un tratamiento adecuado.
Esto es especialmente importante para:
cargas de usuarios;
contenido comunitario;
CMS que permiten SVG;
archivos descargados de fuentes desconocidas.
¿<img> aísla más el SVG?
Cuando un SVG se carga como una imagen mediante <img>, los navegadores aplican restricciones correspondientes al contexto de imagen.
Esto reduce considerablemente las posibilidades activas en comparación con un SVG inline o cargado como documento.
Este aislamiento es una de las razones por las que <img> constituye una buena opción predeterminada para una imagen SVG estática.
Pero no elimina la necesidad de una política de seguridad coherente para archivos no fiables.
¿Por qué eliminar únicamente <script> no es suficiente?
La seguridad de un lenguaje documental no se reduce a una sola etiqueta.
Un saneamiento debe considerar, según la política elegida:
elementos permitidos;
atributos permitidos;
URL;
referencias externas;
estilos;
eventos;
espacios de nombres;
construcciones potencialmente peligrosas.
Por tanto, hay que utilizar una estrategia de saneamiento diseñada para SVG en lugar de una simple expresión regular que elimine:
<script>
Un optimizador de peso no es automáticamente un sanitizer.
Optimización y seguridad: dos objetivos diferentes
Un optimizador intenta producir un documento más pequeño o más sencillo.
Un sanitizer intenta eliminar o neutralizar las construcciones prohibidas por una política de seguridad.
Estos objetivos pueden solaparse en determinados elementos, pero no son equivalentes.
Un archivo puede ser:
muy optimizado y peligroso;
seguro pero no optimizado;
seguro y optimizado.
Por tanto, el optimizador SVG debe utilizarse para optimizar un documento de confianza, no como garantía universal de seguridad frente a un SVG hostil.
Tipo MIME
Un archivo SVG servido en la Web debe utilizar un tipo de contenido coherente:
image/svg+xml
Una configuración incorrecta del servidor puede provocar:
visualización inesperada;
descarga en lugar de renderizado;
comportamientos de seguridad diferentes.
La extensión correcta no basta: el servidor también debe responder correctamente.
SVG y Content Security Policy
Una Content Security Policy puede limitar determinadas categorías de recursos y comportamientos.
Constituye una capa de defensa útil dentro de una arquitectura Web.
Pero no sustituye el saneamiento de contenido no fiable que inyectas voluntariamente en tu DOM.
La seguridad debe pensarse en profundidad:
validación;
saneamiento;
contexto de integración;
cabeceras;
aislamiento.
Metadatos en SVG
Un programa gráfico puede añadir información como:
nombre del editor;
versión;
datos del documento;
comentarios;
información RDF;
identificadores;
nombres de capas.
Algunos son inútiles para la distribución.
Otros pueden ser necesarios para tu flujo de trabajo o tus obligaciones.
Por tanto, no elimines todo automáticamente sin comprender la función de esos datos.
Según su configuración, un optimizador puede, entre otras cosas:
retirar comentarios;
eliminar metadatos;
quitar información propia del editor;
reducir espacios;
acortar determinados valores;
disminuir la precisión decimal;
simplificar transformaciones;
fusionar determinados elementos;
eliminar atributos innecesarios.
Cada transformación debe evaluarse según el documento.
Algunas optimizaciones muy agresivas pueden modificar el aspecto o el comportamiento.
Precisión decimal
Una exportación puede contener:
42.123456789
mientras que:
42.12
quizá produzca un resultado indistinguible.
Reducir la precisión en miles de coordenadas puede disminuir el peso.
Pero si se va demasiado lejos:
42
la forma puede cambiar.
Los efectos son especialmente visibles en:
iconos pequeños;
curvas finas;
alineaciones;
geometrías precisas.
El optimizador SVG permite experimentar, pero el resultado siempre debe comprobarse.
Optimizar los colores
Un SVG puede contener un color con diferentes sintaxis.
Según el contexto, algunas representaciones pueden ser más compactas.
Pero la optimización no debe modificar el color.
Si trabajas con paletas o identidades visuales, utiliza el conversor de colores para comprender las equivalencias y RGB, HEX y HSL para entender su funcionamiento.
SVG y animaciones
SVG puede animarse de distintas maneras según la técnica utilizada:
CSS;
JavaScript;
mecanismos propios de SVG.
Se puede animar:
opacidad;
transformaciones;
colores;
trazados.
Las animaciones pueden ser elegantes, pero deben seguir siendo útiles y respetar las preferencias del usuario, especialmente la reducción de movimiento cuando sea pertinente.
Una animación compleja también aumenta el coste de renderizado.
Animación de un trazado
Un efecto frecuente consiste en dar la impresión de que una línea se dibuja progresivamente.
Suele utilizar:
stroke-dasharray;
stroke-dashoffset.
El efecto puede resultar visualmente interesante para:
esquemas;
firmas;
ilustraciones.
Pero no conviertas información esencial en una animación difícil de percibir o demasiado lenta.
La experiencia de usuario sigue siendo prioritaria.
SVG e interacción
Un SVG inline puede contener zonas interactivas o reaccionar a eventos.
Puede ser útil para:
mapas;
gráficos;
diagramas;
configuradores.
Pero en cuanto un elemento se vuelve interactivo, hay que tratar las mismas cuestiones que en cualquier interfaz:
navegación mediante teclado;
foco;
nombre accesible;
estado;
objetivo táctil;
contraste.
Que una zona esté dibujada con <path> no la exime de los requisitos de un control interactivo.
SVG y SEO
Un logotipo SVG no obtiene una ventaja SEO simplemente por ser vectorial.
Los beneficios son indirectos:
calidad visual;
peso potencialmente menor;
rendimiento;
adaptación a pantallas.
Para imágenes de contenido, la semántica de integración y las alternativas siguen siendo más importantes que la extensión por sí sola.
Por tanto, no conviertas imágenes a SVG esperando un «bonus SEO».
SVG y Core Web Vitals
Un SVG puede contribuir a un buen rendimiento si sustituye eficazmente a un raster pesado.
Pero también puede resultar costoso si es:
enorme;
complejo;
animado;
inyectado inline en grandes cantidades.
Para CLS, reserva correctamente su espacio como con cualquier otro contenido.
Para un recurso importante durante la carga inicial, considera también:
Puede ser eficiente para una biblioteca de iconos.
Pero las arquitecturas modernas ofrecen varias opciones:
componentes inline;
archivos individuales;
sprites;
bibliotecas generadas.
La mejor elección depende de:
framework;
número de iconos;
caché;
necesidad de estilo;
coste de mantenimiento.
Evita adoptar un sprite únicamente porque fuera una práctica habitual en una época con otras restricciones de red.
¿SVG o icon font?
Las fuentes de iconos se utilizaron ampliamente para agrupar pictogramas.
SVG ofrece generalmente un mayor control gráfico y se integra mejor con la semántica moderna de componentes.
Un icono SVG puede:
tener varias formas;
utilizar colores;
dimensionarse con precisión;
manipularse sin depender de un carácter de fuente.
Las icon fonts siguen siendo posibles, pero SVG suele resultar más natural para interfaces modernas.
¿SVG o Canvas?
SVG y <canvas> pueden dibujar gráficos, pero sus modelos son diferentes.
SVG conserva una estructura de objetos en el documento.
Canvas funciona más como una superficie de dibujo raster controlada mediante script.
SVG suele resultar práctico cuando:
el número de objetos sigue siendo razonable;
importa la accesibilidad o la interacción con elementos individuales;
el dibujo debe conservar una estructura.
Canvas puede ser más adecuado para determinados renderizados que contienen una enorme cantidad de elementos o requieren actualizaciones gráficas particulares.
No existe un ganador universal.
SVG e impresión
La naturaleza vectorial de SVG puede resultar ventajosa para imprimir logotipos, esquemas y gráficos.
Pero el resultado depende de:
software;
navegador;
fuentes;
efectos utilizados;
cadena de impresión.
Para un documento destinado a impresión profesional, pueden ser necesarios otros formatos y flujos de trabajo.
Aquí SVG se estudia principalmente en su contexto Web.
Flujo de trabajo recomendado para un SVG
1. Conservar la fuente
Guarda el archivo original o el documento de creación.
2. Comprobar que SVG es apropiado
¿El contenido es realmente vectorial?
3. Inspeccionar el viewBox
¿El encuadre es correcto?
4. Elegir el modo de integración
<img>, inline o background según su función.
5. Tratar la accesibilidad
¿Decorativo, informativo o funcional?
6. Comprobar la seguridad
¿El archivo es de confianza?
7. Optimizar
Elimina los datos innecesarios y reduce razonablemente la complejidad.
8. Probar
Comprueba:
renderizado;
tamaños;
móvil;
zoom;
temas;
accesibilidad;
rendimiento.
Este flujo evita reducir SVG a una simple cuestión de peso.
Flujo de trabajo con las herramientas de Bethemesh
SVG es un formato gráfico vectorial basado en XML. Describe formas, trazados, textos, estilos y transformaciones en lugar de una cuadrícula fija de píxeles.
¿Por qué SVG se mantiene nítido al ampliarlo?
Porque sus formas vectoriales se recalculan al tamaño de visualización en lugar de ampliar una matriz fija de píxeles.
¿SVG es mejor que PNG?
No en términos absolutos. SVG suele ser mejor para formas vectoriales como logotipos e iconos. PNG es un formato raster útil, entre otras cosas, para determinados contenidos sin pérdida y transparentes.
¿SVG es mejor que WebP?
Responden a usos diferentes. WebP está adaptado a imágenes raster; SVG, a dibujos vectoriales.
¿Se puede poner una foto dentro de un SVG?
Sí, un SVG puede incrustar o referenciar una imagen raster. La fotografía conserva entonces sus límites de resolución y el contenedor SVG no aporta automáticamente una ventaja.
¿Para qué sirve viewBox?
Define el sistema de coordenadas interno y el encuadre del dibujo. Después permite hacer corresponder ese sistema con diferentes tamaños de visualización.
¿Cuál es la diferencia entre viewBox, width y height?
viewBox define las coordenadas internas. width y height participan en el tamaño de visualización o intrínseco según el contexto.
¿Hay que eliminar width y height de un SVG?
No sistemáticamente. Depende de la integración. Sobre todo, conserva un viewBox correcto y controla explícitamente el comportamiento deseado.
¿Por qué mi SVG aparece recortado?
El contenido, su contorno o sus filtros pueden sobrepasar el viewBox. Comprueba las coordenadas y el encuadre.
¿Se puede cambiar el color de un SVG mediante CSS?
Sí, fácilmente cuando está inline, especialmente con currentColor. Un SVG cargado con <img> permanece aislado y sus formas internas no pueden seleccionarse directamente desde el CSS de la página.
¿Es mejor utilizar <img> o SVG inline?
Utiliza generalmente <img> para una imagen estática. Prefiere inline cuando realmente necesites aplicar estilos, animar o manipular los elementos internos.
¿Un SVG es automáticamente responsive?
Puede redimensionarse sin pixelación, pero su composición no se reorganiza automáticamente. Un gráfico complejo puede seguir siendo ilegible en móvil.
¿Un SVG necesita una versión Retina?
Las formas vectoriales generalmente no necesitan variantes @2x o @3x. Se rasterizan a la densidad necesaria.
¿SVG siempre es más ligero?
No. Un dibujo complejo con miles de puntos puede ser más pesado y más costoso que una imagen raster adaptada.
SVG es un formato documental que puede incluir contenido activo según su contexto. Nunca confíes en un SVG arbitrario simplemente porque su extensión sea .svg.
¿Un SVG cargado con <img> es más seguro?
El contexto de imagen aplica restricciones importantes frente a la inyección inline. Para contenido estático, es otra razón para preferir <img>. Aun así, sigue siendo necesaria una política de seguridad para contenidos no fiables.
¿Un optimizador SVG hace que un archivo sea seguro?
No. La optimización reduce o simplifica el documento. El saneamiento de seguridad aplica una política destinada a eliminar construcciones no autorizadas.
¿Cómo hacer accesible un SVG?
Depende de su función. Con <img>, utiliza un alt adecuado. Para SVG inline, gestiona su nombre y su función. Un gráfico complejo también debe proporcionar la información en una forma accesible.
¿Se puede utilizar currentColor con SVG?
Sí. Resulta especialmente práctico para iconos inline que deben seguir el color CSS del componente.
¿SVG o icon font?
SVG ofrece generalmente más control gráfico y se integra bien en componentes modernos. Las icon fonts siguen siendo posibles, pero ya no son la única solución para bibliotecas de iconos.
¿SVG o Canvas?
SVG conserva una estructura de objetos manipulables. Canvas es una superficie de dibujo. La mejor opción depende del número de elementos, las interacciones y el rendimiento buscado.
Elige el formato de imagen adecuado para una foto, una captura, un recurso transparente o una interfaz, sin sacrificar innecesariamente la calidad ni el rendimiento.
Aprende a optimizar SVG de forma segura: elimina datos innecesarios, simplifica el XML, reduce precisión, limpia estilos y valida que el resultado visual no cambie.
