<svg>
El elemento svg
es un contenedor que define un nuevo sistema de coordenadas y viewport (en-US). 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> (en-US), <color-profile> , <cursor> (en-US), <filter> (en-US), <font> (en-US), <font-face> (en-US), <foreignObject> (en-US), <image> (en-US), <marker> (en-US), <mask> (en-US), <pattern> (en-US), <script> , <style> , <switch> (en-US), <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-US) en la interfaz.
Especificaciones
Specification |
---|
Scalable Vector Graphics (SVG) 2 # NewDocument |
Compatibilidad con navegadores
BCD tables only load in the browser