SVG en HTML

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:

Disculpe, su navegador no admite SVG incrustado.

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>

Prueba personal

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!