Etiqueta <svg> de HTML

Definición y uso

<svg> La etiqueta define el contenedor de gráficos SVG.

SVG tiene varios métodos para dibujar rutas, marcos, círculos, texto e imágenes gráficas.

Para aprender más sobre SVG, lea nuestra Tutoriales de SVG。

Vea también:

Tutoriales HTML:HTML SVG

Tutoriales SVG:Tutoriales de SVG

Ejemplo

Ejemplo 1

Dibujar círculo:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Prueba personalmente

Ejemplo 2

Dibujar rectángulo:

<svg width="400" height="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>

Prueba personalmente

Ejemplo 3

Dibujar rectángulo con esquinas redondas:

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

Prueba personalmente

Ejemplo 4

Dibujar estrella:

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

Prueba personalmente

Ejemplo 5

Dibujar logo SVG:

<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
  <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
  <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
</svg>

Prueba personalmente

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que primero admite esta propiedad.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.0 3.2 10.1