Esta página ha sido traducida del inglés por la comunidad.Aprende más y únete a la comunidad de MDN Web Docs.
<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.
In this article
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):
<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:
<!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 implementaSVGSVGElement en la interfaz.
Especificaciones
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2> # NewDocument> |