Hay varias formas de insertar una imagen SVG. La elección de una depende de las tareas que enfrenta el desarrollador web.

SVG es un formato de gráficos vectoriales, que significa Gráficos Vectoriales Escalables (Scalable Vector Graphics). Los formatos vectoriales no almacenan la imagen en sí, sino las instrucciones para su construcción a partir de puntos y curvas.

Formato de imagen SVG
Formato de imagen SVG

En los formatos ráster, la información sobre el número específico de puntos de la imagen se compacta en un ladrillo binario. Es inútil mirar dentro de él y solo se puede cambiar en los editores gráficos.

�PNG
IH�aV
PLTE�������0�
IDAcZ�d���� �W=
S�3�o;���]P
���IEND�B`�~

El formato SVG también se puede crear y modificar en editores gráficos, como Illustrator o Figma. Pero también es texto, lo que significa que se puede abrir como HTML o CSS en cualquier editor de código.

HTML
<svg width="20">
  <rect fill="#fc0"
    width="20"
    height="20"/>
  <line stroke="black"
    x1="0" y1="0"
    x2="20" y2="20"/>
</svg>

SVG es como una página HTML independiente. Al insertar SVG, en realidad no se está insertando solo una imagen, sino una página completa. Con su propio sistema de coordenadas, visor, estilos, scripts y características increíbles.

Si miras SVG como una página separada, es más claro qué método de inserción necesitas.

Primer Método

El primero y más simple es el elemento <img>, que se coloca directamente en el código HTML. Esta es una forma eficaz de cargar cualquier imagen: los navegadores saben de antemano por el código HTML que está ahí y comienzan a cargarla.

La desventaja es que los scripts no funcionarán en este SVG y cualquier intento de interactuar con los elementos dentro estará condenado al fracaso. El archivo será como detrás de un cristal: se puede ver, pero no se puede tocar. Aunque todo lo demás dentro funciona perfectamente, incluidas las animaciones CSS.

HTML
<img src="picture.svg"  alt="Detrás del cristal" width="300px" height="200px">

Este método es más adecuado para imágenes de contenido que no requieren interacción: logotipos, gráficos, diagramas.

Segundo Método

El segundo método es una imagen de fondo en CSS. No importa si la estableces para un elemento, un pseudoelemento o la insertas como contenido, el resultado será el mismo que con <img>: detrás de un cristal, pero algo funciona dentro.

CSS
.picture {
  background-image:
    url(picture.svg);
}

Este método es adecuado para gráficos decorativos que no requieren interacción: fondos, iconos y otros detalles menores.

Tercer Método

El tercer método es insertar el contenido de los archivos SVG directamente en la página, como cualquier otra etiqueta. Con este método de conexión, puedes controlar los estilos de SVG a través de CSS.

HTML
<a class="navigation-link" href="#">
  <svg class="navigation-icon" width="20" height="19" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="m19.026 17.05-3.71-3.7c1.002-1.3 1.704-3 1.704-4.9 0-4.4-3.61-8-8.023-8C4.585.45.975 4.15.975 8.55c0 4.4 3.61 8 8.022 8 1.805 0 3.51-.6 4.914-1.7l3.71 3.7 1.405-1.5Zm-10.029-2.5c-3.309 0-6.017-2.7-6.017-6s2.708-6 6.017-6c3.31 0 6.017 2.7 6.017 6s-2.707 6-6.017 6Z" fill="#000"/>
  </svg>
</a>

Con este SVG, puedes hacer lo mismo que con los elementos HTML normales: estilos, scripts. Por ejemplo, puedes cambiar el color del relleno al pasar el ratón o incluso animar la imagen vectorial.

CSS
.navigation-icon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  fill: #000000;
}

Atributos de la Etiqueta <svg>

  • width — ancho en píxeles o porcentajes.
  • height — alto en píxeles o porcentajes.
  • viewBox — posición y tamaño del área de visualización.

El valor fill es responsable del color de la imagen.

SVG es mucho más que un formato de gráficos, como ya hemos visto. Si quieres profundizar, lee Tutorial de SVG.

En conclusión: hay muchos métodos y todos son buenos en algo. Elige el que mejor se adapte a tus necesidades.

5/5 - (1 voto)