Array
(
    [0] => Array
        (
            [nombre] => WywRReSlisiM
            [texto] => 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
            [fecha] => 26 de julio de 2012 - 08:33
        )

    [1] => Array
        (
            [nombre] => Imaginanet
            [texto] => Hi, we are not talking here about SVG Viewer plugin, we are just introducing SVG concepts.
            [fecha] => 26 de julio de 2012 - 09:02
        )

)

Miércoles, 11 de julio de 2012

Introducción a SVG

categoría: HTML5 Apps

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.

2 comentarios:

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 WywRReSlisiM - 26 de julio de 2012 - 08:33
Hi, we are not talking here about SVG Viewer plugin, we are just introducing SVG concepts.
comentario de Imaginanet - 26 de julio de 2012 - 09:02

deja tu comentario:

Enviar