<svg>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

El elemento svg es un contenedor que define un nuevo sistema de coordenadas y viewport. Es usado como el elemento más externo de cualquier documento SVG, pero también puede ser usado para agregar un fragmento de un SVG dentro de un documento SVG o HTML.

Contexto de Uso

CategoriasElemento contenedor, Elemento estructural
Contenido permitidoCualquier número de los siguientes elementos, en cualquier orden:
Elementos de animación
Elementos descriptivos
Elementos de forma
Elementos estructurales
Elementos de degradado
<a>, <clipPath>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

Ejemplo

Considere la sigiente imagen SVG (representando la bandera nacional de Italia):

xml
<svg xmlns="http://www.w3.org/2000/svg"
     width="150" height="100" viewBox="0 0 3 2">

  <rect width="1" height="2" x="0" fill="#008d46" />
  <rect width="1" height="2" x="1" fill="#ffffff" />
  <rect width="1" height="2" x="2" fill="#d2232c" />
</svg>

Esta puede ser incluida en un documento HTML5 de la siguiente manera:

html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>HTML/SVG Example</title>
  </head>

  <body>
    <svg width="150" height="100" viewBox="0 0 3 2">
      <rect width="1" height="2" x="0" fill="#008d46" />
      <rect width="1" height="2" x="1" fill="#ffffff" />
      <rect width="1" height="2" x="2" fill="#d2232c" />
    </svg>
  </body>
</html>

Atributos

Atributos Globales

Specific attributes

Interfaz DOM

Este elemento implementa SVGSVGElement en la interfaz.

Especificaciones

Specification
Scalable Vector Graphics (SVG) 2
# NewDocument

Compatibilidad con navegadores

BCD tables only load in the browser