[Plugin] : SVG Canvas (vector graphics !)

Post your completed addons to share with the community

Post » Mon Apr 16, 2012 9:53 pm

@Pode
I think it's the multitouch one
Edit. http://www.scirra.com/forum/plugin-multi-touch_topic49525.htmlsepteven2012-04-16 21:54:11
B
44
S
12
G
13
Posts: 628
Reputation: 10,471

Post » Tue Apr 17, 2012 4:03 pm

@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 :
[QUOTE]
"<img src='http://dl.dropbox.com/u/18104402/Contorno_do_mapa_do_Brasil.svg'>"
[/QUOTE]
instead of just
[QUOTE]
"http://dl.dropbox.com/u/18104402/Contorno_do_mapa_do_Brasil.svg"
[/QUOTE]

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
[QUOTE]
"<image x='10' y='20' width='100%' height='100%' xlink:href='http://dl.dropbox.com/u/18104402/Contorno_do_mapa_do_Brasil.svg'/>"
[/QUOTE]
But since browser's parsers are pretty flexible, the previous strings should work also .Pode2012-04-17 16:07:04
B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Post » Wed Apr 18, 2012 2:05 am

@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
B
126
S
7
G
4
Posts: 185
Reputation: 7,233

Post » Sat Apr 28, 2012 5:43 pm

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.
B
1
Posts: 7
Reputation: 239

Post » Sat Apr 28, 2012 6:05 pm

B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Post » Sun Apr 29, 2012 4:37 am

@Pode: Well i've not even used Construct yet, let alone your plugin! lol so i'm not sure how it all works, but as far as i can see with your plugin i could only link to a URL to insert an SVG graphic?

But i need something so that i can make SVG graphics with Adobe Illustrator (for example) and then import that SVG graphic into Construct. Because i'm making a Metro app for Windows 8 and cant have external URL links, all the graphic files have to be included in the app itself.Beany2012-04-29 04:40:14
B
1
Posts: 7
Reputation: 239

Post » Sun Apr 29, 2012 6:42 am

@Beany, I've not used Illustrator in a great many years so I'm not sure about SVG exporting with it, but as far as I've seen, this plugin has been able to render any standards-based SVG.

What that means is that you can export to SVG format from Illustrator (assuming it's possible), then copy-paste the entire file into a variable in Construct 2. It's a bit of a stretch since the file-size would likely be enormous, but I believe that would be possible.

As a brief example, here's a .capx file containing a butterfly rendering from some SVG code attained here.

SVG Canvas butterfly example: svg-canvas-butterfly.capx

I should mention, copy-pasting massive strings like that takes a bit of work. Construct 2 will only accept pasted strings that have newlines removed. I ran that butterfly SVG code through a search-replace in Notepad++ before pasting it into the project.

It takes a bit of work, but this is more of a proof of concept than anything.Ugotsta2012-04-29 06:42:42
B
126
S
7
G
4
Posts: 185
Reputation: 7,233

Post » Sun Apr 29, 2012 9:06 am

@Beany : @Ugotsta is right (thanks Ugotsta for the detailled answer !).
You can paste whole SVG files inside var.
You can ask @Ahsley if he can do something about the newline problem.
B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Post » Sun Jun 10, 2012 4:02 pm

Hi Pode
Just thought I would post some stuff related to SVG Canvas plugin-

1, This example shows some of the shapes that the current SVG Canvas plug (podes) supports.

RUN CAPX


2, This is a HTML5 CANVAS div (podes) that contains the SVG EDIT project.


START SVG EDITOR

chrisbrobs2013-01-24 23:27:12
B
19
S
6
G
7
Posts: 1,206
Reputation: 7,300

Post » Sun Jun 10, 2012 7:15 pm

I forgot to add this, to my previous post-

"<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><image xlink:href="images/mypic.png" id="svg_4" height="48" width="48" y="96" x="98"/></svg>"

This allows you add a image directly in the canvas, in this example -"images/mypic.png". Its probably already been covered but I'm usually a couple of weeks behind on stuff.

B
19
S
6
G
7
Posts: 1,206
Reputation: 7,300

PreviousNext

Return to Completed Addons

Who is online

Users browsing this forum: No registered users and 0 guests