Introducción: SVG significa Scalable Vector Graphics . Está escrito en formato basado en XML que se utiliza para describir gráficos vectoriales. Es ampliamente compatible con navegadores como Google Chrome, Firefox, Opera, etc. y muchos de ellos tienden a generar imágenes SVG. Los diseñadores también usan el formato SVG para hacer ilustraciones como logotipos, íconos, etc., ya que tienen píxeles perfectos en cualquier resolución.
En este artículo, insertaremos un código SVG de muestra en el archivo HTML que lo ayudará a incluir cualquier código SVG que desee en su propio archivo HTML.
Etiqueta <svg> : para incluir el código SVG, debemos usar la etiqueta <svg> en el código HTML. Es un contenedor que se utiliza para gráficos SVG. Está escrito dentro de la sección <body> del archivo HTML. Tiene etiquetas de apertura y cierre. También usamos atributos de ancho y alto con la etiqueta <svg>.
Ahora veamos un ejemplo para entenderlo mejor.
HTML
<!DOCTYPE html> <html> <head> <title>Include SVG Code</title> </head> <body> <center> <h2>Welcome To GFG</h2> <!-- SVG tag starts from here--> <svg width="600" height="150"> <rect width="600" height="150" fill="green" stroke="black" stroke-width="6" /> </svg> <!-- SVG tag ends here--> </center> </body> </html>
Producción:
