SVG en línea frente a img: elige cómo se comporta tu ilustración

Usa un SVG en un elemento <img> cuando quieras mostrar un gráfico terminado. Inserta el SVG en línea cuando la página necesite modificar formas individuales mediante CSS o JavaScript. Ambos métodos pueden mostrar la misma ilustración vectorial a distintos tamaños; insertarla en línea no mejora su geometría.

Esta diferencia importa cuando un logotipo se ve bien en una pestaña del navegador, pero ignora la regla de color de tu sitio web. Puede que el archivo esté bien. Quizá la regla simplemente no pueda acceder a su contenido. A continuación, la misma ilustración de montañas aparece en ambos formatos para que compruebes la diferencia antes de cambiar tu flujo de preparación de recursos.

Elige el comportamiento que necesitas

Un SVG externo sigue siendo un archivo vectorial al mostrarse mediante <img>. La separación está entre la página y los elementos internos del archivo. El CSS de la página puede cambiar el tamaño, girar o atenuar el elemento de imagen, pero un selector como .logo path no puede acceder a los trazados del recurso indicado en src. Las formas en línea pasan a formar parte del árbol del documento de la página. La guía de MDN sobre cómo insertar SVG describe estos dos métodos.

Si todavía estás comprobando qué contiene el archivo, empieza por qué es un archivo SVG. La extensión .svg por sí sola no significa que cada detalle visible sea un trazado. Para entregar recursos de una tienda, sigue la guía de iconos SVG personalizados para Shopify después de verificar el contenido del archivo.

Prueba la misma ilustración en ambos formatos

Para esta demostración, creamos manualmente dos trazados de montañas y un círculo para el sol. Cargamos esa ilustración desde un archivo separado y pegamos las mismas formas en el HTML. Es una prueba de inserción, no un resultado de conversión de PerfectVector.

En nuestra prueba con el navegador Chromium, ambas versiones ocupaban inicialmente 360 × 240 píxeles CSS y mostraban un sol ámbar. Después activamos una regla de la página dirigida a .sun. El sol en línea pasó a ser coral; el de la imagen externa siguió siendo ámbar. Al reducir ambos cuadros a 180 × 120, cambió su tamaño de visualización sin alterar esa diferencia.

1. Guarda el archivo SVG separado

Crea artwork.svg con este código completo. El viewBox define el espacio de coordenadas del dibujo. El ancho y la altura le dan unas dimensiones iniciales explícitas.

<svg xmlns="http://www.w3.org/2000/svg"
     width="240" height="160" viewBox="0 0 240 160">
  <path d="M34 120 104 26 174 120Z" fill="#233b63" />
  <circle class="sun" cx="183" cy="43" r="20" fill="#f59e0b" />
  <path d="M80 120 146 59 210 120Z" fill="#65a7a0" />
</svg>

2. Añade la imagen y la copia en línea

Guarda lo siguiente como index.html junto a artwork.svg y ábrelo en un navegador. Los dos gráficos tienen la misma geometría y los mismos atributos de pintura. La versión en línea también tiene un nombre para las tecnologías de asistencia.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>SVG embedding test</title>
<style>
  .artwork {
    display: block;
    width: 360px;
    max-width: 100%;
    height: auto;
  }
  .theme .sun { fill: #d94862; }
</style>
<body class="theme">
  <h1>External image</h1>
  <img class="artwork" src="artwork.svg"
       width="240" height="160"
       alt="Mountain and sun illustration">
 
  <h2>Inline SVG</h2>
  <svg class="artwork" xmlns="http://www.w3.org/2000/svg"
       width="240" height="160" viewBox="0 0 240 160"
       role="img" aria-labelledby="mountain-title">
    <title id="mountain-title">Mountain and sun illustration</title>
    <path d="M34 120 104 26 174 120Z" fill="#233b63" />
    <circle class="sun" cx="183" cy="43" r="20" fill="#f59e0b" />
    <path d="M80 120 146 59 210 120Z" fill="#65a7a0" />
  </svg>
</body>
</html>

La captura utiliza un diseño de comparación con estilos alrededor de estas mismas formas. El ejemplo más pequeño de arriba facilita reproducir el comportamiento.

3. Cambia una variable cada vez

Elimina class="theme" del cuerpo y vuelve a cargar la página. Ahora ambos soles deberían ser ámbar. Restaura la clase y solo el sol en línea debería volverse coral. Cambia .artwork de width: 360px a width: 180px; si el contenedor tiene espacio, ambos gráficos deberían reducirse a 180 × 120.

Si quieres cambiar permanentemente el sol de la imagen externa, modifica su fill en artwork.svg. Si quieres que responda al estado de la página, elige marcado en línea u otro método de presentación elegido expresamente. Nuestra guía para cambiar los colores de un SVG explica cómo editar el propio archivo.

El nombre .sun se añadió para este ejemplo. Un archivo convertido o exportado no necesariamente tendrá una clase útil para cada parte significativa. Inspecciona y nombra las formas que quieras controlar en lugar de suponer que un objeto visible corresponde a un único trazado seleccionable.

Define explícitamente el tamaño y los nombres accesibles

Conserva el viewBox al pasar una ilustración a HTML. Establece atributos de ancho y altura como base razonable y luego aplica CSS adaptable. En esta ilustración de proporción 3:2, width: 180px; height: auto conserva las proporciones. Un margen vacío grande dentro del viewBox sigue formando parte del área de dibujo con cualquiera de los dos métodos; cambiar la forma de insertarlo no puede eliminarlo.

Cuando el cuadro de diseño tiene otra proporción, la guía de ajuste con preserveAspectRatio compara el ajuste de la ilustración completa, el recorte y la distorsión.

Para una imagen externa con significado, escribe alt en el <img> de HTML. Para una imagen en línea con significado, el ejemplo utiliza role="img" y aria-labelledby apuntando a su <title>. El SVG en línea no utiliza el atributo alt de las imágenes HTML. Estas opciones de nombre están documentadas en la guía de MDN sobre SVG en HTML.

Si repites el ejemplo en línea, asigna un valor único al ID de cada título y actualiza su aria-labelledby correspondiente. Aplica la misma precaución a los ID utilizados por degradados, máscaras o trazados de recorte. Para ilustraciones decorativas junto a un texto visible equivalente, usa un alt vacío en <img> u oculta el SVG en línea a las tecnologías de asistencia mediante aria-hidden="true". Prueba el enlace o botón completo en su contexto para que su propósito siga teniendo un nombre.

Para muchos iconos reutilizables, un sprite de símbolos SVG introduce un método separado de definición e instancias. Decide si necesitas esa reutilización antes de pegar un gran conjunto de copias en cada página.

Mide el rendimiento

El marcado en línea incorpora las formas al documento en lugar de obtener la ilustración como un recurso de imagen separado. También aumenta el marcado del documento. Un archivo externo puede reutilizarse desde la caché del navegador, según su URL, las cabeceras de respuesta y el estado de la caché. La guía de MDN sobre caché HTTP explica estas condiciones.

Ninguno de estos hechos determina qué versión hará más rápida tu página. Compara la página real en una primera visita y en una visita posterior, con su número real de copias y la complejidad real del SVG. Esta demostración prueba el acceso a la pintura y el tamaño; no es una prueba comparativa de velocidad de carga.

El modo de imagen externa también tiene restricciones más allá del CSS. MDN documenta que un SVG utilizado como imagen desactiva JavaScript y restringe los recursos externos. No insertes en línea un SVG desconocido solo para hacer funcionar una característica que falta. Revisa y sanea el marcado no confiable antes de incorporarlo a una página.

Cuando tu ilustración inicial solo es un PNG

La vectorización debe preceder a esta elección de inserción si el original carece de las formas que necesitas. Para un logotipo o una ilustración raster adecuados, convierte el PNG a SVG con PerfectVector, inspecciona el resultado comparándolo con el original y conserva el SVG aprobado como archivo maestro de la ilustración. Comprueba la silueta, los huecos y las regiones pequeñas de color antes de añadir clases o preparar una copia para la web.

PerfectVector proporciona la ilustración vectorial. Tú sigues eligiendo qué partes deben responder al CSS, añadiendo nombres significativos y probando la página final. Convertir una imagen no produce automáticamente un componente con nombres de clase semánticos. Si un SVG existente ya contiene trazados utilizables, trabaja con ellos en lugar de vectorizar una copia renderizada.

Comprueba también si es un SVG que contiene una imagen raster incrustada. Pegar ese archivo en línea permite acceder a su elemento <image>; no convierte los píxeles de ese elemento en formas cuyo color puedas cambiar por separado. Para una fotografía que deba conservar su aspecto fotográfico, mantén un formato raster adecuado para su presentación.

Comprueba la página final

• Confirma que la ilustración independiente se ve bien antes de probar el CSS de la página.
• Elige <img> para mostrar un gráfico terminado, o SVG en línea para controlar directamente sus elementos.
• Verifica el tamaño renderizado y las proporciones en el diseño compatible más estrecho.
• Prueba la forma concreta cuyo color quieres cambiar; no dependas de una regla general de path.
• Comprueba los nombres de las imágenes, los ID duplicados y el enlace o botón que las rodea.
• Mide el comportamiento de carga si afecta a la decisión; no deduzcas un resultado de velocidad de este ejemplo.

Preguntas frecuentes

¿Un SVG se convierte en un mapa de bits cuando uso una etiqueta img? No. Un SVG cargado mediante img puede seguir renderizando geometría vectorial. El elemento de imagen impide que la página que lo contiene seleccione directamente sus formas internas; no convierte esas formas en un PNG.

¿Por qué currentColor no sigue el color del texto de mi página? Una imagen SVG externa tiene su propio contexto de estilos. El color de la página no se convierte automáticamente en el currentColor utilizado dentro de ese archivo. Usa SVG en línea cuando su pintura deba heredar de la página y configura el fill o stroke correspondiente para utilizar currentColor.

¿Debo convertir mi SVG existente antes de insertarlo en línea? No hace falta convertirlo si ya contiene las formas vectoriales que quieres. Revisa su marcado, conserva las referencias necesarias, añade los nombres adecuados y pruébalo en la página. La conversión de raster a vector solo es pertinente cuando necesitas recuperar formas de un original raster.

Fuentes

1. MDN — Cómo incluir gráficos vectoriales en HTML — Comportamiento de la imagen externa y la inserción en línea.
2. MDN — Introducción a SVG en HTML — Marcado en línea, viewBox y nombres accesibles.
3. MDN — Caché HTTP — La reutilización de la caché depende de la política de respuesta y la identidad del recurso.
4. MDN — SVG como imagen — Restricciones de scripts y recursos en contextos de imagen.

Elige la forma de inserción que corresponda a la función de la ilustración y pruébala con los estilos reales de la página. Si tu único original es un PNG adecuado, recupera primero sus formas vectoriales, inspecciona el resultado y prepara la ilustración aprobada para esa forma de inserción.