¿Qué es el elemento SVG?
SVG significa Scalable Vector Graphics, es un formato de imagen vectorial para gráficos bidimensionales que se puede usar para crear animaciones y el elemento SVG es un contenedor que define un nuevo sistema de coordenadas. El documento SVG está definido por el formato XML.
Importancia de los documentos SVG: en el mundo actual, SVG ha hecho que las animaciones del navegador sean más fáciles y prácticas. Se utiliza para hacer animaciones y gráficos 2D. Se puede usar un documento SVG para crear juegos 2D en un documento HTML. Tiene diferentes métodos para dibujar líneas, formas como círculos, rectángulos y rutas, etc. Es independiente de la resolución y también admite el manejo de eventos en el documento.
Sintaxis:
<svg></svg>
Ejemplo 1: En este ejemplo, usaremos el elemento SVG para dibujar un rectángulo y colorearlo.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <title> How to change SVG color? </title> </head> <body style="text-align: center;"> <h1 style="color: green;"> GeeksforGeeks </h1> <div> <svg> <rect height="300" width="500" style="fill:#060"> </svg> </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, usaremos el elemento SVG para dibujar un rectángulo y colorearlo.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <title> How to change SVG color? </title> </head> <body style="text-align: center;"> <h1 style="color: green;"> GeeksforGeeks </h1> <div> <svg height="1000" width="500"> <circle cx="250" cy="120" r="80" stroke="#000" stroke-width="5" style="fill:#060"> </svg> </div> </body> </html>
Producción: