Uno de los requistos para flowde y conexo es la creacion en linea de iconos personalizados, además estos deben ser fáciles de almacenar y editar, por eso siempre he pensado que svg es la mejor solucion tanto para crear, editar, guardar y visualizar dibujos sencillos hechos en linea.

One of the prerequisites for flowde and conexo is the online creation of personalized icons, also be this needs to be easy to save and edit, that’s why i have always think that svg is the best solution to create, edit, save, and visualize simple pictures made online.

Por mucho tiempo busque en internet una solución para esto en flash, ya sea AS2 o AS3, pero no puede encontrar ninguna que cumpliera con mis expectativas, por lo mismo decidi crear mi propia clase en actionscript, luego de 3 dias el resultado es bastante aceptable aunque necesita trabajo posterior es lo suficiente para lo que yo necesito.

For a long time, i searched on the internet a solution to this on flash, AS2 or AS3, but i could not find any that met my expectations, that’s why i create my own class on actionscript, after only three days the result was acceptable even if it needs an extra work, but is enough for my needs.

La clase svgViewer soporta los tags :svg, g, path, rect, circle, ellipse, polyline,polygon como todas las implementaciones “pequeñas” de svg que se encuentran en la red no soporta información de arcos. Tambien la clase posee una implementacion bastante simple o ingenua del tag text, ya que no soporta el tag tspan por ahora. Tiene soporte para transformaciones: transtale, rotate, y scale.

The svgViewer class support the tags: svg, g, path, rect, circle, ellipse, polyline,polygon like all the “small” implementations of SVG that you can find on the web it does not supports the crations of arcs. Alo the class has a really simple or naive of the text tag, but it does not supports tspan by now. But it has the support for translate, rotate and scale.

Puedes ver una version funcional aqui: http://www.flowde.com/blog-examples/svg/ donde hay varios ejemplos de crockzilla y otros de herramientas que “imprimen” a svg, estos últimos son bastante complejos asi que la clase no es capaz de renderizarlos correctamente. Puedes descargar los archivos as3 ademas de los svg de prueba aqui: http://www.flowde.com/blog-examples/svg/svgViewer.rar

You can see a functional version here:  http://www.flowde.com/blog-examples/svg/ it also has several examples from crockzilla and other tools that “print” on svg, this last ones are really complex so if the class is not able to render them wright. You can download the as3 and svg files here:  http://www.flowde.com/blog-examples/svg/svgViewer.rar

Para uilizarlo solo necesitas agregar el siguiente codigo:
To use them you just need to add the next code:

       var viewer:svgViewer=null;
       viewer=new svgViewer();
       viewer.loadXML(url);
       addChild(viewer);

Respecto a la rapidez la clase dibuja el tiger.svg de Croczilla en 0.9 segundos, pero vamos que esto es solo para dibujar iconos, asi que por ahora creo que esta bien.

About the speed the class renders tiger.svg from Croczilla in 0.9 seconds, but c’mon is just to render icons, so by now it is ok.

Esta implementación utiliza dos clases de otros autores: El manejo del tag path se hizo utilizando una implementacion que puedes encontrar en el blog de Zaboo que a su vez esta basado en una implementacion que puedes encontrar aqui , también utiliza una clase ColorUtil que permite pasar de un string valido de color a un valor hexadecimal que encontre en un foro de as3, pero no he podido encontrar la direccion asi que agradeceria que alguien si lo encuentra me indicara la direccion para agregarla debidamente.

This implementation uses two classes from other two authors: the tagZaboo blog, that uses an implementation that you can find here, it also uses the class ColorUtil that lets you convert form a valid string to an a hexadecimal value, i found it on a as3 forum. managment of path was made using an implementation that you can find on the

Otras implementaciones de SVG en AS3:
Other implementations of SVG on AS3:

http://code.google.com/p/as3svgrendererlib/ intetente correr butterfly.svg de croczilla y no resulto nada bien.
http://code.google.com/p/as3svgrendererlib/ i tried to render butterfly.svg from croczilla and it did not result very well.
http://memo.tv/drawing_and_exporting_svg_from_flash_as3 una implementación bastante sencilla para guardar un dibujo a mano alzada en svg.
http://memo.tv/drawing_and_exporting_svg_from_flash_as3 a really simple implementation is really simple to save a draw on SVG.

µSprite es un editor que te permite pasar de codigo svg a codigo en as3, nunca me parecio buena idea guardar en el servidor un codigo as3 para dibujar por lo que a pesar de verse como buena implementacion decidi por no usarlo.
µSprite it’s and editor that allows you to convert svg code to as3 code, it was never a good idea to save as3 code on a server. Even if it is good i did not use it.

La clase en cuestion es un trabajo no terminado asi que agradeceria cualquier ayuda que pudieran dar.
The class is not a completed work i would be glad of any help.

UPDATE: There is and update from the Zavoo blog, but it only works on Flex, this (the svgViewer is intended to use on Flash)

Tags: actionsctipt, AS3, MovieClip, Scalable Vector Graphics, SVG

This entry was posted on Sunday, April 13th, 2008 at 2:05 PM and is filed under AS3, SVG. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.