<svg>

Saltar a:
  1. Usage context
  2. Example
  3. Attributes
  4. DOM Interface
  5. Specifications
  6. Browser compatibility

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

The svg element can be used to embed an SVG fragment inside the current document (for example, an HTML document). This SVG fragment has its own viewport and coordinate system.

Usage context

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>

Example

Consider the following SVG image (representing the national flag of Italy):

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

It could be included in an HTML5 document as follows:

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

Attributes

Global attributes

Specific attributes

DOM Interface

This element implements the SVGSVGElement interface.

Specifications

Specification Status Comment
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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Soporte básicoChrome 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 SiEdge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo SiSafari iOS Soporte completo 3Samsung Internet Android ?
baseProfile
Deprecated
Chrome Soporte completo SiEdge ? Firefox ? IE ? Opera ? Safari ? WebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
contentScriptType
Deprecated
Chrome Sin soporte NoEdge ? Firefox ? IE ? Opera ? Safari ? WebView Android Sin soporte NoChrome Android Sin soporte NoEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
contentStyleType
Deprecated
Chrome Sin soporte NoEdge ? Firefox ? IE ? Opera ? Safari ? WebView Android Sin soporte NoChrome Android Sin soporte NoEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
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 SiEdge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo SiSafari iOS Soporte completo 3Samsung Internet Android ?
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 SiEdge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo SiSafari iOS Soporte completo 3Samsung Internet Android ?
version
Deprecated
Chrome Soporte completo SiEdge ? Firefox ? IE ? Opera ? Safari ? WebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
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 SiEdge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo SiSafari iOS Soporte completo 3Samsung Internet Android ?
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 SiEdge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo SiSafari iOS Soporte completo 3Samsung Internet Android ?
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 SiEdge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo SiSafari iOS Soporte completo 3Samsung Internet Android ?
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 SiEdge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo SiSafari iOS Soporte completo 3Samsung Internet Android ?
zoomAndPanChrome Soporte completo SiEdge ? Firefox ? IE ? Opera ? Safari ? WebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

Etiquetas y colaboradores del documento

Colaboradores en esta página: BubuAnabelas, mbenitez01
Última actualización por: BubuAnabelas,