Documentos estructurados

facebook-svg gplus-svg twitter-svg

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