Also, this "SVG Can Do That??" presentation[1] is "old" by internet standards but is still (to me, at least) somewhere between eye-opening and mind-blowing:
I wish I had read this earlier today. I wrote my own mini-Cliff-notes on how to do things in SVG that covers a lot of silly SVG things in a Stack Overflow answer...
The real problem with SVG is that you need to be a techie type rather than a paintbrush wielding type to get the most out of SVG. In companies this is forbidden. You can't have a techie do design. So you have to have off the shelf bloated 'assets' because that is how they come out of Illustrator. I find I always have to roll my own even for the simplest things such as the 'moon' icon that I thought worthy of putting in to a Stack Overflow answer for 'future reference'.
Clearly I will be watching every CSS-Tricks video on this series and I hope that this gets mentioned in it:
I made a SVG shape in Vectr for a typographic logo I was creating (not a designer). The SVG included some text, for which I used one of the Google fonts included in Vectr. When I exported it, the graphic was 400KB or something ridiculous.
I put it into SVGOMg, and it quickly identified the font as the culprit. I removed the font and the file size went to 0.6KB.
Does Illustrator include the file size of the font when it exports to SVG?
In Inkscape there is an option to convert text to paths. This would make the text shapes and then it won't export the font. This is what you want for anything that has fixed text.
Every time I dig a little deeper into svg's I'm amazed at what they can do. Latest exploration - path animations. eg being able to morph one shape into another.
I'm surprised though that a Flash-like software tool doesn't exist for composing complex SVGs w/ animations and interactions. Given how accessible svg outputs are, people could be creating some amazing Flash-like things that can be run just about anywhere. Admittedly, coding svg's can be pretty tricky to learn.
> The former Adobe Flash Pro was fully rewritten by Adobe to migrate from the now obsolete flash animations to the modern SVG animations. You can export the resulting SVG animations along with a custom javascript library, or choose to save in SVG+SMIL using plugins like “flash2svg”.
When you say they can be run just about anywhere, I assime you mean in web browsers. I doubt most image viewers that "support" SVG implement the more powerful features necessary to achieve Flash-like software.
As an aside, the CSS on this website somehow makes it so that there are two scrollbars, one being the styled one and one from desktop Safari, and the they don't seem to line up.
TIL that appendChild will take existing nodes out of their existing spot in a document (as well as the more obvious action of appending them to another node). :)
This is a good start, but it's limited to "move to front." If you wanted to move something between two intermediate planes, you'd have to reshuffle the whole stack.
Then you can change the z-order by moving the element to the appropriate group. Elements are rendered in the order of an inorder traversal which is why this works.
There's also insertBefore, which you can use to move a node anywhere:
parentNode.appendChild(node); // move to top
parentNode.insertBefore(node, parentNode.firstChild); // move to the bottom
parentNode.insertBefore(node, someNode); // move just below someNode
parentNode.insertBefore(node, someNode.nextSibling); // move just above someNode
SVG supports a lot more than Flash did. Flash only supported quadratic Bézier curves, for instance.
(On the other hand, I very much appreciate the simplicity of the Flash approach from a performance point of view. Performance wasn't really a concern when SVG was being developed. Opera's overriding concern with SVG was trying to compete with Flash on features.)
And I suppose by this you mean what you said elsewhere, that Flash's editor is second to none? Because I'm pretty sure that the graphics quality for both is about the same.
SVG is nothing but a bad imitation of the core parts of Flash's vector library. And that's awesome, because even that is decent - when it runs everywhere.
On the one hand, the W3C has this listed under new features for SVG 2.0:
"Allowed <paint> values and marker properties to take the child keyword and <child-selector> values to support ID-less referencing."[1]
That would mean you could have multiple inline SVGs on the same web page and avoid potential nameclashes from gradients and/or patterns having the same id.
On the other hand, that same page lists mesh gradients as a feature of SVG 2.0. I vaguely remember on the SVG archive that the browser vendors said they weren't going to implement that.
Also, this "SVG Can Do That??" presentation[1] is "old" by internet standards but is still (to me, at least) somewhere between eye-opening and mind-blowing:
1. http://slides.com/sdrasner/svg-can-do-that#/