Documentos estructurados
En SVG hay una serie de elementos prescindibles, que sin embargo, son de gran utilidad estructural y semántica y ofrecen claridad y accesibilidad.
Elemento | Ejemplo | Descripción |
---|---|---|
<g> |
<g> <rect x ="0" y...../> <polygon points ="35,0..../> </g> |
El elemento <g> es un contenedor utilizado para agrupar objetos. |
<defs> | <defs> <g id="paraReutilizar">....... </g> </defs> |
Los elementos definidos dentro de <defs> no aparecen en pantalla pero pueden ser utilizados más tarde con <use> ; |
<title> |
<g>
<title>flecha</title>
<rect x ="0" y...../>
<polygon points ="35,0..../>
</g> |
Cada elemento SVG puede tener un titulo <title> . Este elemento no aparece en pantalla, aunque tiene importancia semántica. |
<desc> |
<g>
<desc>la descripción va aquí</desc>
<rect x ="0" y...../>
<polygon points ="35,0..../>
</g> |
Cada elemento SVG puede tener una descripción <desc> . Este elemento no aparece en pantalla, aunque tiene importancia semántica. |
<use> |
<defs>
<g id="paraReutilizar">.......</g>
<defs>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#paraReutilizar" ... /> |
Elementos ya definidos pueden ser utilizados y reutilizados ulteriormente con <use> |
<image> |
<image xmlns:xlink="http://www.w3.org/1999/xlink xlink:href ="imagen.jpg" height="240" width="250" x="15" y="10"></image> |
El elemento <image> es utilizado para insertar imágenes. |
<a> |
<a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href ="http://w3.unpocodetodo.info"> <text x="125" y="30" >
Canvas - una introducción
</text>
</a> |
Permite crear enlaces hacia otros destinos. |
<switch> | <switch> <g systemLanguage="es">...</g> <g systemLanguage="en">...</g> </switch> |
El elemento <switch> funciona como un condicional. |
Vea la chuleta con las propiedades y metodos() de canvas.
Definiciones con <defs>
En SVG podemos definir objetos para reutilizarlos más tarde. Es recomendable, aunque no imprescindible guardar los elementos que queremos reutilizar dentro de un elemento <defs>
(definiciones). Los elementos que aparecen definidos dentro del elemento <defs>
no aparecen en pantalla, pero pueden ser referenciados utilizados y reutilizados ulteriormente con <use>
. Para esto normalmente se los asigna una identificación (id
).
See the Pen 11aea92f348977dca279ae75f83f75e2 by Gabi (@enxaneta) on CodePen.
Titulos y descripciones
Cada elemento SVG, puede tener un titulo <title>
y una descripción <desc>
, y aunque estos elementos no aparecen en pantalla, ofrecen claridad y son importantes de punto de vista semántico. En el ejemplo anterior el grupo <g id="flecha">
tiene asignado un titulo: <title>Flecha</title>
y una descripción: <desc>flecha apuntando a la derecha</desc>
.
Lea más acerca de grupos en SVG: Agrupar y reutilizar
Artículos relacionados
- - Documentos estructurados
- - Agrupar y reutilizar
- - Símbolos
- - Elementos SVG anidados
- - Marcadores
- - El elemento image
- - Enlaces externos
- - El elemento switch
- - El elemento foreignObject
Enlaces útiles
- La esp. w3.org: Document Structure
- Sara Soueidan: Structuring, Grouping, and Referencing in SVG - The <g>, <use>, <defs> and <symbol> Elements- Optimize el código SVG con SVG Optimiser
- Más información acerca del soporte de SVG en los navegadores
- Libros en ingles:
- SVG Essentials
- SVG Colors, Patterns & Gradients