Shop Forum More Submit  Join Login
SVG Animation Tutorial 1: BALLS by MisterAibo SVG Animation Tutorial 1: BALLS by MisterAibo
Share and enjoy!

The promised header:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="200px" height="800px" version="1.1"
xmlns="http://www.w3.org/2000/svg">


(Did you know the automated links on dA can be a real pain?)

More about coding SVG: w3.org

I appreciate any input and suggestions for future tutorials.
Add a Comment:
 
:iconmillennialdan:
MillennialDan Featured By Owner Feb 10, 2013  Hobbyist
Sooooooooo... please tell me there's an easier way to accomplish all this with Inkscape's GUI or something. 8(
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Feb 10, 2013
No.

But I'm kinda working on a workaround.
Reply
:iconmillennialdan:
MillennialDan Featured By Owner Feb 10, 2013  Hobbyist
Oh. Well drat... but hey, that'd be awesome if you did!
Reply
:iconambassad0r:
Ambassad0r Featured By Owner Sep 9, 2012  Hobbyist Digital Artist
Okay, and where is second part?
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Sep 9, 2012
I haven't made it yet. I will, one of these days, when I have the time.
Reply
:iconambassad0r:
Ambassad0r Featured By Owner Sep 9, 2012  Hobbyist Digital Artist
Good, will be waiting
Reply
:iconsircxyrtyx:
SirCxyrtyx Featured By Owner Apr 20, 2012
That's so much simpler than I thought it would be. It's also about 30 fewer lines of code than it would take to do the same thing in actionscript.
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Apr 20, 2012
SVG animations are relatively easy. I'd recommend you to look at this - even if that is a bit more complex, it can still show you how the different types of animation work. And the code is actually properly commented!
Reply
:iconsircxyrtyx:
SirCxyrtyx Featured By Owner Apr 20, 2012
Yay for commenting! I'm a terrible person and never comment my code.

That file was a little intimidating (9183 lines?). I think I got the gist of it though. One question: I'm assuming you made all the graphics in Inkscape. When animating, how do you find the relevant <path> in the SVG code?
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Apr 21, 2012
I usually create a single path - in a special layer. I duplicate it so it has the same number of points, adjust it and do it again for every other interpolation "stop". I end up with about three to five paths. Then I use the inkscape's XML editor. It automatically finds the selected element, so changing the id of any path (or group) I need to work with later is pretty easy.
Oh, and there are some issues with parts of the code inkscape generates.
One, it uses some of its own attributes, like inkscape:collect. Some browsers are really confused by those, and you have to get rid of them when you validate it. Yes, validate. With the validator.
Second, as I said on several occasions, inkscape sometimes copies all of its code for the various patterns and gradients. This amounts to over nine thousand lines of parasitic code (not kidding). You have to keep a look out for that and remove it in the final version as well. That goes double for when you're creating a vector resource - since the ids are randomly generated, when you import the resource, you'd basically put 2 MB of worthless data into your vector. If you do that for a few times, you'll end up with a file that's ridiculously huge and inkscape will probably crash trying to edit it.
Oops, I got side-tracked. I'm working on an "inkscape trimmer" - a web-based application to get rid of those problems - but it has some issues so far.
Anyway, even though nine thousand lines of code might look scary, you don't have to read them. You just insert a few tags here and there. If you separate the important things into groups and name them properly, it'll be really easy. I usually spend about as much time on making the vector as I do on scripting, and most of the scripting is either optimizing or just plain dicking around.
Reply
:iconsircxyrtyx:
SirCxyrtyx Featured By Owner Apr 23, 2012
Just looked at the SVG source for one of my vectors, and finding a path is actually super easy. I obsessively name every path and group, and apparently Illustrator saves those names as id attributes. This makes my SVGs incredibly readable. I'm a little excited about that.
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Apr 24, 2012
Yes, XML is incredibly readable, isn't it? You just have to get over the first fear of diving into the unknown and you'll be pretty happy with the results.
Inkscape's problem is that it sacrifices code's validity by using its own attributes. That's because its predecessor is sodipodi which started this.
And it's actually kinda useful, since otherwise, defining "layers" and whatnot would require the id to be in special format (like having some sort of prefix) or make a new type of <g> object altogether (which is even worse than adding some attributes). The other thing is that SVG can't handle things like pivot points that great. They're actually just (0,0) of the image, moved and shifted by all the transformations you make. You have to think about that when you animate, though. But then again, when you get used to it, it's not that bad.
I have no idea how illustrator can manage, but then again, they have the manpower to come up with the weirdest shortcuts. I'd actually like to see the code of some illustrator made SVG. Maybe it's because SVG isn't its natural file format - you can always clean the file up when you export it.
That's basically the gist of it - illustrator has the advantage of playing on its own turf. It doesn't have to find loopholes in the rules, but it uses file format that nobody else understands. I'd wager it's not that readable, too.
Reply
:iconsircxyrtyx:
SirCxyrtyx Featured By Owner Apr 24, 2012
If you want to look at an Illustrator SVG, I have links to the SVGs in the description of all my vectors. This one:
[link] is a pretty well organized and labeled example. (except for the eyes. Illustrator has issues with SVG clipping paths and opacity masks. This usually only leads to terribly organized groups, but It will occasionally apply masks to the wrong things, or randomly rotate masks by about 30 degrees)
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Apr 24, 2012
Just as I thought - the export script does a superb job. Point for illustrator, I guess.
Do you draw the lines free-hand, or do you plot them?
Maybe you translate strokes to outlines? It's just that most of your lines have a lot unnecessary points in them (like the pony's right foreleg). Although it doesn't hinder the picture's quality, it makes the code longer. And more importantly, any interpolation based animation of that shape will take lot more raw power to achieve.
The masks sound like a problem with merging of multiple transformation matrices. Maybe the clip path doesn't handle that well.
By the way, I just found an incredibly simple way to remove the inkscape ballast code. Just copy the image and paste it in a new SVG. It'll only import necessary assets.
You still have to get rid of all the other attributes, but that's the question of two regular expressions... :)
Reply
(1 Reply)
:iconsircxyrtyx:
SirCxyrtyx Featured By Owner Apr 23, 2012
An Inkscape trimmer sounds very useful. As far as I know, Illustrator doesn't add in its own data to an SVG, but it also doesn't have a handy XML editor to easily find paths.
Reply
:iconsistemx:
sistemx Featured By Owner Feb 22, 2012
Oh it's Html5!
But wait wait. Life is not as simple as balls...
I mean When I'm reading a svg, Honestly I don't know what I'm reading.. there are to many things in an svg.
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Feb 22, 2012
It helps to go in it bit by bit. The kind of code inkscape makes, for instance, is riddled with a lot of ballast that the editor uses to its own ends. So starting by making balls move from scratch is pretty important - just so you know where to put the appropriate tags and what they do.
Orientating in complex code - like when you make an image in inkscape and devote a lot of time to it - is difficult. It's kinda like walking up to other programmer's code - and inkscape doesn't comment. A nice crutch is the use of the actual XML mini-editor that's built in in inkscape. You can use it to re-name the key elements you want to animate and then just find them by their tags with a real XML editor.
I will make a tutorial about this. It's a kind of a perverted concept for graphic artist to grasp, but it's not that uncommon for programmers.
Reply
:iconsistemx:
sistemx Featured By Owner Feb 22, 2012
Nah Uhm I'm ok with programming. I've been trying to learn VBS, C++, Actionscript 2/3.0, so it's not really new for me. (Maybe I'm just lazy.)
Lol.

I'll be using inkscape. I hope I don't get confused with those nodes.. (there are plenty)
Reply
:iconsistemx:
sistemx Featured By Owner Feb 22, 2012
i didn't saw that one
Reply
:iconstatoose:
statoose Featured By Owner Feb 5, 2012  Hobbyist Digital Artist
I love balls! :dummy:


/stupidimaturejoke
Reply
Add a Comment:
 
×




Details

Submitted on
February 5, 2012
Image Size
2.3 MB
Resolution
1280×9763
Link
Thumb

Stats

Views
1,892
Favourites
25 (who?)
Comments
22
Downloads
100