¿Cuándo deberías usar SVG inline versus img?

Question

Accepted Answer

SVG es un formato de imagen **vectorial** (basado en XML), por lo que se escala a cualquier tamaño sin borrarse. Puedes incluirlo de dos formas principales, cada una con sus compensaciones. ## SVG inline — markup directamente en el HTML ```html ``` **Ventajas:** puedes estilizarlo con CSS (`fill`, `stroke`), animar sus partes, cambiar color mediante `currentColor` (hereda el color del texto) y responder a eventos — porque es un DOM real. Sin solicitud HTTP adicional. **Desventajas:** infla el HTML, no se almacena en caché por separado, los iconos repetidos duplican el markup. ## SVG mediante `` — referenciado como un archivo ```html

``` **Ventajas:** almacenado en caché por el navegador, mantiene el HTML limpio, simple. **Desventajas:** **no puedes** estilizar o crear scripts de sus partes internas con tu CSS/JS — es una imagen opaca. ## Guía de decisión ```text Need to recolor/animate/interact with the SVG → inline SVG Static logo/illustration, want caching + clean HTML →

Many repeated icons → an SVG sprite () or an icon component ``` ## Accesibilidad ```html ``` ## Por qué es importante La elección entre SVG inline y `` se reduce a si necesitas **estilizar/animar** los gráficos (inline) o simplemente **mostrarlos** eficientemente (``). Los iconos que cambian de color al pasar el ratón o cambiar tema van inline (a menudo como componentes); los activos de marca estática van mediante ``. De cualquier forma, los vectores permanecen nítidos en cada resolución — ideales para iconos y logotipos.

SVG inline — markup directamente en el HTML

SVG mediante <img> — referenciado como un archivo

Guía de decisión

Accesibilidad

Por qué es importante

SVG mediante `<img>` — referenciado como un archivo