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