Día #15 SVG en HTML5

HTML5 nos permite incluir archivos o imágenes vectoriales directamente al código base, lo hacemos por medio de SVG o “Scalable Vector Graphics”. SVG es un archivo especifico que nos permite describir gráficos vectorialmente usando XML, y como debes de saber a diferencia de los formatos tradicionales de la imágenes (GIF, JPEG, PNGY TIFF) las imágenes vectoriales siempre conservan su calidad, nitidez y aspecto no importa cuanto sea esta escalada. Podemos utilizar SVG para hacer muchas tareas que hacemos con CANVAS como alguna figura geométrica, algún texto, degradados o patrones, es muy interesante y yo diría que hacer estas cosas suele resultar más fácil hacerlas con SVG que con CANVAS.

Antes de comenzar miremos el soporte de los diferentes navegadores con respecto SVG.

soporte svg en los navegadores

1 – comencemos dibujando en SVG

El código más sencillo de entender para utilizar SVG es el siguiente:

Donde creamos el elemento <svg> y lo cerramos </svg>, también le damos una altura y anchura, Luego dentro de el elemento svg dibujamos un circulo con cx=50 es decir su centro x es 50 y de igual para el centro y, r=50 es decir su radio es de 50 y fill o relleno será rojo. Lo que nos resultaría un círculo rojo.

Una forma efectiva y de más posibilidades que tenemos con svg es definir los gráficos o contenido por medio de el formato XML.

La declaración seria la siguiente:

Claro, también le podemos dar un id, una altura y una anchura a este elemento si es requerido. Pero no debe de faltar la declaración que nos indica el lenguaje xml.

Dibujando un círculo:

circulo-svg

Ahora dibujemos un cuadrado:

cuadrado-con-svg

Añadiendo algunos estilos a los elementos:

svg-elemento-con-estilo

Y así podemos obtener y jugar con los gráficos o formas que queramos, solo debemos especificar que elemento predefinidos vamos a utilizar y ajustar sus parámetros básicos.

Definición para las demás formas:

  • Rectángulo <rect>
  • Círculo <circle>
  • Elipse <ellipse>
  • Línea <line>
  • Polilínea <polyline>
  • Polígono <polygon>
  • Ruta <path>

 

Ok, en esta primera parte te he presentado lo básico del trabajo con el elemento SVG de HTML5, en la segunda parte vamos a avanzar un poco más. Nos vemos en ella.

Para una información más profunda : http://www.w3.org/TR/SVG11/

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

1 Respuesta

  1. You made some clear points there. I looked on the internet for the subject and found most guys will go along with with your site.