<svg>

Estás leyendo la versión en inglés del artículo porque aún no existe una traducción para este idioma. ¡Ayúdanos a traducir este artículo!

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

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>, <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

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
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
svgChrome Soporte completo 1Edge Soporte completo SiFirefox Soporte completo 1.5IE Soporte completo 9Opera Soporte completo 8Safari Soporte completo 3WebView Android Soporte completo 3Chrome Android Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo SiSafari iOS Soporte completo 3Samsung Internet Android Soporte completo Si
baseProfile
Deprecado
Chrome Soporte completo SiEdge ? Firefox ? IE ? Opera Soporte completo SiSafari ? WebView Android Soporte completo SiChrome Android Soporte completo SiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Soporte completo Si
contentScriptType
Deprecado
Chrome Sin soporte NoEdge ? Firefox ? IE ? Opera Sin soporte NoSafari ? WebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Sin soporte No
contentStyleType
Deprecado
Chrome Sin soporte NoEdge ? Firefox ? IE ? Opera Sin soporte NoSafari ? WebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Sin soporte No
heightChrome Soporte completo 1Edge Soporte completo SiFirefox Soporte completo 1.5IE Soporte completo 9Opera Soporte completo 8Safari Soporte completo 3WebView Android Soporte completo 3Chrome Android Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo SiSafari iOS Soporte completo 3Samsung Internet Android Soporte completo Si
preserveAspectRatioChrome Soporte completo 1Edge Soporte completo SiFirefox Soporte completo 1.5IE Soporte completo 9Opera Soporte completo 8Safari Soporte completo 3WebView Android Soporte completo 3Chrome Android Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo SiSafari iOS Soporte completo 3Samsung Internet Android Soporte completo Si
version
Deprecado
Chrome Soporte completo SiEdge ? Firefox ? IE ? Opera Soporte completo SiSafari ? WebView Android Soporte completo SiChrome Android Soporte completo SiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Soporte completo Si
viewBoxChrome Soporte completo 1Edge Soporte completo SiFirefox Soporte completo 1.5IE Soporte completo 9Opera Soporte completo 8Safari Soporte completo 3WebView Android Soporte completo 3Chrome Android Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo SiSafari iOS Soporte completo 3Samsung Internet Android Soporte completo Si
widthChrome Soporte completo 1Edge Soporte completo SiFirefox Soporte completo 1.5IE Soporte completo 9Opera Soporte completo 8Safari Soporte completo 3WebView Android Soporte completo 3Chrome Android Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo SiSafari iOS Soporte completo 3Samsung Internet Android Soporte completo Si
xChrome Soporte completo 1Edge Soporte completo SiFirefox Soporte completo 1.5IE Soporte completo 9Opera Soporte completo 8Safari Soporte completo 3WebView Android Soporte completo 3Chrome Android Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo SiSafari iOS Soporte completo 3Samsung Internet Android Soporte completo Si
yChrome Soporte completo 1Edge Soporte completo SiFirefox Soporte completo 1.5IE Soporte completo 9Opera Soporte completo 8Safari Soporte completo 3WebView Android Soporte completo 3Chrome Android Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo SiSafari iOS Soporte completo 3Samsung Internet Android Soporte completo Si
zoomAndPanChrome Soporte completo SiEdge ? Firefox ? IE ? Opera Soporte completo SiSafari ? WebView Android Soporte completo SiChrome Android Soporte completo SiFirefox 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.