<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 embeber 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 Shape elements Elementos estructurales Gradient elements `<a>`, `<altGlyphDef>`, `<clipPath>`, `<color-profile>`, `<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):

<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

Atributos de procesamiento condicional »
Atributo Central »
Atributos de evento del Documento »
Atributo de Eventos Gráficos »
Atributos de presentación »
class
style
externalResourcesRequired

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

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome para Android	Firefox para Android	Opera para Android	Safari en iOS	Samsung Internet
`svg`	Chrome Soporte completo 1	Edge Soporte completo 12	Firefox Soporte completo 1.5	IE Soporte completo 9	Opera Soporte completo 8	Safari Soporte completo 3	WebView Android Soporte completo 3	Chrome Android Soporte completo Si	Firefox Android Soporte completo 4	Opera Android Soporte completo Si	Safari iOS Soporte completo 3	Samsung Internet Android Soporte completo Si
`baseProfile` Deprecado	Chrome Soporte completo Si	Edge ?	Firefox ?	IE ?	Opera Soporte completo Si	Safari ?	WebView Android Soporte completo Si	Chrome Android Soporte completo Si	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android Soporte completo Si
`contentScriptType` Deprecado	Chrome Sin soporte No	Edge ?	Firefox ?	IE ?	Opera Sin soporte No	Safari ?	WebView Android Sin soporte No	Chrome Android Sin soporte No	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android Sin soporte No
`contentStyleType` Deprecado	Chrome Sin soporte No	Edge ?	Firefox ?	IE ?	Opera Sin soporte No	Safari ?	WebView Android Sin soporte No	Chrome Android Sin soporte No	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android Sin soporte No
`height`	Chrome Soporte completo 1	Edge Soporte completo 12	Firefox Soporte completo 1.5	IE Soporte completo 9	Opera Soporte completo 8	Safari Soporte completo 3	WebView Android Soporte completo 3	Chrome Android Soporte completo Si	Firefox Android Soporte completo 4	Opera Android Soporte completo Si	Safari iOS Soporte completo 3	Samsung Internet Android Soporte completo Si
`preserveAspectRatio`	Chrome Soporte completo 1	Edge Soporte completo 12	Firefox Soporte completo 1.5	IE Soporte completo 9	Opera Soporte completo 8	Safari Soporte completo 3	WebView Android Soporte completo 3	Chrome Android Soporte completo Si	Firefox Android Soporte completo 4	Opera Android Soporte completo Si	Safari iOS Soporte completo 3	Samsung Internet Android Soporte completo Si
`version` Deprecado	Chrome Soporte completo Si	Edge ?	Firefox ?	IE ?	Opera Soporte completo Si	Safari ?	WebView Android Soporte completo Si	Chrome Android Soporte completo Si	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android Soporte completo Si
`viewBox`	Chrome Soporte completo 1	Edge Soporte completo 12	Firefox Soporte completo 1.5	IE Soporte completo 9	Opera Soporte completo 8	Safari Soporte completo 3	WebView Android Soporte completo 3	Chrome Android Soporte completo Si	Firefox Android Soporte completo 4	Opera Android Soporte completo Si	Safari iOS Soporte completo 3	Samsung Internet Android Soporte completo Si
`width`	Chrome Soporte completo 1	Edge Soporte completo 12	Firefox Soporte completo 1.5	IE Soporte completo 9	Opera Soporte completo 8	Safari Soporte completo 3	WebView Android Soporte completo 3	Chrome Android Soporte completo Si	Firefox Android Soporte completo 4	Opera Android Soporte completo Si	Safari iOS Soporte completo 3	Samsung Internet Android Soporte completo Si
`x`	Chrome Soporte completo 1	Edge Soporte completo 12	Firefox Soporte completo 1.5	IE Soporte completo 9	Opera Soporte completo 8	Safari Soporte completo 3	WebView Android Soporte completo 3	Chrome Android Soporte completo Si	Firefox Android Soporte completo 4	Opera Android Soporte completo Si	Safari iOS Soporte completo 3	Samsung Internet Android Soporte completo Si
`y`	Chrome Soporte completo 1	Edge Soporte completo 12	Firefox Soporte completo 1.5	IE Soporte completo 9	Opera Soporte completo 8	Safari Soporte completo 3	WebView Android Soporte completo 3	Chrome Android Soporte completo Si	Firefox Android Soporte completo 4	Opera Android Soporte completo Si	Safari iOS Soporte completo 3	Samsung Internet Android Soporte completo Si
`zoomAndPan`	Chrome Soporte completo Si	Edge ?	Firefox ?	IE ?	Opera Soporte completo Si	Safari ?	WebView Android Soporte completo Si	Chrome Android Soporte completo Si	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android Soporte completo Si

Leyenda

Soporte completo: Soporte completo
Sin soporte: Sin soporte
Compatibilidad desconocida: Compatibilidad desconocida
Deprecado. No debe ser usado en nuevos sitios web.: Deprecado. No debe ser usado en nuevos sitios web.