<svg>

Baseline Widely available *

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

* Some parts of this feature may have varying levels of support.

El elementosvg es un contenedor que define un nuevo sistema de coordenadas yviewport. 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

Categorias	Elemento contenedor, Elemento estructural
Contenido permitido	Cualquier 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>`,`<filter>`,`<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>