Usar archivo de imagen SVG en HTML y CSS
-
Use la etiqueta
<img>para agregar un archivo SVG a la página web -
Use la etiqueta
<objeto>para agregar un archivo SVG a la página web -
Use la etiqueta
<embed>para agregar un archivo SVG a la página web -
Use la etiqueta
<iframe>para agregar un archivo SVG a la página web -
Use la propiedad CSS
background-imagepara agregar un archivo SVG como fondo
Este artículo introdujo la incrustación de imágenes SVG en páginas web usando HTML y CSS.
El archivo SVG es una imagen vectorial y su uso tiene muchas ventajas sobre el uso de png, jpeg, jpg u otros archivos de imagen. El principal beneficio del archivo SVG es que es independiente de la resolución, lo que significa que cuando lo escalamos a cualquier dimensión, la resolución o calidad de la imagen permanece sin cambios.
Además, el tamaño del archivo SVG es muy compacto, lo que disminuye el tiempo de carga de las páginas web. También podemos editar el archivo SVG en el editor de texto y hacerlo compatible con SEO agregando texto relacionado con palabras clave.
Además, podemos agregar animación a los archivos SVG mediante secuencias de comandos, que también es una de las mejores ventajas de usar archivos SVG.
Use la etiqueta <img> para agregar un archivo SVG a la página web
En esta sección, hemos utilizado la etiqueta <img> de HTML para representar archivos de imagen SVG en la página web. Hemos tomado dos íconos diferentes del svgrepo e incrustado su URL en la etiqueta src de la etiqueta <img>.
Código de ejemplo:
<img src="https://www.svgrepo.com/show/426102/camera.svg" alt="camera icon">
<img src="https://www.svgrepo.com/show/426942/transport.svg" alt="car icon">
En la imagen de salida anterior, los usuarios pueden ver el icono SVG de la cámara y el automóvil.
Use la etiqueta <objeto> para agregar un archivo SVG a la página web
La etiqueta HTML <objeto> permite a los usuarios representar multimedia como audio, video o archivos PDF en la página web.
Hemos usado dos atributos de la etiqueta objeto para mostrar el archivo SVG. El atributo data de <object> toma la ruta o URL local del archivo SVG.
El atributo tipo de la etiqueta <objeto> toma el tipo de archivo, y usaremos image/svg+xml como su valor para representar el archivo SVG.
Aquí, hemos renderizado los íconos de la cámara y el automóvil usando la etiqueta objeto.
<object data="https://www.svgrepo.com/show/426102/camera.svg" type="image/svg+xml"></object>
<object data="https://www.svgrepo.com/show/426942/transport.svg" type="image/svg+xml">
También podemos agregar la imagen alternativa dentro de la etiqueta <objeto>. En el siguiente ejemplo, tomamos la URL rota del icono de la cámara y agregamos la imagen alternativa.
Ahora, cuando los usuarios ejecuten el siguiente código, verán una imagen alternativa solo porque la URL del archivo SVG está rota.
<object data="https:/w.svgrepo.com/show/426102/camera.svg" type="image/svg+xml">
<img src="https://yt3.ggpht.com/ytc/AMLnZu-K8Cu9BcdyoXT2AeAi7TJ744ADUCQyYblAoH9F=s900-c-k-c0x00ffffff-no-rj"
style="height: 50px;width: 50px;" />
</object>
<object data="https://www.svgrepo.com/show/426942/transport.svg" type="image/svg+xml" >
En el resultado anterior, los usuarios pueden ver que muestra el logotipo de DelftStack, que es una imagen alternativa en lugar de un icono de cámara.
Use la etiqueta <embed> para agregar un archivo SVG a la página web
La etiqueta <embed> nos permite incrustar otras aplicaciones en la página web. Usaremos el atributo src y type con la etiqueta <embed> para incrustar el archivo SVG en la página web.
El atributo src toma la URL o ruta del archivo SVG, y tipo define el tipo de multimedia.
Aquí, hemos incrustado dos íconos SVG en la página web usando la etiqueta <incrustar>.
<embed src="https://www.svgrepo.com/show/426102/camera.svg" type="image/svg+xml">
<embed src="https://www.svgrepo.com/show/426942/transport.svg" type="image/svg+xml" >
Use la etiqueta <iframe> para agregar un archivo SVG a la página web
La etiqueta <iframe> permite a los desarrolladores incrustar el marco en línea dentro del documento. Proporciona un marco o bloque diferente a los recursos externos, como audio, video o multimedia.
Aquí, hemos usado la etiqueta <iframe> y hemos agregado la URL del archivo SVG dentro del atributo src. Además, no necesitamos especificar aquí qué tipo de multimedia queremos mostrar, como las etiquetas <incrustar> y <objeto>.
<iframe src="https://www.svgrepo.com/show/426102/camera.svg" height="50px">
El resultado anterior muestra que el ícono de la cámara está incrustado en bloques o marcos separados.
Use la propiedad CSS background-image para agregar un archivo SVG como fondo
La propiedad CSS background-image nos permite establecer la imagen de fondo para el elemento en particular. Aquí, hemos configurado el archivo SVG como imagen de fondo.
En el siguiente ejemplo, hemos creado la etiqueta <h3> y hemos agregado algo de texto. Además, hemos agregado una imagen SVG de fondo para eso usando la propiedad background-image de CSS.
Además, hemos agregado el color para el texto de <h3> y establecido background-repeat: no-repeat; para evitar la repetición de la imagen de fondo.
<h3>welcome to DelftStack!</h3>
h3{
background-image: url("https://www.svgrepo.com/show/426102/camera.svg");
background-repeat: no-repeat;
color: red;
}
En este artículo, hemos aprendido los diferentes métodos para renderizar el archivo SVG usando HTML y CSS. Sin embargo, los usuarios también pueden agregar el archivo SVG a la página web directamente usando la etiqueta <SVG> de HTML.
Las etiquetas <img> y <object> permiten a los usuarios configurar la imagen alternativa si falla la carga del archivo SVG. Los usuarios pueden usar la etiqueta <embed> o <iframe> para incrustar el archivo de imagen SVG en un bloque separado.
Sin embargo, no se recomienda usar el <iframe> ya que afecta el SEO de la página web, pero los usuarios pueden usar el <objeto> o el <svg> en línea en su lugar.
