HTML Academy · Lección

SVG en línea frente a img y object

Elija el método adecuado para incrustar SVG según su caso de uso

SVG en línea frente a img y object es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.

Tres formas de insertar SVG

SVG (Scalable Vector Graphics) se puede insertar de tres formas:

<img src="icon.svg"> — sencillo, con caché y sin acceso desde JS/CSS
<object data="chart.svg"> — interacción integrada en un documento independiente
SVG integrado directamente en HTML — acceso completo a CSS/JS, sin solicitudes adicionales

SVG con img src

El método más sencillo: referenciar SVG como una imagen:

<img src="logo.svg" alt="Company logo" width="120" height="40">
<!-- Pros: simple, cached by browser, clean HTML -->
<!-- Cons: cannot style with CSS, no JS interaction,
     cannot use SVG filters or animations from CSS -->

SVG con background-image de CSS

Utilice SVG como fondo CSS para iconos decorativos:

.icon-check {
  background-image: url('/icons/check.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 1rem;
  height: 1rem;
}
<!-- Decorative: not in accessibility tree, no alt text needed -->

Elemento object para SVG

Inserte SVG con <object> para usar un SVG interactivo:

<object
  type="image/svg+xml"
  data="interactive-chart.svg"
  width="800"
  height="400"
  aria-label="Interactive revenue chart"
>
  <!-- Fallback: -->
  <img src="chart-static.png" alt="Revenue chart">
</object>
<!-- SVG can have its own scripts
     SVG document is somewhat isolated from parent page -->

SVG integrado

Inserte SVG directamente en HTML para tener un control completo:

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  width="24"
  height="24"
  aria-hidden="true"
  focusable="false"
>
  <path d="M12 2L2 7l10 5 10-5-10-5z"/>
  <path d="M2 17l10 5 10-5"/>
</svg>

Ventajas del SVG integrado

Por qué utilizar SVG integrado:

Estilos CSS completos: fill, stroke, transiciones y animaciones
Interacción con JavaScript: seleccionar elementos SVG y escuchar eventos
currentColor: hereda el color del CSS del elemento principal
No requiere solicitudes HTTP adicionales
Puede formar parte del árbol de accesibilidad mediante role y title

Desventajas del SVG integrado

Desventajas del SVG integrado:

El archivo HTML aumenta de tamaño
El navegador no lo almacena en caché por separado
No se puede reutilizar fácilmente el mismo SVG en varias páginas sin duplicarlo
El código se repite cuando se utilizan iconos repetidos

Elemento use para sprites

Defina los iconos SVG una sola vez y haga referencia a ellos con <use>:

<!-- Icon sprite (often hidden): -->
<svg style="display:none">
  <symbol id="icon-close" viewBox="0 0 24 24">
    <path d="M18 6L6 18M6 6l12 12"/>
  </symbol>
  <symbol id="icon-check" viewBox="0 0 24 24">
    <path d="M20 6L9 17l-5-5"/>
  </symbol>
</svg>

<!-- Use the icons: -->
<svg aria-hidden="true"><use href="#icon-close"/></svg>
<svg aria-hidden="true"><use href="#icon-check"/></svg>

SVG accesible

Haga accesibles los SVG integrados:

<!-- Informative SVG: -->
<svg role="img" aria-labelledby="svg-title">
  <title id="svg-title">Revenue growth chart Q1-Q4 2024</title>
  <!-- chart paths -->
</svg>

<!-- Decorative SVG: -->
<svg aria-hidden="true" focusable="false">
  <!-- decorative paths -->
</svg>

<!-- focusable="false" needed for IE to prevent tab focus -->

Truco con currentColor

Utilice currentColor para heredar el color del texto desde CSS:

<button class="btn btn-primary">
  <svg aria-hidden="true" width="16" height="16">
    <path fill="currentColor" d="M10 6H6v4H2v4h4v4h4v-4h4v-4h-4V6z"/>
  </svg>
  Add Item
</button>
<!-- fill="currentColor" inherits the button's text color
     When button is hovered/focused, icon color changes too
     No need for separate icon color rules -->

Comprobación rápida

¿Cuál es la principal ventaja del SVG integrado frente a utilizar un SVG con img src?

Repaso: inserción de SVG

Aspectos esenciales de la inserción de SVG:

<img src> — sencillo, sin acceso a CSS/JS y con caché
background-image de CSS — solo para uso decorativo
<object data> — SVG interactivo, parcialmente aislado
SVG integrado — control completo de CSS/JS, sin solicitudes adicionales
Sprite SVG con <symbol> + <use> — reutilización eficiente

Preguntas frecuentes

¿La lección «SVG en línea frente a img y object» es gratis?

Sí — el texto completo de «SVG en línea frente a img y object» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué aprenderé en «SVG en línea frente a img y object»?

Elija el método adecuado para incrustar SVG según su caso de uso Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar HTML Academy?

No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «SVG en línea frente a img y object»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de HTML Academy?

Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a HTML Academy