Hacker News Reader

Comment by gibolt | Hacker News Reader

You don't edit raw png values either, with rgb/index values in a list. SVGs are meant to be created and used like any image file.

The fact that they are almost human-editable and can be inlined means we are bound to be disappointed when working with them in this manner

View on HN

I disagree, I routinely manually mess with SVG (even SVG generated with a program like inkscape) because it lets me add interactivity and animations. That's the killer feature for me: you can draw arbitrary vector shapes in a website, then hook into them using javascript the way you would any DOM element. There are a few subtleties to make it work well, but it's pretty straightforward.

Here's an example: https://svkt.org/~simias/up/20210212-185105_svg.png

All the elements and paths are SVG generated from some javascript. You can interact with the various elements, move them around and the paths are updated in real time.

Of course you could do the same thing with a raster format by using a canvas and drawing a bitmap for instance, but SVG works at a higher level and lets you do these things a lot faster and probably with better performance. You can use CSS-styling, you can register javascript event callbacks etc...

Or to put it another way: if SVG was meant as an opaque machine-to-machine format, why even bother with the insane overhead of XML instead of using some dense binary format?

Getting your hands dirty by manually messing with SVG elements allows you so much freedom while plotting in D3, it is amazing. If you do any sort of advanced data visualization on the web, being able to read and write parts of SVGs is essential.

Along those lines, I recently encountered this project that enables the use of SVG to design maps etc for games developed with the Rust language game engine Bevy: https://github.com/carrascomj/bevy_svg_map

"The properties of the lines (color, opacity, fill...) can be used to programmatically add functionality..."

Yes, but SVG is not good as a machine-focused format as well, that's kind of the point.

I like this kind of compromise where illustrator etc generates the SVG but you can read elements in the actual text so you can animate or transform with css or js.

Fir example I recently made this 'hack' for gradient transform. even 'hacking' that was easier than maintaining and understanding complex canvas JS - at least to me.

https://4degreesdigital.com

Love it! I'm just wondering, aside from the animation part do you ever need to edit an Illustrator-generated svg?

I do personally for color control. You can see my heavy use of SVGs here at a site I'm in the middle of implementing [0]. For example, if you look in the :root {} you will see a lot of CSS variables that are declared and which manipulate their HSL value based on base variables like --hue. The SVGs implement these. So you can change the global --hue, and the hue of all the SVG elements on the page will change. I've modified output SVGs from figma/illustrator to reference a variable rather than a hardcoded fill i.e. <path fill="red"> becomes <path fill="var(--base)"> That's a simple example, you can go further to change relative saturation and lightness as well, which I also do with CSS calc(). It's fun!

[0] www.holysnacks.us

i like the sun rays!!

I do love the mix of css vars into SVG. it makes a lot of sense to me too.

Wow I never thought of doing animations that way. Great stuff!

> You don't edit raw png values either

However, for when you want that there is SNG¹. It can be a surprisingly fun way to perform minor corrections or filters to an image.

¹ http://sng.sourceforge.net/

> SVGs are meant to be created and used like any image file.

Then why bother with the XML? And why use the embedded DSLs in strings instead of the more verbose XML-way.

Reply on news.ycombinator.com