Etiqueta HTML `<svg>`

La etiqueta <svg> se utiliza como contenedor para gráficos SVG.

SVG (Scalable Vector Graphics) es un lenguaje para gráficos bidimensionales basado en XML con soporte para animación e interactividad. Para dibujar imágenes, utiliza figuras geométricas simples (círculos, líneas, polígonos, etc.).

svg example

peligro
El atributo xmlns solo es necesario para el elemento <svg> exterior de los documentos SVG independientes. No es necesario para los elementos <svg> interiores ni en documentos HTML.

Sintaxis `<svg>`

La etiqueta <svg> se escribe en pares. El contenido se escribe entre las etiquetas de apertura (<svg>) y de cierre (</svg>).

Ejemplo de la etiqueta HTML `<svg>`:

Etiqueta HTML <svg>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div style="display:flex; flex-flow:row wrap;">
      <svg width="180" height="180">
        <rect x="20" y="20" rx="20" ry="20" width="100" height="100" style="fill:lightgray; stroke:#1c87c9; stroke-width:4;"/>
      </svg>
      <svg width="200" height="200">
        <circle cx="100" cy="70" r="60" stroke="#1c87c9" stroke-width="4" fill="lightgray"/>
      </svg>
      <svg width="200" height="200">
        <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lightgray; stroke:#1c87c9; stroke-width:4; fill-rule:evenodd;"/>
      </svg>
    </div>
  </body>
</html>

Try it Yourself »

Ejemplo de la etiqueta HTML `<svg>` que dibuja una elipse:

Ejemplo de la etiqueta HTML <svg> que dibuja una elipse:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="200">
      <ellipse cx="100" cy="50" rx="100" ry="50" fill="#1c87c9" />
    </svg>
  </body>
</html>

Try it Yourself »

Diferencias entre SVG y Canvas

A primera vista, tanto SVG como Canvas hacen lo mismo: dibujar arte vectorial utilizando puntos de coordenadas. Sin embargo, existen diferencias entre ellos. Echémosles un vistazo.

SVG es un lenguaje para describir gráficos 2D en XML, mientras que Canvas se utiliza para dibujar gráficos 2D en tiempo real (con JavaScript).

SVG es como un programa de "dibujo". El dibujo es una instrucción de dibujo para cada forma, y cualquier parte de cualquier forma se puede cambiar. Los dibujos están orientados a formas.

Canvas es como un programa de "pintura". Cuando los píxeles llegan a la pantalla, ese es tu dibujo. Puedes cambiar formas solo sobrescribiéndolas con otros píxeles. Las pinturas están orientadas a píxeles.

SVG se basa en XML, lo que significa que cada elemento está disponible dentro del DOM de SVG. En SVG, la forma dibujada se recuerda como un objeto. En Canvas, el navegador olvida la forma dibujada inmediatamente después de haberla dibujado. Si necesitas hacer cambios en el dibujo, debes dibujarlo desde cero.

Atributos

Atributo	Valor	Descripción
baseProfile	none (default), full, basic, tiny	Describe el perfil mínimo del lenguaje SVG que el autor considera necesario para representar correctamente el contenido. No compatible después de SVG2.
contentScriptType	content-type	Especifica el lenguaje de scripting predeterminado para el fragmento de documento dado. No compatible después de SVG2.
contentStyleType	content-type	Identifica el lenguaje de hoja de estilos predeterminado utilizado por el fragmento SVG. No compatible después de SVG2.
height	length, percentage	Define la altura del elemento SVG.
preserveAspectRatio	none, xMinYMin, xMidYMin, xMaxYMin, xMinYMid, xMidYMid, xMaxYMid, xMinYMax, xMidYMax, xMaxYMax, meet (default), slice	Define cómo debe deformarse el fragmento SVG si se incrusta en un contenedor con una relación de aspecto diferente.
version	number	Define la versión de SVG utilizada para el contenido interno del elemento. No compatible después de SVG2.
viewBox	list-of-numbers	Define los límites del viewport SVG para el fragmento SVG actual.
width	length, percentage	Determina el ancho del elemento SVG.
x	length, percentage	Determina la coordenada x del contenedor SVG. No tiene efecto en los elementos SVG más externos.
y	length, percentage	Determina la coordenada y del contenedor SVG. No tiene efecto en los elementos SVG más externos.

Práctica

¿Cuál es el propósito de la etiqueta SVG en HTML?

La etiqueta SVG se utiliza para definir gráficos basados en vectores en HTML.La etiqueta SVG se utiliza para agregar imágenes a una página web.Los gráficos SVG NO pierden calidad si se hacen zoom o se redimensionan.Los gráficos SVG se basan en píxeles.

Etiqueta HTML <svg> ​

Sintaxis <svg> ​

Ejemplo de la etiqueta HTML <svg>: ​

Ejemplo de la etiqueta HTML <svg> que dibuja una elipse: ​

Diferencias entre SVG y Canvas ​

Atributos ​