FRESH

Hacker News

Home

Nicu's test website made with SVG (2007)

171 points by caminanteblanco

by aleyan

7 subcomments

I have been using SVGs for charts on my blog for a couple of months[0] now. Using SVGs satisfied me, but in all honesty, I don't think anyone else cares. For completeness the benefits are below:
* The charts are never blurry
* The text in the chart is selectable and searchable
* The file size could be small compared to PNGs
* The charts can use a font set by a stylesheet
* The charts can have a builtin dark mode (not demonstrated on my blog)
Additionally as the OP shown, the text in SVG is indexed by google, but comes up in the image sections [1].
The downside was hours of fiddling with system fonts and webfonts and font settings in matplotlib. Also the sizing of the text in the chart and how it is displayed in your page is tightly coupled and requires some forethought.
[0] https://aleyan.com/blog/2025-llm-assistant-census
[1] https://www.google.com/search?q=%22slabiciunea+lui+Nicu+fore...

by DamnInteresting

2 subcomments

A few years back I updated my site[1] so all of the UI graphics (e.g., logos, icons in the menus) are SVG sprites baked into the HTML. It resulted in a lot fewer requests per page, lower overall page size, and sharp navigation on any device at any resolution. It works great, though it was a lot of initial work to get it working.
[1] https://www.damninteresting.com

by geokon

0 subcomment

This is a cool experiment
Though it'd discourage anyone to run off with this idea.. b/c SVGs are unfortunately kinda janky
My top 3 issues are:
- not even overly complicated SVGs, especially with text, will render notably different in different browsers (and renderers like Batik/Inkscape/SalamanderSVG/etc). I have no idea why.. PDFs don't have this issue. While I haven't tried, but I don't think PDFs are as easy to generate programmatically as SVGs
- SVGs have completely broken linking. You can embed an <svg> inside another <svg> to reuse an element - but for some reason it's limited to a link depth of 1! So you can't link an <svg> that links an <svg>. So SVG aren't safely composable - which drives me nuts.. (ex: making a large display panel in SVG that has subcharts)
- Maybe minor.. but tooltips in SVG (which are super handy.. for instance in plots to display additional info about a data point) don't work when the SVG is in an HTML page. They seem to only work when you open SVG in a separate tab.
More abstractly they just have very weird perf issues. Some mildly complex SVGs take GBs of RAM and 1> min to render. But it's unclear which parts are performance sinks.

by yomismoaqui

3 subcomments

Apart from using SVG the design of that page has that vintage 2000s feel... don't know why but I love it

by aaviator42

1 subcomments

Anyone have knowledge on how accessible SVGs are for folks who use assistive technologies?

by whyandgrowth

4 subcomments

Wow, I didn't know SVG was capable of that, the website looks like a HTML/CSS site from the 2000s, but it's still cool.

by AndrewSwift

1 subcomments

We have been building all-SVG websites for six years – https:/svija.com/en
They do get indexed by Google, and we take some extra steps to ensure usability.

by daemonologist

1 subcomments

Just serving a whole SVG file directly never even crossed my mind as an option, very cool.
A while back I used a giant interactive SVG as the UI for a site I was prototyping, albeit wrapped in a normal HTML page. It was easy to set up and worked reasonably well, but I found that in Firefox performance started to degrade beyond a few thousand elements and so converted everything (except some accessibility features) to use a canvas instead. (The core of the old version is still deployed here if you want to see how far you can push it: https://freeclimbs.org/wall/demo/edit-set )

by deepsquirrelnet

0 subcomment

SVGs are under explored in generative AI. They are effectively a graphics language of their own. LLMs can write them directly without a vision architecture, and understand them in ways that non-vector graphics cannot.

by youssefabdelm

1 subcomments

One thing I love about SVGs for websites is their stability across many contexts, browsers, etc. Everything is pinpoint, coordinate based, nothing moves around unexpectedly. You define it once, it's done.

by fractallyte

0 subcomment

Svija honed the process of creating SVG websites: https://svija.com/
There are some very nice showcases at the bottom of the page. For example, 2021: https://2021.svija.love/
Previously featured on HN: https://news.ycombinator.com/item?id=33518845 [Show HN: All-SVG websites with complex animation]

by anonyonoor

0 subcomment

Has anyone ever built a document editor with SVG?
I realize it's far from a best practice and even explicitly stated as a bad idea somewhere in the SVG spec, but the idea of a document editor where you can individually position each and every character and make detailed, individual glyphs natively without loading fonts is interesting to me.
Are there any examples of this? Or perhaps different (better) approaches to a document editor with the advantages I said above?

by chuckadams

2 subcomments

Text selection is sluggish and wonky in Firefox. A bit flickery in Chrome and Safari, but otherwise behaves fine.

by OutOfHere

0 subcomment

I have used an LLM to write code in web servers to generate data plots using SVG embedded directly in web pages. This bypasses the need for PNG generation, Javascript for rendering a plot, and also the need for a plotting library. You can see two examples in the gist d29164051477ce1b2b95b788297a1932.

by lutusp

0 subcomment

> [ ... ] and instatisfaction [sic] for the users
In-what? Unhappiness with a statistical outcome? Discouragement with events in one's home state?
Based on the many other uncorrected typos in the example SVG, I suspect that Inkscape has everything but a spell checker.
Apropos, Inkscape is a big app and does practically everything.

by aaaggg

0 subcomment

Add GSAP DrawSVG (https://gsap.com/docs/v3/Plugins/DrawSVGPlugin/) and you've nearly rebuilt Macromedia Flash!

by lpln3452

1 subcomments

It's interesting that SVGs can include selectable text. Nice blog.

by caminanteblanco

0 subcomment

I realized when I was messing around with SVGs that you can use math.random, so now my wallpaper is a fractal that randomly changes each time I log in

by PaulHoule

1 subcomments

Viewed it on iPhone in the passenger seat of my son’s 79 Thunderbird. Doesn’t reflow and is a disaster in portrait but I pinch zoomed it in landscape and it was readable.

by cf100clunk

4 subcomments

The search term lmtbk4mh is found with Brave Search (3 hits so far, but it cannot provide a description of the SVG site). DuckDuckGo Search has zero results at this moment.

by behnamoh

4 subcomments

At this point just bring back Flash...
It was so nice and unlocked so much creativity among early web developers. unfortunately Apple contributed to its demise

by eleumik

0 subcomment

Why don't build a site with Lego then ? Meanwhile I am trying with bananas.

by muglug

0 subcomment

Ah, reminds me of Flash websites with SEO-indexable text.

by xnx

0 subcomment

Small typo: "stuf"

by ascorbic

0 subcomment

(2007)

by arewethereyeta

1 subcomments

isn't this basically what flutter does?

by pbsurf

2 subcomments

Another SVG website: https://styluslabs.com/

0 subcomment