<svg>

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
Shape elements
Elementos estructurales
Gradient elements
<a>, <altGlyphDef> (en-US), <clipPath> (en-US), <color-profile> (en-US), <cursor> (en-US), <filter> (en-US), <font> (en-US), <font-face> (en-US), <foreignObject>, <image> (en-US), <marker> (en-US), <mask> (en-US), <pattern> (en-US), <script>, <style>, <switch> (en-US), <text>, <view> (en-US)

Ejemplo

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

<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 docuemnto HTML5 de la siguiente manera:

<!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.

Specificaciones

Specificación Estado Comentario
Scalable Vector Graphics (SVG) 2
La definición de '<svg>' en esta especificación.
Candidate Recommendation
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La definición de '<svg>' en esta especificación.
Recommendation Initial definition

Compatibilidad de Navegador

BCD tables only load in the browser