Artículo original escrito por: Edidiong Asikpo
Artículo original: How to Use SVG Images in CSS and HTML – A Tutorial for Beginners
Traducido y adaptado por: Keiler Guardo Herrera
SVG son las siglas de gráficos vectoriales escalables (Scalable Vector Graphics). Es un tipo único de formato de imágenes para gráficos basados en vectores escrito en el lenguaje de marcado extensible (XML).
En este tutorial, explicaré por qué querrías usar imágenes SVG y cómo puedes usarlas en CSS y HTML.
¿Por qué utilizar imágenes SVG?
Hay varias razones para utilizar imágenes SVG, algunas de las cuales son:
- Las imágenes SVG no pierden su calidad al ampliarlas o cambiarlas de tamaño.
- Se pueden crear y editar con un IDE o un editor de texto.
- Son accesibles y animables.
- Tienen un tamaño de archivo pequeño y son altamente escalables.
- Y se pueden buscar, indexar, programar y comprimir.
Ahora vamos a ver cómo se puede trabajar realmente con las imágenes SVG.
Cómo descargar la imagen SVG utilizada en este tutorial
Si quieres trabajar con la imagen SVG que he utilizado en este tutorial, sigue los pasos (y el esquema) de abajo para descargarla.
- Ve a unDraw.
- Cambia el color de fondo a amarillo.
- En el cuadro de búsqueda, busca la palabra happy.
- Haz clic en la imagen llamada "Happy news".
- En la ventana emergente, has clic en el botón "Download SVG for your projects".
Si seguiste los pasos anteriores correctamente, la imagen SVG debe estar ahora en tu ordenador.
Ahora, abre la imagen SVG en tu IDE o editor de texto favorito. Cámbiale el nombre a happy.svg o el que prefieras.
Cómo utilizar imágenes SVG en CSS y HTML
Hay varias maneras diferentes de utilizar imágenes SVG en CSS y HTML. En este tutorial exploraremos seis métodos diferentes.
1. Cómo utilizar un SVG con <img>
Este método es la forma más sencilla de añadir imágenes SVG a una página web. Para utilizar este método, añade el elemento <img> a tu documento HTML y haz referencia a él en el atributo src, así:
<img src = "happy.svg" alt="Mi SVG feliz"/>
Suponiendo que hayas descargado la imagen SVG de unDraw y la hayas renombrado como happy.svg, puedes seguir adelante y añadir el fragmento de código anterior en tu documento HTML.
Si lo has hecho todo correctamente, tu página web debe tener el mismo aspecto que la siguiente demostración. ?
Cuando se añade una imagen SVG mediante la etiqueta <img> sin especificar el tamaño, se asume el tamaño del archivo SVG original.
Por ejemplo, en la demostración anterior, no modifiqué el tamaño de la imagen SVG, por lo que asumió su tamaño original (que era un ancho de 915.11162px y una altura de 600.53015px).
Nota: para cambiar el tamaño original, tienes que especificar el width y height con CSS como puedes ver en la demo de abajo. También puede actualizar el width y height originales directamente.
Aunque podemos cambiar el tamaño de las imágenes SVG añadidas a través de la etiqueta <img> siguen existiendo algunas restricciones si quieres hacer cambios de estilo importantes en la imagen SVG.
2. Cómo utilizar SVG con background-image en CSS
Esto es similar a añadir SVG a un documento HTML utilizando la etiqueta <img>. Pero esta vez lo hacemos con CSS en lugar de HTML, como puedes ver en el siguiente fragmento de código.
body {
background-image: url(happy.svg);
}
Cuando se utiliza un SVG como imagen de fondo con CSS, tiene limitaciones similares a las de utilizar <img>. Aun así, permite un poco más de personalización.
Echa un vistazo a la demostración que aparece a continuación y siéntete libre de hacer modificaciones en ella utilizando CSS.
3. Cómo utilizar imágenes SVG inline
Las imágenes SVG pueden escribirse directamente en el documento HTML mediante la etiqueta <svg> </svg>.
Para ello, abre la imagen SVG en VS code o en tu IDE preferido, copia el código y pégualo dentro del elemento <body> en tu documento HTML.
<body>
// Pegua aquí el código SVG.
</body>
Si lo has hecho todo correctamente, tu página web debe ser exactamente igual que la demostración de abajo.
Cuando se utiliza el SVG inline en el documento HTML, se reduce el tiempo de carga porque sirve como una solicitud HTTP.
El uso de este método te permite realizar una mayor personalización en comparación con el uso de <img> o background-image.
4. Cómo utilizar un SVG con <object>
También puedes utilizar un elemento HTML <object> para añadir imágenes SVG a una página web utilizando la siguiente sintaxis de código:
<object data="happy.svg" width="300" height="300"> </object>
El atributo data se utiliza para especificar la URL del recurso que utilizará el objeto, que en nuestro caso es la imagen SVG.
El width y el height se utilizan para especificar el tamaño de la imagen SVG.
De nuevo, a continuación se muestra una demostración para que la explore. ?
El uso de <object> es compatible con todos los navegadores que soportan SVG.
5. Cómo utilizar SVG con <iframe>
Aunque esto no es aconsejable, también puedes añadir una imagen SVG usando un <iframe> como se ve en la demostración de abajo.
Sin embargo, tenga en cuenta que los <iframe> pueden ser difíciles de mantener y serán malos para la optimización de su sitio en los motores de búsqueda (SEO).
El uso de <iframe> también anula el propósito de escalables en el nombre gráficos vectoriales escalables porque las imágenes SVG añadidas con este formato no son escalables.
6. Cómo utilizar SVG con <embed>`
El elemento HTML <embed> es otra forma de utilizar una imagen SVG en HTML y CSS utilizando esta sintaxis: <embed src="happy.svg" />.
Sin embargo, tenga en cuenta que este método también tiene limitaciones. Según MDN, la mayoría de los navegadores modernos han dejado de ser compatibles con los plug-ins del navegador. Esto significa que depender de <embed> no es generalmente buena idea si quieres que tu sitio sea operable en el navegador del usuario promedio.
A continuación se muestra una demostración del uso del elemento HTML <embed> para añadir una imagen SVG.
Conclusión
Espero que hayas podido conocer las diferentes maneras de emplear imágenes SVG en CSS y HTML. Espero que esto te guíe hacia la elección del método correcto a la hora de añadir imágenes SVG a un sitio web.
Si tienes alguna pregunta, puedes enviarme un mensaje en Twitter , y estaré encantada de responder a cada una de las preguntas.