Introducción a SVG

Un SVG, como su nombre indica, es un gráfico vectorial escalable. ¿Qué quiere decir esto? Pues que el gráfico se construye con primitivas como líneas, curvas, polígonos, etc. Y de esta forma se puede escalar sin perder calidad. A día de hoy todos los navegadores modernos soportan SVG, pero no todos implementan correctamente todo el API javascript que introducen para un mayor control de los trazos y animaciones.

SVG incorpora una forma de realizar animaciones y transformaciones sobre sus objetos. En el caso de las transformaciones, estas nos permiten trasladar elementos, rotarlos, escalarlos y torcerlos. Por ejemplo:

    <g transform="translate(10,0)">
        ...
    </g>

De esta forma estamos trasladando el contenedor g (g se utiliza para agrupar elementos) 10 puntos en el eje x y 0 en el eje y.

Entre los elementos que podemos definir dentro de un SVG, se encuentran:

- Líneas
- Rectángulos
- Círculos
- Elipses
- Caminos
- Polígonos
- Textos

Por ejemplo podemos definir una línea de la siguiente manera:

<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"/>

De esta forma dibujamos una línea desde el punto 0,0 de nuestro eje de coordenadas, hata el punto 200,200. En en el estilo le definimos que tendrá una anchura de 2 y será de color rojo. El resto de elemento son similares, es decir, se definen sus propiedades y su estilo, así por ejemplo para definir un rectángulo bastará indicar la anchura y altura que deberá tener. Los caminos (path) son algo más complejos y de los que más libertad nos dan pues se van construyendo con una serie de construcciones como curvas de bezier o simples líneas.

Una vez tengamos el SVG dibujado no hay que olvidar definir su viewbox, es decir la anchura y altura que tiene inicialmente, para posteriormente indicar la anchura y altura de visualización actual. Ejemplo, si nuestro gráfico se hace pensando para 800x600, entonces nuestro viewbox será:

viewbox="0 0 800 600"

Siendo los dos primeros valores, el mínimo valor de "x", y el mínimo valor de "y". Y si nuestra pantalla actualmente es la de un móvil de 500x400, entonces en los atributos "width" y "height" del svg deberemos indicarle dichos valores, para así automáticamente el navegador poder escalar el gráfico correctamente.

Comentarios

Comentario de WywRReSlisiM - 26 de Julio de 2012 - 08:33
Hi again,I just checked out the SVGViewer code from SVN and aniymte I load a SVG file into theviewer I get an error at line 329 of the file: SVGNode.as, this is the line of code thathas a problem:else if( gradient.length ) {it's because gradient' is null. For now I solved it by just changed it to:else if(gradient != null && gradient.length ) {but I thought I'd let you know that because maybe something is not working as expected.Cheers
Comentario de Imaginanet - 26 de Julio de 2012 - 09:02
Hi, we are not talking here about SVG Viewer plugin, we are just introducing SVG concepts.
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario:
Nuestra página web utiliza cookies propias y de terceros, para realizar el análisis de la navegación de los usuarios y así poder mejorar nuestros servicios. Si continúas navegando, consideramos que aceptas su uso. Puedes cambiar la configuración u obtener más información aquí