SVG en HTML
Puede incrustar elementos SVG directamente en sus páginas HTML.
Incrustar SVG directamente en páginas HTML
Aquí hay un ejemplo de un gráfico SVG simple:
y aquí está el código HTML:
Ejemplo
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
Explicación del código SVG:
- Una imagen SVG comienza con un elemento <svg>
- Los atributos de ancho y alto del elemento <svg> definen el ancho y el alto de la imagen SVG
- El elemento <circle> se usa para dibujar un círculo
- Los atributos cx y cy definen las coordenadas x e y del centro del círculo. Si no se establecen cx y cy, el centro del círculo se establece en (0, 0)
- El atributo r define el radio del círculo.
- Los atributos de trazo y ancho de trazo controlan cómo aparece el contorno de una forma. Establecemos el contorno del círculo en un "borde" verde de 4px
- El atributo de relleno se refiere al color dentro del círculo. Establecemos el color de relleno en amarillo.
- La etiqueta de cierre </svg> cierra la imagen SVG
Nota: Dado que SVG está escrito en XML, ¡todos los elementos deben estar correctamente cerrados!