Everything You Need to Know About SVG | Hacker News Reader

Everything You Need to Know About SVG

css-tricks.com

138 pointsskilled33 comments

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#/

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

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/

This allows you to spot 'obvious' optimisations.

I once walked a designer through the process of "cleaning" an SVG from illustrator, and once they learn, it's not too bad.

I recently discovered that inkscape has a "clean svg" output option which is ok for the most part. Kind of a happy medium (but I do simple stuff).

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?

Not that I remember. But latest AI has improved opening and exporting the odd ones.

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.

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.

I think Flash itself could export SVG. Illustrator got that ability, too. Can't remember how much animation/interaction there was, though.

> 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

Thanks! As per this (really good) article https://medium.com/@fmuaddib/the-following-are-the-possible-...

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

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.

Not on Firefox on Linux.

Not on my mac.

Not in Brave on Windows

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

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

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

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

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.

You could use <g> tags for this, e.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.

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!

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

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.

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

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

How can you complain about SVG? It's all of the convolutedness and exploitey goodness of the web, but for vector graphics!

An age of miracles I tell you.

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.

> Flash's vector graphics make SVG look bad

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.

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

Can you ELI5 Why?

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

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

Reply on news.ycombinator.com