[Plugin] : SVG Canvas (vector graphics !)

<font color="red">Update : v1.11 - 11 october</font>

Here's a small update.

The SVG Canvas now starts with a default SVG content string.

There's also a new method "change Text Content", to change a text string added to the SVG.

<img src="https://dl.dropbox.com/u/1412774/SVGTextChangeDemo/demo.png" border="0">

A quick demo, with NRABrazil SVG example :

https://dl.dropbox.com/u/1412774/SVGTextChangeDemo/index.html

The new plugin : https://dl.dropbox.com/u/1412774/SVGTextChangeDemo/pode_svg.1.11.zip

The .capx : https://dl.dropbox.com/u/1412774/SVGTextChangeDemo/SVGTextChangeDemo.capx

I also realised that I never uploaded the original .capx for the original demo (the one with the screenshot further down) !

Here it is : https://dl.dropbox.com/u/1412774/SVGTextChangeDemo/SVGCanvasDemo.capx

____________________________________________________

<font color="red">Update : v1.1 - 16 august</font>

Here's a quick update. There's now the possibility to dump the SVG canvas as a base64 string, to load it inside a Sprite !

<img src="https://dl.dropbox.com/u/1412774/SVGbase64Demo/demo.png" border="0">

If I remember well, chrisbrobs asked for it...

There's also a new icon.

The demo : https://dl.dropbox.com/u/1412774/SVGbase64Demo/index.html

The .capx : https://dl.dropbox.com/u/1412774/SVGbase64Demo/SVGbase64Demo.capx

The plugin : https://dl.dropbox.com/u/1412774/SVGbase64Demo/pode_svg.1.1.zip

(It's not working in WebGL mode, because Ashley is already dumping canvas to write them as webgl textures, and that means ERROR MODE 18 for me - domain error. Same as CORS. It's logical, but annoying. When I'll have more time, I'll implement the workaround.)

_____________________________________________________

Edit : I didn't realised, but for those who ddin't know it : SVG means vector graphics.

The devil made me do that, sorry...

Do you like SVG ?

<img src="http://dl.dropbox.com/u/1412774/SVGCanvas/demo.png" border="0">

Here's a little plugin I started, to use SVG with C2.

It's the beginning, but you can use circle, rectangle (with rounded corners, yay ! ;)), paste SVG string (from image, for example).

You can also change a property from a specific item after it has been drawn, alhtough you need to the SVG name of the property (for example, the circle radius in SVG is just r).

It should work on all browser, even mobile (and it's a pain to debug on all platforms...)

You can expect more shapes in a near future, and filters effects (a bit like shaders, in SVG).

The plugin : http://dl.dropbox.com/u/1412774/SVGCanvas/pode_svg.0.1.zip

The demo uses septeven MultiLines plugin (http://www.scirra.com/forum/plugin-multiline-box_topic48898_post307078.html) : http://dl.dropbox.com/u/1412774/SVGCanvas/index.html

Thanks for this. I like Veector Graphics.

Html5 constructors need SVG to fight against Adobe Air. Thnaks!

Nice plugin. <img src="smileys/smiley2.gif" border="0" align="middle">

Pode: Do you want to render all the svg with your plugin (- I haven't looked in the source). Suggestion: Perhaps it's possible to build a plugin with svg-edit. With some luck this could work even during edittime.

Joe7 : yes, I'm planning to support most of the SVG spec. And for what's not implemented, you can still paste your svg command in plain text, to let it render what I didn't made yet ;).

It's not going to be possible to make it work during edittime, since Ashley isn't using a browser library at edittime.

Hello,

I've download your plugin and I just wanted to ask. How did you get it to load an image from an URL? Is this another plugin or is it a part I'm missing?

Thanks

This is very cool! Thank you! <img src="smileys/smiley20.gif" border="0" align="middle" />

DalekAddison : you just provide the URL of the image.

Hi,

Please I need a help with this test, it do not work, why?

SVG test.capx

NRABrazil: when I try to open the file, it says that I'm missing the Touch2 plugin. Which one is it ?

Pode

I think it's the multitouch one

Edit. scirra.com/forum/plugin-multi-touch_topic49525.html

NRABrazil:

I didn't test all the way to include an external SVG in my plugin (instead of directly dumping the content of the svg, you want to just paste the URL).

One way to do that and that I have tested, is to paste the following string :

"<img src='http://dl.dropbox.com/u/18104402/Contorno_do_mapa_do_Brasil.svg'>"

instead of just

"http://dl.dropbox.com/u/18104402/Contorno_do_mapa_do_Brasil.svg"

I have tested it on FF and Chrome, and it works.

Edit: by the way, the 'proper' way to embed it in SVG is to use the following string

"<image x='10' y='20' width='100%' height='100%' xlink:href='http://dl.dropbox.com/u/18104402/Contorno_do_mapa_do_Brasil.svg'/>"

But since browser's parsers are pretty flexible, the previous strings should work also <img src="smileys/smiley2.gif" border="0" align="middle" />.

Pode, thanks so much for this plugin, it paves way for so many possibilities that are otherwise not quite so easy in C2 currently.

I've got a bunch of examples I'm working on, as I'm trying to get a better idea for what all can be done with this, but I've got a few examples up in case anyone else is interested.

Here's one: SVGCanvas Blurring Text

That said, I notice the Destroy action doesn't currently remove the SVG from the DOM. Can that be done?

Also, if I might make a special request, could you possibly add a Text option, like the Circle option? One where it would be easy to change text at runtime? Attributes can be changed currently, but I can't seem to change the text.

Many thanks again for this!

-DavidM

Can this import SVG's? For instance if i create a SVG graphic with Adobe Illustrator could it import the file? It's just a standard SVG file. And if it dont support this would you be able to add the feature? Thanks.

Beany : You can find some answers to your question here : http://www.scirra.com/forum/plugin-svg-canvas-vector-graphics_topic49410_post323007.html#323007