SVG (II). Estructura de un documento SVG

Un documento SVG consiste en la combinación de varios elementos SVG contenidos dentro de un elemento “svg”. Un documento SVG puede también estar contenido dentro de otros archivos, por ejemplo con XML (es importante el uso de los espacios de nombres para indicar que los elementos “svg” y “ellipse”  son del espacio de nombres de SVG):

<?xml version=”1.0″ standalone=”yes”?>
<parent xmlns=”http://example.org
       xmlns:svg=”http://www.w3.org/2000/svg“>
   <!– parent contents here –>
   <svg:svg width=”4cm” height=”8cm” version=”1.1″>
      <svg:ellipse cx=”2cm” cy=”4cm” rx=”2cm” ry=”1cm” />
   </svg:svg>
   <!– … –>
</parent>

El elemento “svg”

El elemento “svg” puede aparecer en la mitad del contenido de un SVG. Este es el mecanismo mediante el cual los fragmentos de documento SVG pueden ser incluidos dentro de otros fragmentos de documento SVG. Otro uso de los elementos “svg” en la mitad de un SVG es para establecer un nuevo marco (viewport).

En todos los casos, para ajustarse a las recomendaciones del “Namespaces in XML“, la declaración del espacio de nombres del SVG  (SVG namespaces) de ponerse en todos los que vienen del espacio de nombres de SVG. Hay varias formas de hacer una declaración del espacio de nombres la más común es en el elemento “svg”, donde puede ser especificado un atributo “xmlns” sin el prefijo de espacio de nombres, lo cual significa que ese SVG es el espacio de nombres por defecto para todos los elementos contenidos en elemento con el atributo “xmlns”.

<svg xmlns=”http://www.w3.org/2000/svg“…>
  <rect …/>
</svg>

Atributos del elemento “svg”

  • xmlns [:prefix] = “resource-name”
    Atributo estándar de XML para indentificar un espacio de nombres de XML. 
  • version = “<number>”
    Indica la versión del lenguaje SVG.
  • baseProfile = profile-name
    Describe el mínimo perfil de lenguaje SVG que el autor cree que es necesario para una correcta visualización del SVG. El atributo no especifica ninguna restricción de proceso, puede ser considerado como un metadato.
  • x = “<coordinate>”
    La coordenada del eje x de la esquina de una región rectangular en la que está incrustado el elemento “svg”. Si no es especificado el atributo, tomará el valor por defecto que es 0.
  • y = “<coordinate>”
    La coordenada del eje y de la esquina de una región rectangular en la que está incrustado el elemento “svg”. Si no es especificado el atributo, tomará el valor por defecto que es 0.
  • width = “<length>”
    Para los elementos fuera del “svg”, es la anchura de el fragmento de documento SVG. Para los elementos incrustados en el “svg”, es la anchura de la región en la cual el elemento “svg” está situado.
    Un valor negativo es un error. Un valor 0 evita que el SVG se procese.
  • height = “<length>”
    Para los elementos fuera del “svg”, es la anchura de el fragmento de documento SVG. Para los elementos incrustados en el “svg”, es la anchura de la región en la cual el elemento “svg” está situado.
    Un valor negativo es un error. Un valor 0 evita que el SVG se procese.
  • viewBox
    Si un documento SVG quiere ser usado como componente en otro documento, el es frecuente que el autor quiera incluir un atributo viewBox en el elemento “svg” externo del documento referenciado. Este atributo provee una forma sencilla de diseñar documentos SVG para escalarse y ajustarse a un marco (viewport) arbitrario.

Grupos: El elemento “g”

El elemento “g” es un contenedor para agrupar los elementos gráficos referenciados.
La construcción de grupos, cuando son usadas con los elementos “desc” y ”title” proveen información adicional sobre la estructura y la semántica de un documento.

Un grupo de elementos, al igual que los objetos individuales, pueden ser nombrados usando el atributo “id”. Los nombres de los grupos son usados para diversos propósitos cómo la animación o la reusablilidad de los objetos. Por ejemplo:

<?xml version=”1.0″ standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
  “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd“>
<svg width=”5cm” height=”5cm” version=”1.1″
     xmlns=”http://www.w3.org/2000/svg“>
  <desc>Two groups, each of two rectangles
  </desc>
  <g id=”group1″ fill=”red” >
    <rect x=”1cm” y=”1cm” width=”1cm” height=”1cm” />
    <rect x=”3cm” y=”1cm” width=”1cm” height=”1cm” />
  </g>
  <g id=”group2″ fill=”blue” >
    <rect x=”1cm” y=”3cm” width=”1cm” height=”1cm” />
    <rect x=”3cm” y=”3cm” width=”1cm” height=”1cm” />
  </g>

  <!– Show outline of canvas using ‘rect’ element –>
  <rect x=”.01cm” y=”.01cm” width=”4.98cm” height=”4.98cm”
        fill=”none” stroke=”blue” stroke-width=”.02cm” />
</svg>

Un elemento “g” puede contener otros elementos “g” anidados, con una profundidad arbitraria. Cómo se ve en el siguiente ejemplo:

<?xml version=”1.0″ standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
  “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd“>
<svg width=”4in” height=”3in” version=”1.1″
     xmlns=”http://www.w3.org/2000/svg“>
  <desc>Groups can nest
  </desc>
  <g>
     <g>
       <g>
       </g>
     </g>
   </g>
</svg>

Referencias: El elemento “defs”

SVG permite el uso de referencias URI a otros objetos. Por ejemplo, rellenar un rectángulo con gradientes lineales, primero hay que definir un elemento “linearGradient”’ y darle un ID:

<linearGradient id=”MyGradient”>…</linearGradient>

Después hay que usar la referencia al gradiente lineal como valor para la propiedad “fill” del rectángulo:

<rect style=”fill:url(#MyGradient)”/>

Las referencias URI pueden ser definidas de las dos siguiente formas:

<URI-reference> = [ <absoluteURI> | <relativeURI> ] [ “#” <elementID> ]   
<URI-reference> = [ <absoluteURI> | <relativeURI> ] [ “#xpointer(id(” <elementID> “))” ]

donde <elementID> es el ID del elemento referenciado.

El elemento “defs” es un contenedor para elementos que son referencidos. Por razones de entendimiento y accesibilidad, es recomendable que, siempre que sea posible, los elementos referenciados serán definidos dentro de un elemento “defs”.

El modelo de contenido de “defs” es el mismo que para el elemento “g”. Sin embargo, los elementos de “defs” no serán visualizados directamente, si no tendrán que esperar a ser referenciados, este funcionamiento es idéntico al de un elemento “g” con la propiedad “display” igual a “none”.

El elemento “use”

Todo elemento “svg”, “symbol”,”g”, elementos gráficos u otro “use” es potencialmente un objeto plantilla que puede ser re-usado (es decir, “instanciado”) en un documento SVG usando el elemento “use”. El elemento “use” hace referencia a otro elemento y indica que el contenido gráfico de ese elemento es incluido/dibujado en el momento indicado en el documento. Al contrario del elemento “image”, el elemento “use” no puede referenciar ficheros enteros.

El elemento “use” tiene varios atributos opcionales (x, y, width, height) que pueden ser usados para posicionar el elemento referenciado en una región rectangular según el sistema actual de referencias.

El efecto del elemento “use” es cómo si los elementos referenciados con todos sus descendientes fueran clonados en el árbol del documento XML justo donde estaba el elemento “use”. A continuación hay un pequeño ejemplo de el uso del elemento “use” con un “rect”.

<?xml version=”1.0″ standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
  “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd“>
<svg width=”10cm” height=”3cm” viewBox=”0 0 100 30″ version=”1.1″
     xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink“>
  <desc>Example Use01 – Simple case of ‘use’ on a ‘rect'</desc>
  <defs>
    <rect id=”MyRect” width=”60″ height=”10″/>
  </defs>
  <rect x=”.1″ y=”.1″ width=”99.8″ height=”29.8″
        fill=”none” stroke=”blue” stroke-width=”.2″ />
  <use x=”20″ y=”10″ xlink:href=”#MyRect” mce_href=”#MyRect” />
</svg>

Que visualmente sería equivalente a este otro documento:

 <?xml version=”1.0″ standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
  “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd“>
<svg width=”10cm” height=”3cm” viewBox=”0 0 100 30″
     xmlns=”http://www.w3.org/2000/svg” version=”1.1″>
  <desc>Example Use01-GeneratedContent – Simple case of ‘use’ on a ‘rect'</desc>
  <!– ‘defs’ section left out –>
  <rect x=”.1″ y=”.1″ width=”99.8″ height=”29.8″
        fill=”none” stroke=”blue” stroke-width=”.2″ />
  <!– Start of generated content. Replaces ‘use’ –>
  <g transform=”translate(20,10)”>
    <rect width=”60″ height=”10″/>
  </g>
  <!– End of generated content –>
</svg>

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: