En este artículo, aprenderemos cómo podemos agregar gráficos vectoriales escalables (SVG) a nuestra página web y también comprenderemos su implementación a través del ejemplo. SVG es un tipo de formato de imagen escrito en XML para gráficos basados en vectores. Cada elemento y cada atributo en los archivos SVG se pueden animar. Las imágenes de gráficos vectoriales escalables no pierden su calidad cuando se redimensionan o se amplían. Hay muchas formas en las que podemos agregar archivos SVG a nuestra página web.
Hay varios beneficios de usar SVG sobre otro formato de imagen (como JPG, PNG, GIF, etc.):
- Estas imágenes se pueden crear y editar fácilmente con cualquier editor de texto.
- Las imágenes SVG se pueden buscar, indexar, codificar y comprimir.
- Estas imágenes son escalables y se pueden mostrar con
Hay varias formas de usar imágenes SVG en HTML. A continuación se analizan algunos de los métodos:
SVG en una etiqueta <img> : esta es la forma básica y sencilla de insertar la imagen SVG en una página web. Para este método, simplemente podemos usar la etiqueta <img> y luego especificar la ruta del archivo o el enlace de la imagen en el atributo src . Para usar este método, deberíamos haber descargado el archivo de imagen SVG o el enlace de la imagen SVG.
Sintaxis:
<img src="svgImage.svg" alt="SVG_img">
Ejemplo: Este ejemplo ilustra cómo agregar la imagen SVG usando la etiqueta <img>. Sin especificar el tamaño de la imagen SVG, ocupará el tamaño original de la imagen SVG.
HTML
<!DOCTYPE html> <html> <head> <title>SVG Image</title> </head> <body> <h2>GeeksforGeeks</h2> <h4>Use of SVG image in img tag</h4> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20211022130449/svg.png" alt="GFG"> </body> </html>
Producción:
SVG en una etiqueta <objeto>: podemos usar la etiqueta <objeto> para insertar las imágenes SVG especificando la URL del recurso que usará el objeto usando el atributo de datos . El ancho y la altura se pueden usar para especificar el tamaño de la imagen SVG.
Sintaxis:
<object data="svgImage.svg"> </object>
Ejemplo: Este ejemplo ilustra la adición de la imagen SVG usando la etiqueta <object>.
HTML
<!DOCTYPE html> <html> <head> <title>SVG Image</title> </head> <body> <h2>GeeksforGeeks</h2> <h4>Use of SVG image using object tag</h4> <object data= "https://media.geeksforgeeks.org/wp-content/uploads/20211022130449/svg.png"> </object> </body> </html>
Producción:
SVG en una etiqueta <embed> : podemos usar la etiqueta <embed> para insertar la imagen SVG especificando el enlace en el atributo src . Aunque, la etiqueta <embed> ahora está en desuso y se eliminó la compatibilidad con los complementos del navegador en la mayoría de los navegadores modernos.
Sintaxis:
<embed src="svgImage.svg" />
Ejemplo: Este ejemplo ilustra la adición de la imagen SVG usando la etiqueta <embed>.
HTML
<!DOCTYPE html> <html> <head> <title>SVG Image</title> </head> <body> <h2>GeeksforGeeks</h2> <h4>Use of SVG image using embed tag</h4> <embed src= "https://media.geeksforgeeks.org/wp-content/uploads/20211022130449/svg.png" /> </body> </html>
Producción:
SVG en una etiqueta <image>: el elemento <image> SVG incluye imágenes dentro de documentos SVG. Puede mostrar archivos de imagen de trama u otros archivos SVG.
Sintaxis:
<svg>
<image attributes="values" >
</svg>
Ejemplo: Este ejemplo ilustra la adición de la imagen SVG usando la etiqueta <image>.
HTML
<!DOCTYPE html> <html> <head> <title>SVG Image</title> </head> <body> <h2>GeeksforGeeks</h2> <h4>Use of SVG image using image tag</h4> <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <image href= "https://media.geeksforgeeks.org/wp-content/uploads/20211022130449/svg.png" height="200" width="200" /> </svg> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por iamabhijha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA