¿Puedo insertar SVGs directamente en mi HTML?

Puedes insertar SVGs directamente en HTML. Ventajas: menos peticiones HTTP, control con CSS y JS, escalabilidad perfecta y mejor accesibilidad.

Puedes insertar código SVG (Scalable Vector Graphics) directamente en tu HTML. Esto se conoce como «SVG en línea» o «inline SVG». Simplemente copias el código del archivo SVG (que es un formato basado en XML) y lo pegas en tu documento HTML donde quieras que aparezca la imagen.

Ejemplo básico:

<body>
  <p>Aquí hay un círculo SVG simple:</p>
  <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    <title>Círculo amarillo</title> </svg>
  <p>Y aquí sigue el resto de tu contenido.</p>
</body>
Lenguaje del código: PHP (php)

Ventajas de usar SVG en línea:

Menos peticiones HTTP: Al estar el SVG dentro del HTML, el navegador no necesita hacer una petición adicional para cargar un archivo de imagen. Esto puede mejorar ligeramente el tiempo de carga inicial, especialmente para iconos o gráficos pequeños.
Control con CSS: Puedes aplicar estilos CSS a las partes individuales del SVG (como path, circle, rect, text) directamente desde tus hojas de estilo CSS o etiquetas <style>.
Esto permite cambiar colores de relleno, trazos, opacidad, etc., de forma dinámica (por ejemplo, en estados :hover).
/* En tu CSS */
svg .mi-circulo:hover { fill: red; }
<svg>
<circle class="mi-circulo" cx="50" cy="50" r="40" fill="blue" />
</svg>
Manipulación con JavaScript: Los elementos de un SVG en línea forman parte del DOM (Document Object Model) de la página. Esto significa que puedes seleccionarlos y manipularlos con JavaScript para crear interactividad o animaciones complejas.
Escalabilidad perfecta: Siendo gráficos vectoriales, los SVG escalan a cualquier tamaño sin perder calidad ni pixelarse. Se ven nítidos en todas las pantallas, incluidas las de alta resolución (HiDPI/Retina).
Accesibilidad mejorada: El texto dentro de los SVG (<text>) es texto real, seleccionable y accesible para lectores de pantalla. Además, puedes incluir etiquetas como <title> (título corto) y <desc> (descripción larga) dentro del SVG para mejorar su accesibilidad.
Animaciones: Puedes animar los SVG en línea utilizando CSS (transiciones y animaciones) o JavaScript.

Consideraciones:

Caché: Los SVG en línea no se almacenan en caché por el navegador de forma independiente como lo haría un archivo .svg externo. Si el mismo SVG se usa en muchas páginas, podría ser más eficiente cargarlo externamente para aprovechar la caché del navegador (a menos que la página HTML completa esté cacheada).
Verboso: Para SVGs muy complejos, el código puede hacer que tu HTML sea bastante largo y difícil de leer.

En resumen, los SVG en línea son excelentes para iconos, logotipos y gráficos interactivos o que necesitan ser estilizados dinámicamente con CSS y JavaScript.

¿Tienes alguna duda o pregunta?Envía el formulario y procuraré darle respuesta

Si creees que esto puede ser de utilidad a alguien más, pues... compártelo que es gratis 🙂

Más contenido interesante