<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 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> , <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):
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>
Atributos
Atributos Globales
Specific attributes
Interfaz DOM
Este elemento implementa SVGSVGElement
en la interfaz.
Especificaciones
Specification |
---|
Scalable Vector Graphics (SVG) 2 # NewDocument |
Compatibilidad con navegadores
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.