[Plugin] : SVG Canvas (vector graphics !)

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.

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.

Beany : Ugotsta is right (thanks Ugotsta for the detailled answer !).

You can paste whole SVG files inside var.

You can ask — if he can do something about the newline problem.

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

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.

Updated first post, with the possibility of a base64 string dump for the SVG canvas. (Nudge chrisbrobs <img src="smileys/smiley2.gif" border="0" align="middle" />).

Updated first post, with the possibility of a base64 string dump for the SVG canvas. (Nudge chrisbrobs <img src="smileys/smiley2.gif" border="0" align="middle" />).

Thankyou <img src="smileys/smiley4.gif" border="0" align="middle" />

Pode@

'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)'

Can I change the 'fill color' from a single color to a linear gradient after the shape has been drawn ?

For example-

<svg width="264" height="140" xmlns="http://www.w3.org/2000/svg">

<defs>

<linearGradient y2="0.51563" x2="0.47266" y1="0.03906" x1="0.47266" id="svg_4">

<stop stop-color="#e3e3f2" offset="0"/>

<stop stop-color="#4c4c4c" offset="1"/>

</linearGradient>

</defs>

<g>

<title>Layer 1</title>

<rect ry="20" rx="20" id="svg_1" height="128" width="256.99998" y="5.99999" x="3" stroke-width="3" stroke="#000000" fill="url(#svg_4)"/>

</g>

</svg>

Tried various combinations, but I can't get it to work?

chrisbrobs : I made it to work with simple properties. Your gradient is a declared filter. I need to check how I implemented it <img src="smileys/smiley2.gif" border="0" align="middle" />.

chrisbrobs : I made it to work with simple properties. Your gradient is a declared filter. I need to check how I implemented it <img src="smileys/smiley2.gif" border="0" align="middle" />.

Got it working.

1, Add the following in <defs>

<linearGradient y2="0.51563" x2="0.47266" y1="0.03906" x1="0.47266" id="svg_5">

<stop stop-color="#c7caed" offset="0"/>

<stop stop-color="#2b4ce2" offset="1"/>

</linearGradient>

2, Add event to change atribute 'fill="url(#svg_5)"

Regards

<img src="smileys/smiley4.gif" border="0" align="middle" />

Can you add support for something akin to this, where you can specify the width/height of an SVG canvas image from an object in C2? The reason I'm interested in this is that my C2 project autoscales to the browser and using 100% for width/height makes the svg canvas scale depending on where it is located. Also, using your http only trick makes the svg stick to a certain size with no way for me to adjust it.

"<image x='0' y='0' width='SVGCanvas.Width' height='SVGCanvas.Height' xlink:href='http://openclipart.org/people/tzunghaor/orc.svg'/>"

And, even possibly something like this:

"<image x='Mouse.X(\"MainLayer"\)' y='Mouse.Y(\"MainLayer\")' width='PlayerBoundingBox.Width' height='PlayerBoundingBox.Height' xlink:href='http://openclipart.org/people/tzunghaor/orc.svg'/>"

That'd make the svg canvas pretty useful I think.

Also, would it be possible to animate the svgs? I realize I could paste over and over, but could there be an automatic feature of the SVG canvas that you can give it a list of SVG files similar to how the Sprite works? Then we could set the animation frames per second and it would flip? That'd be pretty amazing. Or, what is the recommended way of approaching this.

And, is it possible to do a pure animation like this:

"<image x='0' y='0' width='150' height='150' xlink:href='http://upload.wikimedia.org/wikipedia/en/e/ec/Soccer_ball.svg'/><g><animateTransform attributeName='transform' attributeType='XML' type='rotate' from='0' to='360' begin='0s' dur='3s' repeatCount='indefinite'/>

      <use xlink:href='#black_stuff' stroke='#EEE' stroke-width='7'/>

      <use xlink:href='#black_stuff' stroke='#DDD' stroke-width='4'/>

      <use xlink:href='#black_stuff' stroke='#999' stroke-width='2'/>

      <use xlink:href='#black_stuff' stroke='black' stroke-width='1'/>

   </g>"

I couldn't get this to work, it did not animate.

Thanks.

EDIT: I've decided to retract my question, since I just realized that the SVGCanvas is intended to be stretched across the entire layout and multiple SVG are meant to be paste into it at different locations and sizes. However, this still doesn't address the scaling issue and the lack of a way to access object parameters.

EDIT 2: I just discovered something that makes this impossible to use. The SVGCanvas isn't honoring the layer it has been added to, and it is drawing over all layers. This means that even if I only want it in my background layer it also shows up on my title layout whether I like it or not.

palisade@

EDIT: I've decided to retract my question, since I just realized that the SVGCanvas is intended to be stretched across the entire layout and multiple SVG are meant to be paste into it at different locations and sizes. However, this still doesn't address the scaling issue and the lack of a way to access object parameters.

------------------------------------------------

There is an option 'Change attribute'

For example...if you wanted to change the height of a shape-

<img src="https://dl.dropbox.com/u/22173473/svgchange.png" border="0" />

This would change the height to 80.

Pode will have to answer your other questions.

SVG Edit can not export objects with a blur.

Is there a way to run SVG Edit's PNG export feature through Pode to render the blur as well?

palisade — : I'm planning an update to the SVG plugin.

There's still a problem : when rendering a SVG file to the <canvas> tag, evetyhing works fine with FF (I can do a toDataURL() after that), but Chrome has a browser-wide bug that marks the canvas as tainted when drawing a SVG file to the canvas.

So, since I can't draw SVG vector as classic Sprite objects, I draw that as an overlayed <div>, above everything. That's why I can't respect the layout order. As soons as the webkit bug is closed, I'll change the way it works.

I'll update the plugin with some accessor at that time.

dezigns333 : I don't really understand what you want to do with SVG Edit. Can you provide an exemple ?

Hi Pode — and all others guys,

I am using this plugin to build "talking baloons".

I mount the string, like you can see above:

"<path d=""m 50,5 c -24,0 -44,19 -44,44 l 0,11 c 0,24 19,44 44,44 l 23,0 -2,39 29,-39 330,0 c 24,0 44,-19 44,-44 l 0,-11 c 0,-24 -19,-44 -44,-44 z"" stroke=""black"" stroke-width=""5"" fill=""white"" transform=""scale(1,1)""/><text id=""TextElement"" x=""60"" y="47" style=""font-family:Verdana;font-size:24"">""Ol� motorista, seja BEM-VINDO � Empresa de Cimentos Liz.""</text>"

And it is working fine, BUT when I wanna change the text and resize the SVG, by inserting another string I do not has sucess.

I tryed to destroy the SVG canvas and create a new one, it works but the old one keep showing, and if the new one is smaller there are a trouble.

Anybody can help?