
Everything You Need to Know About SVG - skilled
https://css-tricks.com/lodge/svg/
======
chrisweekly
CSS-Tricks is a great website.

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#/](http://slides.com/sdrasner/svg-can-do-that#/)

------
Theodores
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...

[https://stackoverflow.com/a/54462467/3917602](https://stackoverflow.com/a/54462467/3917602)

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:

[https://jakearchibald.github.io/svgomg/](https://jakearchibald.github.io/svgomg/)

This allows you to spot 'obvious' optimisations.

~~~
rchaud
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?

~~~
jcdietrich
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.

------
pcmaffey
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.

~~~
CharlesW
> _I 'm surprised though that a Flash-like software tool doesn't exist for
> composing complex SVGs w/ animations and interactions._

It does!
[https://www.adobe.com/products/animate.html](https://www.adobe.com/products/animate.html)

~~~
pcmaffey
Thanks! As per this (really good) article [https://medium.com/@fmuaddib/the-
following-are-the-possible-...](https://medium.com/@fmuaddib/the-following-
are-the-possible-ways-to-create-professional-animations-in-svg-9d4caca5f4ec)

> 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”.

------
saagarjha
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.

~~~
throwmeback
Not in Brave on Windows

~~~
erikig
Haven’t used Brave, how do you like it?

------
wwweston
Was hoping this would have a section titled "how to manage around missing
z-index functionality."

~~~
CharlesW
TIL, thank you. Just so I understand, you're looking for workarounds like [1]?

[1]
[https://codepen.io/osublake/pen/YXoEQe](https://codepen.io/osublake/pen/YXoEQe)

~~~
wwweston
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.

~~~
paulgb
You could use <g> tags for this, e.g.

<svg> <g id="z-order-0"></g> <g id="z-order-1"></g> <g id="z-order-2"></g>
</g>

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.

~~~
wwweston
I like this -- I'm sure there's some annoying corner cases, but at first
glance I think it covers most of the use cases I've worried about. Thanks!

------
byron_fast
It's. Not. Flash. And that's too bad. Flash's vector graphics make SVG look
bad, but they flew too close to the sun.

~~~
pcwalton
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.)

~~~
byron_fast
Yep, always downvotes for Flash. But the editor to create those curves was
second to none.

------
Adamantcheese
At this point it's probably just worth waiting for SVG 2.0 to come out.

~~~
samstave
Can you ELI5 Why?

~~~
jancsika
That's a good question.

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.

[1] [https://www.w3.org/TR/2018/CR-
SVG2-20180807/changes.html](https://www.w3.org/TR/2018/CR-
SVG2-20180807/changes.html)

~~~
sroussey
Could you create an SVG viewer custom element? All contents will be
independent.

