En HTML5, puede incrustar elementos SVG directamente en sus páginas HTML.
Insertar SVG directamente en páginas HTML
Aquí está un ejemplo de un simple gráfico SVG:
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> Inténtalo tú mismo " SVG Code explanation:
- Una imagen SVG comienza con un <svg> elemento
- La anchura y la altura de los atributos de la <svg> elemento de definir la anchura y la altura de la imagen SVG
- La <circle> elemento se utiliza para dibujar un círculo
- Los atributos cx y cy definen las coordenadas X e Y del centro del círculo. Si se omiten CX y CY, el centro del círculo se establece en (0, 0)
- El r atributo define el radio del círculo
- Los atributos de trazo y trazo ancho controlan cómo aparece el contorno de una forma. Hemos establecido el contorno del círculo a una "frontera" verde 4PX
- El fill atributo se refiere al color en el interior del círculo. Hemos establecido el color de relleno a amarillo
- El cierre </svg> etiqueta se cierra la imagen SVG
Nota: Desde SVG está escrito en XML, todos los elementos deben estar cerradas correctamente!