How to export a snap svg with animations as an svg file ?

[melaga...@gmail.com]

Hi everyone,

How to export a snap svg with animations as an svg file ? How to reference/ include the snap library and your code inside the svg file? Any working example?

[Ian]

I don't think you would be able to export Snap animations (unless you had somehow added svg manual animations), as I think these are separate and not SVG animations. As ever I may be wrong though!

You can get the basic SVG (without handlers, animations) from element.innerSVG() or paper.innerSVG();

It also mentioned outerSVG(), but never had that work.

[Ian]

Apologies, I think outerSVG() does work (maybe a version thing or something else I was doing wrong), so you may want to try that first.

[melaga...@gmail.com]

Thanks Ian,

I tried :

s.toString();

s.outerSVG();

both do the same result and its just basic svg without any animations!

I saw this file :

http://phrogz.net/SVG/circleanim.svg

And was thinking to add the snap library and  snap code inside  the svg but it didn't work.

[melaga...@gmail.com]

   Thank you Ian for pointing to the issue #88,

Now the Issue is being solved by the creator:

"I tested Snap inside an SVG document and it works just fine. At least the dev branch. After including the script do the following

var s = Snap(document.documentElement);
// do whatever you want with this
s.circle(100, 100, 50);
s.select("circle");
// etc

Reopen it if you have any particular issues."

Could you check the following  example code to see whats wrong here please: 

<?xml version="1.0"?>
<svg id = "svg" width="250" height="240" viewBox="0 0 250 240"
xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">


<script type="application/ecmascript" xlink:href="https://dl.dropboxusercontent.com/u/140225334/snap.svg-min.js"/>


<script type="application/ecmascript">
<![CDATA[
var s = Snap('#svg.svg');


var c = s.circle(150, 150, 80).attr({
fill: "none",
stroke: 'red',
strokeWidth: 161,
strokeDasharray: "0 600 600 0",
strokeDashoffset: 1000
});


Snap.animate(0,600, function( value ){
c.attr({ 'strokeDashoffset': value })


},5000 );




]]>
</script>

[Ian]

I think you just need to change the original element you are calling Snap on...

var s = Snap('#svg.svg'); to var s = Snap('#svg');

http://jsfiddle.net/6fvG2/

[melaga...@gmail.com]

Thank you Ian, That is awesome!

[melaga...@gmail.com]

Ian, I was just playing around with some codes and noticed that some of the codes wouldn't work if we put them in an svg file. I think when we use the jsfiddel or jsbin we put the code on an html div and that is why it works in an html environment. just try to put them in an svg file and play with them.

 From your examples in your site, some of them don't work in an svg file fromat :

1-Loading SVGs

2-Snap Title Tooltip

3-Snap Dragging with custom handlers

4-Snap Dragging with a plugin, taking into account currentmatrix

5-Snap Drag and Scale

6-Using a Mask in Snap

7-Snap transforms on grouped groups

8-Loading SVG

9-Drawing path, translating and testing points inside

10-Translating a group

11-Animate dash-offset Test

12-Click Handler starting animation

13-Parse SVG Fragment

14-Basic Testing parsing some html foreignobject type stuff

15-Snap Matrix

16-Playing with sliders and knobs

17-Conversion of Raphaels Graffle

18-Snap Free Transform Plugin,..

And some of the areas where it works fine is:

1-animate numbers

2-text announce

3-text slow type

4-Snap/SVG TextPaths

5-Creating a plugin

6-Snap transforms

7-Snap embed an SVG image

8-Stroke Dasharray messing

Any ideas how to work around this issue if you want everything to be in an svg file?

[melaga...@gmail.com]

And here is a link to a working snap in an svg file that could be a base for troubleshooting:

https://dl.dropboxusercontent.com/u/140225334/circleanim.svg

[Ian]

There's something a little strange, not sure if its Snap or something else...I've never played with including js in an svg.

The above code will draw a circle, it will even fill it blue. But after that it stops, and debug3 is never output.

I think its possibly related to this line in snap...

var i = glob.doc.getElementsByTagName("head")[0] 

in toHex

where i is not getting defined. If someone could confirm if this isn't just me, and I'm doing this right (to their understanding) it would be useful.

http://svg.dabbles.info/insidetest.svg

<?xml version="1.0" encoding="utf-8"?> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" id="mysvg"> <script type="application/ecmascript" xlink:href="snap.dev.svg.js"></script>

<script type="application/ecmascript"> <![CDATA[

var s = Snap( "#mysvg" ); console.log('debug1', s); var bigC = s.circle(100,100,75); console.log('debug2', s, bigC); bigC.attr({ fill: "blue" }); console.log('debug3', s); ]]> </script> </svg>

[melaga...@gmail.com]

Ian, Ok, after the updates provided on may29,2014 version 0.3.0, I tried some codes of yours and the followings still won't work( I have provided the error messages from chrome after each title, hopefully it helps to get the issue(s) fixed soon):

1-Loading SVG- Failed to set the 'innerHTML' property on 'Element': The provided markup is invalid XML, and therefore cannot be inserted into an XML document. 

snap.svg.js:3069

2-Snap Title Tooltip- no error message!

3-Loading SVG and animate- Cannot read property 'group' of null 

 circleanim.svg:45

4-Animate dash-offset Test- Cannot set property 'fill' of null  

  snap.svg.js:3307

5-Parse SVG Fragment- Failed to set the 'innerHTML' property on 'Element': The provided markup is invalid XML, and therefore cannot be inserted into an XML document. 

 snap.svg.js:3069

6-Basic Testing parsing some html foreignobject type stuff- no error message!

7-Playing with sliders and knobs- Cannot read property 'rect' of null 

 circleanim.svg:369

8-Conversion of Raphaels Graffle- Cannot read property 'ellipse' of null 

 circleanim.svg:211

9-Snap Free Transform Plugin- Failed to set the 'innerHTML' property on 'Element': The provided markup is invalid XML, and therefore cannot be inserted into an XML document. 

 snap.svg.js:3069

10-Snap matrix, drag, animate on loaded object- undefined is not a function 

 snap.svg.js:1640

[Ian]

I think you will get a few problems just trying to get them to work like that...

1. I'm not sure if you can 'load' a file from an SVG like that. I'm pondering if there would be security issues, but either way it seems to cause an error, when adding the fragment to the innerHTML as none valid XML (I wonder if this is a security thing though, or whether adding fragments like that is a problem).

2. There is the error mentioned with the toHex function in Snap.

3. There also seems to be some errors in css styling, with this.node.style undefined (line 3307).

In other words, some basics seem to work fine. But I'm not quite sure exactly what should work in this scenario. Should all of Snap work from within an SVG ? If so, I don't mind to file some bug reports, and spend a bit more time helping, but not sure some elements are likely/supposed to work. So at that point its quite difficult.

Ian

[melaga...@gmail.com]

Thank you for your time Ian.

Hopefully we get answers to your questions and see if snap is really limited inside an svg document or not then we can decide which way to go.

To help with your first question: Here I have one svg file that is being loaded inside an svg and it works inside an svg document:

https://dl.dropboxusercontent.com/u/140225334/drag-matrix-animate-loaded-svg.svg

but It doesn't work for all of the svgs I have, it works only on a few of them . I haven't checked what is the deferences between those svgs yet. some work and some don't! 

[Ian]

Interesting, thats useful to know.

I think those that fail then could be because they have some other xml at the top like... <?xml version="1.0"?>  try removing a first line like that, so its just svg only and see if that makes any difference.

There's still a couple of other bugs causing issues with svg styling though I suspect, but that example doesn't use them at all.

[Ian]

Btw I would also assume that whilst that loading may work inside the svg

file as shown. I would suspect it won't then work if you link to that svg

from within a webpage as an img tag, so depending on your end aim, it may

be worth checking that aspect first if so.

[melaga...@gmail.com]

Ian, I tried to use 4 different tags (embed, ifram, object, img) to link that svg to a page and using chrome, all fisrt 3 tags  would work , only the img tag wouldn't work. But all 4 tags failed to load the svg file on safari.

And you are right, the xml line is the one that causes no load! so removing that would help.

Now how can we get the answer for the little remaining bugs/ issues for this snap inside svg document? 

Doesn't Mr. Dmitry Baranovskiy visit this group to clarify on this ?!