Durante el ultimo mes hemos publicado varios post sobre el estándar SVG. Aunque quizás no con la fuerza que se pensaba en un principio, SVG es y será el estándar para graficos vectoriales en la Web.

Os resumimos los puntos tratados:

• SVG (I). Introducción: Introducción al estándar, sus ventajas y posibles usos.

• SVG (II). Estructura de un documento SVG: Detallamos la estructura general de un gráfico SVG.

• SVG (III). Formas Básicas: Dibujamos formas básicas con SVG (rectángulos, círculos, elipses, líneas, polilineas y polígonos).

• SVG (IV). Texto: Texto en un dibujo vectorial.

• SVG (V). Transformaciones: Marcos, sistemas de coordenadas y transformaciones.

Compártelo

El lienzo SVG es infinito por cada una de las dimensiones del espacio, pero solo se puede visualizar una región rectangular finita de él. Esta región rectangular finita es llamada marco (viewport).

El tamaño del marco SVG (es decir, su ancho y alto) es determinado por un proceso de negociación entre el fragmento de documento SVG y sus parientes (reales o implícitos). Una vez que el proceso de negociación esta completado, se provee al agente  SVG de la siguiente información:

• Un número (normalmente entero) que representa el ancho en “pixels” del marco.
• Un número (normalmente entero) que representa el alto en “pixels” del marco.

Usando esta información, el agente SVG determina el marco, un sistema inicial de coordenadas para el marco y un sistema inicial de coordenadas de usuario de forma que los dos sistemas de coordenadas son idénticos. Ambos sistemas de coordenadas son establecidos de forma que encajan con el origen del marco (esquina izquierda superior), y una unidad en el sistema inicial de coordenadas es igual a un “píxel” en el marco. El sistema inicial de coordenadas es llamado también “viewport space” y el sistema inicial de coordenadas de usuario es llamado también “user space”.

La longitud en SVG puede ser especificada en: em, ex, px, pt, pc, cm, mm, in, y también en porcentajes.
Un nuevo “user space” (es decir, un nuevo sistema de coordenadas) puede ser establecido en cualquier lugar de un fragmento de documento SVG mediante la especificación de las matrices de transformación o simplemente mediante operaciones como la rotación, torsión, extensión y translación. Establecer un nuevo sistema de coordenadas usando transformaciones es una de la operaciones fundamentales en los gráficos 2D y el método más usual de controlar el tamaño y  la posición de los objetos gráficos.

También pueden establecerse nuevos marcos.  De esta forma se pueden redefinir el significado de las unidades de porcentaje y proveer una nueva referencia que ajuste un gráfico a un área rectangular determinada.

Lea el resto de esta entrada »

Compártelo

El texto que debe ser visualizado como parte de un fragmento de documento SVG es especificado usando el elemento “text”. Los caracteres son expresados como datos de caracteres en XML dentro del elemento “text”.

Los elementos “text” son visualizados como otros gráficos. Por consiguiente, el las transformaciones del sistemas de coordenadas, los recortes (clipping) y las de funcionalidades de mascaras son aplicadas a los elementos “text” de la misma forma que a las diferentes formas y paths.

Cada elemento “text” produce una simple cadena de texto que será visualizada. SVG no permite una forma automática de saltos de línea o wrapping. Para ello, hay que recurrir a diversos métodos como por ejemplo, poner cada una de las líneas en un elemento “text” diferente.

Lea el resto de esta entrada »

Compártelo

SVG contiene el siguiente conjunto de elementos de formas básicas:

• rectángulos (rectangles), incluidos los rectángulos de esquinas redondeadas.
• círculos (circles)
• elipses (ellipses)
• líneas (lines)
• polilineas (polylines)
• polígonos (polygons)

Matemáticamente, estas formas son equivalentes a un elemento “path” que podría contruir la misma forma. Las formas básicas pueden tener diferentes trazos, rellenos y ser usadas como caminos de corte (clip paths). Todas las propiedades disponibles en los elementos “path” pueden ser también aplicadas en las formas básicas.

Lea el resto de esta entrada »

Compártelo

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>

Lea el resto de esta entrada »