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.
blog_sending_error
blog_sending_success

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í