SVG en HTML
- Página anterior Introducción a SVG
- Página siguiente Rectángulo de SVG
Puede incrustar el elemento SVG directamente en la página HTML.
Incrustar SVG directamente en la página HTML
A continuación, se muestra un ejemplo simple de gráfico SVG:
Este es el código HTML:
<!DOCTYPE html> <html> <body> <h1>Mi primer 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:
- La imagen SVG comienza con el elemento '<svg>'
- Las propiedades 'width' y 'height' del elemento '<svg>' definen el ancho y la altura de la imagen SVG
- El elemento '<circle>' se utiliza para dibujar círculos
- Las propiedades '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 establecerá en (0, 0)
- La propiedad 'r' define el radio del círculo
- Las propiedades 'stroke' y 'stroke-width' controlan la forma de visualización del contorno de la forma. Estableceremos el contorno del círculo en un 'borde' verde de 4 píxeles
- La propiedad 'fill' establece el color dentro del círculo. Estableceremos el color de relleno en amarillo
- Cierre de la etiqueta </svg> de la imagen SVG
Nota: ¡Debido a que SVG se escribe en XML, todos los elementos deben cerrarse correctamente!
- Página anterior Introducción a SVG
- Página siguiente Rectángulo de SVG