Canvas vs SVG : Round One

Publicadas por Jee Ba


En el mundo de la web todo evoluciona rapidamente. Ciertamente uno de estos aspectos es la creacion de imagenes dinamicamente con puro Javascript. Entre los mejores metodos para hacer esto (ademas de usar tecnolgias de terceros como Flash o Silverlight) tenemos a dos grandes ganadores SVG y Canvas.

Algo Sobre SVG:
Acronimo de Scaleable Vector Graphic, es simplemente nuevas etiquetas html etiquetas XML que definen rectas, circulos y demas cosas graficas. Como es codigo HTML XML, en teoria podrias usar una libreria como jquery para darle programabilidad a cada objeto por medio de funciones DOM. En castellano, si haces click en un circulo que has creado en svg, que tiene el id = 'circulo123', haces que desaparezca con un simple hide() en jquery.

Yo no he trabajado directamente con SVG, pero si he usado la libreria Raphael, que me permitio hacer los graficos en movimiento del Metacañon en mi juego Xeno. La curva de aprendizaje es relamente facil si conoces que es un cuadrado y un circulo ^^.

El soporte en Browser pues casi todos los navegadores soportan SVG salvo como de costumbre el escandaloso IE en todas sus versiones. Pero si usas la libreria Raphael, puedes rendear sin problemas en IE, ya que usa VML que es como el SVG de microsoft. Gracias Microsoft por ahcernos la vida tan facil.

UPDATE: Tal parece que IE se sube al carro del SVG. Parece que su version 9 traera soporte nativo para SVG, algo es algo.

Resumiendo SVG es codigo html que te permite hacer dibujos. les aconsejo cheken la pagina de Raphael para que se den cuenta del poder que tiene esta libreria.

Y Algo Sobre Canvas:
Canvas es codigo interpretado Javascript para hacer bitmaps, no es html como SVG no es un lenguaje de marcacion como SVG, si no que tienes que crear y llamar funciones de javascript para crear imagenes. En teoria es mas rapido que SVG para graficos en movimiento. Ahora de Canvas he tocado poco pero tambien tiene su libreria estrella Processing.js, creada por el popular John Resig, autor de Jquery.

Canvas funciona en una etiqueta Xhtml5 del mismo nombre, es ahi donde se aplican todas las funciones en javascript para aplicarle.

Ahora Canvas a pesar de ser un estandar de HTML5 no esta completamente definida en todos los navegadores. Ya ni quiero mencionar al IE, simplemente apesta en cualquier cosa referente a Html5. En este caso Processing.js no puede hacer mucho al respecto. Por supuesto hay un emulador de Canvas en IE, pero es recontra lento. Microsoft por supuesto apunta a que usen su silverlight.

Y Ahora que hacemos?
Bueno, lo mejor no es competir, si no complementar, mientras SVG sirve perfecto para graficos vectoriales, Canvas es mejor para trabajar en bitmaps.

Aunque si yo creara un juego de estrategia o un rpg, usaria extra SVG debido a que me es mas facil programar el mouse para trabajr con imagenes y sus subsecciones. Ahora he visto juegos de accion creados con Canvas, que seria lo ideal ya que Canvas es de hecho, mas rapido.

Pero recuerden que Canvas no funciona en IE, SVG tampoco pero la libreria Raphael si, asi que entre Canvas y SVG, por ahora me quedo con Raphael :P


Y para termiar les dejo este excelente Paper sobre un programa de dibujo grafico que usa estos dos metodos. Las comparaciones simplemente los dejaran atonitos.

¿Te gusta la pagina?, socializame haciendole click a tu color preferido:

Add to Technorati Favorites Digg! del.icio.us.me

4 comentarios:

  1. rubén dijo...

    Excelente artículo. No conocía la librería raphael

    Pero permiteme que te corrija un pequeño detalle en:
    Canvas es codigo interpretado Javascript para hacer bitmaps, no es html como SVG
    SVG no es html, creo que lo que querías decir era algo como
    Canvas es codigo interpretado Javascript para hacer bitmaps, no es un lenguaje de marcado como SVG

    Saludos

  2. Jeeba dijo...

    Tienes razon en eso Ruben, SVG es un lenguaje de marcado,gracias por la acotacion, errar es humano, arreglarlo es divino =D

  3. Pablo Di Leva dijo...

    Bueno el articulo, te corregiría tambien con respecto a SVG, solo para no confundir al lector:

    Al principio dices:

    "Scaleable Vector Graphic, es simplemente nuevas etiquetas html que definen rectas.."

    En realidad SVG es XML, ni siquiera es un lenguaje, sino que es una especificacion para crear graficos vectoriales con XML puro. Ademas no es nuevo, existe creo desde principios del 2000.


    Bueno eso nada mas. Saludos!

  4. Jeeba dijo...

    Gracias por el Comment Pablo, y bueno solo para afinar algunos puntos:
    Aunque en realidad SVG no es HTML (como dices es XML, voy a darle una segunda revisada a todo el articulo), XML si es un lenguaje ( de marcado, pero lenguaje al fin y al cabo) por lo tanto, siendo SVG una especificaion del mismo, es otro lenguaje de marcacion, como XHTML o MathML.

    El parrafo realmente deberia de decir "Scaleable Vector Graphic, son etiquetas XML que definen rectas..". Lo de nuevo era con respecto a HTML (son nuevas etiquetas a las que existen en HTML, aunque no es HTML), solo que en realidad esta muy mal escrito.
    Saludos

Publicar un comentario