SVG en HTML5
En HTML5, los elementos SVG se pueden incrustar directamente en tu página HTML.
peligro
¡Si el SVG está escrito en XML, todos los elementos deben cerrarse adecuadamente!
Elementos de forma en SVG
SVG tiene algunos elementos de forma predeterminados. Aquí están:
- rectángulo
<rect> - círculo
<circle> - elipse
<ellipse> - línea
<line> - polilínea
<polyline> - polígono
<polygon> - ruta
<path>
Ejemplo de incrustación de SVG en una página HTML:
Ejemplo de incrustación de SVG en una página HTML
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="300" height="200">
<circle cx="150" cy="100" r="50" stroke="purple" stroke-width="5" fill="pink" />
</svg>
</body>
</html>Ahora entendamos el código:
- Una imagen SVG siempre comienza con una etiqueta
<svg>. - El ancho y el alto de la imagen SVG se especifican mediante los atributos width y height del elemento
<svg>. - El elemento
<circle>dibuja un círculo. - Los atributos cx y cy especifican las coordenadas x e y del centro del círculo. Si cx y cy están ausentes, el centro del círculo se establece en (0, 0).
- El atributo r se utiliza para especificar el radio del círculo.
- Los atributos stroke y stroke-width controlan la apariencia del contorno de una forma. En nuestro ejemplo de código, hemos establecido el contorno del círculo como un "borde" púrpura de 5px.
- El atributo fill establece un color dentro del círculo. Lo hemos establecido en rosa.
- La imagen SVG se cierra con la etiqueta de cierre
</svg>.
Práctica
¿Cuáles son las características principales del formato SVG en HTML5?