Nice things with SVG - Hacker News

Posted by fmerian 4/12/2025

Nice things with SVG(fuma-nama.vercel.app)

575 points | 107 commentspage 2

rckt 4/12/2025|

SVG feels like a very underexplored and underused territory. You can do so many things with it. It really depends on your imagination. But you’ll possibly need to “hardcore” a lot of stuff, so yeah, depends on the use case as well.

geokon 4/13/2025||

It's a fun format that's easy to generate, but after trying to do complicated things with it.. you kind of understand why. It's underused b/c

- Complex graphics render different in different browsers. So you can't rely on it shows up the same (never had the same issue with a PDF for example)

- There are quite a few renderers but they typically don't implement large parts of SVG b/c it's too complex.. So you can never really be sure what parts are "safe" to use.

- Large complex graphics display extremely slowly (again, compared to a PDF)

- There is basically one editor.. Inkscape. And it's got it's own quirks and doesn't match Chrome/Firefox's behavior. Ex: You can add arrows to lines in Inkscape and they don't display in Firefox

It's also just got too many weird corner case limitations. For instance you can embed a SVG in another SVG (say to make a composite diagram). But you can't embed a SVG in to an SVG in to an SVG. On the web if you inline or link an SVG you also end up with different behaviors

Springtime 4/13/2025||

> There is basically one editor.. Inkscape.

Do you mean in terms of open source vector editors? As there a wide variety of tools with SVG authoring/editing capability, among the most well-known being Adobe Illustrator, Sketch, Affinity Photo/Designer, even some web apps are available that were made for online SVG editing (eg: SVGator).

Inkscape, like some tools such as Affinity's, adds its own XML namespace with custom attributes and values, though for arrows I would expect it to use native `marker` elements.

It's certainly true that with SVG's flexibility and particularly with cross-browser handling differences/bugs it can become its own task to get consistent presentation when doing more complex things with it. Still very fond of the format.

jarek-foksa 4/13/2025||

Inkscape is the only major vector graphics editor that relies on SVG as its native file format. Most other apps are merely allowing you to import/export SVG files which is often a lossy process (e.g. vector objects with filter effects might get rasterized).

SVGator is focused primarily on animation and it's rather pricey. Boxy SVG might be a better choice if you are looking for a web-based SVG editor (disclaimer: I'm the developer).

WillAdams 4/12/2025|||

Two usages which I thought were interesting:

- adding toolpath information so as to use Flash as the engine for a Computer Aided Manufacturing tool: https://github.com/Jack000/PartKAM

- (this was my project along w/ Edward R. Ford) adding hyperlinks to part lists to highlight parts in an assembly diagram: https://github.com/shapeoko/Docs --- unfortunately, that doesn't seem to work anymore.

wwweston 4/12/2025|||

Seems like it hits limits really fast — management/legibility gets difficult without groups and layers and performance doesn’t seem to scale well.

srid 4/12/2025||

  without groups and layers

As distinct from `<g>`?

perilunar 4/13/2025|||

One thing i'd like to see is an entire site built with SVG and JS without any HTML at all. It's possible but i haven't seen anyone do it yet.

efreak 4/16/2025|||

I've used SVG in the past to work around limitations in css alignment (cloth before and after new layouts made it unnecessary--I don't write CSS enough to remember how they work, but adding text to a quick drawing in inkscape is fairly trivial)

eMPee584 4/13/2025|||

so how can you know it's actually possible?

perilunar 4/13/2025||

Browsers will render SVG files. SVG files can link to other SVG files. Just need to configure the server to serve SVG by default — most servers don't but it's an easy config change.

perilunar 4/13/2025||

Actually just found one, via an old stack overflow post. Only a three page test, but proves the point:

https://svg.nicubunu.ro

pcthrowaway 4/15/2025||

No javascript here though

memhole 4/12/2025||

I agree. I’m sure there’s limitations, but svg feels more like a wysiwyg for web design than css

deivid 4/12/2025||

SVG+CSS is super powerful, a simple feature that I love is making diagrams respect dark/light mode, without any javascript. Check the diagrams here for example: https://blog.davidv.dev/posts/ipvs-lb/

Voultapher 4/13/2025||

> Unkey's landing page is a nice example.

That landing page is a nauseatingly laggy experience on a very powerful M1 Pro laptop. And slow to load, all for some fancy lines? I'd take a product that focuses on substance over style as dev. Don't get me wrong, style is important and I like pretty things, but here it seems the tradeoff is not well done.

leptons 4/13/2025||

> laggy experience on a very powerful M1 Pro laptop

Apple's M series chips aren't really all that powerful, but they are very power efficient. There are far faster laptops out there than what Apple offers, though they do consume more power. My AMD-based laptop outperforms the M1 Pro by a wide margin, though it is a power hog. I had no problem viewing the Unkey website. If you're using Safari, that may also be a problem, because Safari honestly sucks.

Voultapher 4/13/2025||

I'm on Chrome and the page was fine-ish after the first full scroll, but that first scroll was quite laggy. Note, I'm extra sensitive to this kind of stuff.

> Apple's M series chips aren't really all that powerful, but they are very power efficient.

In terms of single threaded performance, they are both. Especially the IPC is very impressive take a look at for example https://github.com/Voultapher/sort-research-rs/blob/main/wri...

> Assuming the same instructions per cycle (IPC) and mapping of instructions to cycles, Zen 3 should be ~1.53x faster than Firestorm by virtue of clock frequency. Yet the micro-architecture released in the same year as Zen 3, goes from exceeding it to closely trailing it in terms of absolute throughput when the effects of branch misprediction are minimized.

Their newest generation of P-cores is simply unmatched in terms of ST perf, an M4 core can do 4k points in Geekbench ST, AMD's best Desktop offering does ~3.5k at a much higher clock frequency. For web browsing ST perf is king.

deads1mple 4/14/2025|||

On latest Chrome, MBP i7 2019 and it sure is laggy as hell

https://www.unkey.com/

RobotToaster 4/13/2025||

Sounds like a problem with apple's implementation? I don't have any problem with firefox on an old 9th gen i5.

fitsumbelay 4/13/2025||

Awesome post, site design is dope as well

For as long as SVG's been around its potential feels untapped. I can't think of any other element that can encapsulate functional HTML, CSS and JS -- basically an entirely different HTML document -- as easily

defanor 4/13/2025||

SVG feels much like HTML to me, especially when animations are involved: on the first sight it is quite nice and simple, does its job well, can be handled by fairly basic viewers (as well as converters, editors) and generated easily. Then there are even more features with CSS and JS, which also look neat, but then simplicity goes away, along with it goes the wide support of full functionality, and compatibility (due to partial support, unexpected behaviors in different contexts). It still looks like a fine option when animations are needed, but I would rather avoid those in SVG when they are not necessary.

perilunar 4/13/2025||

Couple of (nice?) things I've built with SVG:

Sun Clock: https://sunclock.net

Degrees What?: https://degreeswhat.com

gocsjess 4/13/2025||

One nice thing about SVGs is that they can be connected to the dom, you can do css, and easier to debug than canvas. Performance is the only thing holding it back from making declarative code for plotting and mapping charts.

notnullorvoid 4/13/2025|

What performance issues have you encountered? Perf was decent 10 years ago so long as you avoided filters, but even that has improved.

gocsjess 4/18/2025|||

I figured at that time that svgs with a lot of path slows the app. It was about the time where I toyed with d3 and geojson too.

gocsjess 4/18/2025|||

I needed SVG and CSS animations to work together

yowzadave 4/15/2025||

Maybe I'm in the minority, but I wish there were an similarly popular vector drawing format that did much much less than SVG. Any time you want to support vector drawings in a project, the obvious approach is to support SVG...which basically means you have to bring in the equivalent of a browser. What is the minimal alternative?

AndrewSwift 4/12/2025||

I love what you have done here — it's very graceful.

I was feeling great but now I think "I have a lot to learn — I'd better get going!"

If you are interested in SVG animation, I wrote a program to do it from within Adobe Illustrator — see examples and how it works at https://svija.com/en/animation

rorads 4/13/2025|

Love this! I think SVG is super underrated, particularly in the age of diffusion based image generation. I’ve written briefly about it here: https://rorads.github.io/technical/quick-ai-reflection-on-sv...

More comments...