19 ms·
Nicu's test website made with SVG (2007)
- whyandgrowth 1y agoWow, 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.
- ninetyninenine 1y agoSvgs are capable of anything. You can draw anything with it as it’s just a format for vector graphics. The vectors can be manipulated so you can even make a 3D game engine from it if you wanted. The only thing that separates it from html and css is that html and css biases towards website styled stuff. HTML is designed for text boxes and that kind of stuff while svgs bias more towards a neutral drawing medium: shapes and vectors. So because it’s more neutral you can even make a html engine from svg if you so wanted.
- OneDeuxTriSeiGo 1y agoYeah this is a big part of the reason SVGs are dangerous if treated like normal image files. They are basically equivalent to HTML w/ embedded CSS and can even execute javascript. If you aren't careful they can be used for XSS and all kinds of nasty stuff. They are also super useful in general though despite that.
- panny 1y agoNow right click it and view source. SVG is just markup, same as HTML.
- thenthenthen 1y agoLike, this SVG is just a Website! Props to the creator, loving this.
- Telemakhos 1y agoThere were some tools that let you do a lot of flash-type things using html5 and svg. I used Tumult Hype for an animation project a few years ago, but I don't think it ever became as popular as Flash.
- chuckadams 1y agoText selection is sluggish and wonky in Firefox. A bit flickery in Chrome and Safari, but otherwise behaves fine.
- jasonjmcghee 1y agoMy experience in a chromium-based browser was multiline text selection was not good. Any time you drag over space between lines, it selects something else.
- bobbylarrybobby 1y agoYes, unfortunately SVG does not support line breaks or wrapping, so much like pdf text selection is on a best effort basis
- dylan604 1y agoFF142 macOS had no issues with text selection on my end. Yet another example of how maddening it still is when designing websites that have the same experience regardless of how it is viewed.
- chuckadams 1y agoI think that's just the standard behavior of the selection algorithm with that particular layout. FF might be applying some kind of debouncing or hysteresis to keep it from flickering, but if so it's making all selection sluggish.
- chrismorgan 1y agoI do not observe any performance problem in Firefox (Nightly, Linux/Sway), and I’d say text selection is very good, with these caveats: • Caret mode (F7) doesn’t work at all. • Triple click selects all the text on the page, rather than just that of a single <text> element as I’d have expected (in which model you’d use <text> for a paragraph and <tspan> for its lines, and thus get the normal triple-click behaviour). • Click and drag on a text link starts selection or drags the already-selected text, rather than dragging the link so you can drop it in a new tab or such. And if you mouse up on the same link (regardless of having left it), it activates. • If you start a selection, it is only updated while you’re moving over text. Drag past the end of the line, then down, and it should select more text, but it only actually will when you move back over text. • If text is selected, clicking outside text doesn’t clear the selection. (Probably the same root cause.) • Shift+Up and Shift+Down select to the start or end of the containing <text> element, rather than operating linewise. (Because there’s no such thing logically, it’d require heuristic work. Or for people to implement flowed text, like Inkscape did but sadly then it was pulled out of the spec for some reason.) There are also a couple of issues specific to this document: • Document order is not sensible. For example, it goes title, then side nav title, then footer, then body text, then “Home”, then side nav contents, then magic keyword. But this does show a broader problem: in HTML it’s not the easiest to get stupid document ordering (possible, but you have to go a little out of your way), but in SVG it will happen unless you’re careful. • Also likely to happen unless you’re careful: multiline text sometimes lacks the trailing spaces necessary to separate words once the line break is ignored (since there’s no such thing as a line break in SVG 1.1, only a shifted cursor position). For example, “Inkscapefor” fails, whereas “willing to” succeeds. —⁂— Chromium is interesting. Supports caret browsing (+), Up/Down do something weird (−), triple click only selects that <text> element (+), you can’t start a text selection in a link (±), but you can’t drag the link either (=), and while selecting, any time the pointer is not over text, it’ll shift that selection boundary to something like the start of the document (−), except it’s not actually the start because it excludes the title text for some reason.
- cf100clunk 1y agoThe 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.
- blahgeek 1y agoI wonder if you copying the term here in HN (with the link to that site) would pollute the benchmark dataset…
- cf100clunk 1y agoGood point. I wonder if that cat is now too far out of the bag for a deletion of my comments to be of help?
- notpushkin 1y agoI don’t think it’s that big of a problem – you can still see if the results link to the SVG website itself, and ignore everything else.
- cf100clunk 1y agoThere's symmetry at this moment in the results from Brave Search and Google Search looking for lmtbk4mh.
- chrismorgan 1y agoThe page is old enough that it wouldn’t surprise me if Google and Bing used to index it and are capable of indexing it, but no longer do. A lot of older stuff where you know exactly what’s there just can’t be found any more. https://www.google.com/search?q=svg.nicubunu.ro https://www.google.com/search?q=svg.nicubunu.ro seems to surface it, with text; https://www.google.com/search?q=site:svg.nicubunu.ro https://www.google.com/search?q=site:svg.nicubunu.ro gets the title, but no more text. I’m curious how it decided what the title was. I wonder if they have some kind of “choose the largest text” heuristic if a title is missing. https://duckduckgo.com/?q=svg.nicubunu.ro https://duckduckgo.com/?q=svg.nicubunu.ro and https://duckduckgo.com/?q=site:svg.nicubunu.ro https://duckduckgo.com/?q=site:svg.nicubunu.ro don’t show a result.
- lpln3452 1y agoIt's interesting that SVGs can include selectable text. Nice blog.
- Karliss 1y agoSelectable and more importantly searchable text is one of the reasons why I occasionally open Large SVG diagrams in browser instead of the usual image viewer.
- lpln3452 1y agoRight. I'd always just seen SVG as an image format. Interesting that browsers treat text inside them just like plain text.
- wild_egg 1y agoI mean, it is just plain text inside some XML tags. It'd be weirder if they treated it like text in a photo
- leptons 1y agoYou can actually embed HTML inside an SVG using the foreignObject element.
- DrewADesign 1y agoI’ve done some cool things with the built-in SMIL animation too. You can control it with JavaScript and CSS… Watch out for the filters though — they can be pretty heavy compute-wise.
- yomismoaqui 1y agoApart from using SVG the design of that page has that vintage 2000s feel... don't know why but I love it
- JadeNB 1y agoThe reference to Firefox 3.0 probably helps with the vintage feel.
- cf100clunk 1y agoA "best viewed in" box would have been hilarious.
- ascorbic 1y agoIt's from 2007: https://web.archive.org/web/20070730042618/http://svg.nicubunu.ro/ https://web.archive.org/web/20070730042618/http://svg.nicubu...
- jtolmar 1y agoIf you want that 2000s feel for your own sites: Gradient background, drop shadows, and side bar nav.
- muglug 1y agoAh, reminds me of Flash websites with SEO-indexable text.
- aaviator42 1y agoAnyone have knowledge on how accessible SVGs are for folks who use assistive technologies?
- p0w3n3d 1y agoI wasn't even able to copy the text that was intended for search engines, so I guess it is not accessible
- hedora 1y agoCopy paste and pinch zoom work fine for me in iOS. Maybe switch to a better browser?
- catlifeonmars 1y agoText selection is a little unintuitive (iOS on iPhone) If I’m not directly over the text I get a little magnified bubble instead. On plain HTML text selection is a little more forgiving if your long presses are not accurate.
- p0w3n3d 1y agoOn chrome/android
- behnamoh 1y agoAt 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
- papichulo2023 1y agoWhy we would do that when canvas related apis support gpu acceleration?
- foofoo12 1y agoI did wonder why they didn't just switch out actionscript for js and use plain html/svg/canvas. I'm kind of glad they didn't but I think there would have been money in doing so.
- lpln3452 1y agoFlash did not disappear because of an unfortunate accident. It disappeared because Adobe was unwilling to fix its outdated system and rampant security flaws.
- deleted 1y ago[deleted]
- hedora 1y agoAnyone remember the flash-block plugins to keep browsers from auto rendering malicious flash content?
- PaulHoule 1y agoViewed 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.
- helf 1y ago[dead]
- OutOfHere 1y agoI 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.
- aleyan 1y agoI 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 https://aleyan.com/blog/2025-llm-assistant-census [1] https://www.google.com/search?q=%22slabiciunea+lui+Nicu+forever%22 https://www.google.com/search?q=%22slabiciunea+lui+Nicu+fore...
- cainxinth 1y agoThat's the kind of thing you do not for the users but because of your own standards, and even if no one else appreciates it, you always do.
- masswerk 1y agoThat's totally correct! I once replaced some blurry scans from the 6502 manual by SVG versions, and, while I was at it, I coded them by hand (really, because for this particular job it seemed easier than doing it in a drawing program.) While nobody will notice, it's satisfactory. [1] https://www.masswerk.at/6502/6502_instruction_set.html#stack https://www.masswerk.at/6502/6502_instruction_set.html#stack
- ale42 1y agoNobody will notice, because that's how it should be... personally I often notice when it's bad: blurry plots, JPEG noise that should not be there, and so on, and think "oh no, another one who has no idea about how to do images properly..."
- 1y ago
- lutusp 1y ago> [ ... ] 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.
- Timwi 1y agoI'm pretty confident it's intended to be read as a portmanteau for “instant satisfaction”. I appreciated the clever wordsmithery and wouldn't jump to the assumption that it shows any kind of lack or failing. But maybe that's just me.
- fractallyte 1y agoSvija honed the process of creating SVG websites: https://svija.com/ https://svija.com/ There are some very nice showcases at the bottom of the page. For example, 2021: https://2021.svija.love/ https://2021.svija.love/ Previously featured on HN: https://news.ycombinator.com/item?id=33518845 https://news.ycombinator.com/item?id=33518845 [Show HN: All-SVG websites with complex animation]
- pbsurf 1y agoAnother SVG website: https://styluslabs.com/ https://styluslabs.com/
- p0w3n3d 1y agoawful readibility tbh, and not accessible at all I guess
- chrismorgan 1y agoThough Stylus Labs’ site is not pure SVG, but a collection of SVGs embedded in an HTML container, which makes life quite a bit easier (applying a page background and embedding a video iframe are easier, and proper sizing and centring the column is not otherwise possible without scripting).
- aaaggg 1y agoAdd GSAP DrawSVG (https://gsap.com/docs/v3/Plugins/DrawSVGPlugin/ https://gsap.com/docs/v3/Plugins/DrawSVGPlugin/) and you've nearly rebuilt Macromedia Flash!
- DamnInteresting 1y agoA 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 https://www.damninteresting.com
- e1gen-v 1y agoThe hamburger button animation is so buttery smooth
- ericmcer 1y agoits CSS
- popupeyecare 1y agoI love damninteresting. Thanks for keeping it going for the last two decades.
- DamnInteresting 1y agoThanks for the kind words! It is not at all profitable, but it gives me purpose, and scratches a particular intellectual itch. I wish I could afford to make it my full-time job and just write every day without worrying about day-job income, but alas, the universe currently desires otherwise.
- ascorbic 1y ago(2007)
- deleted 1y ago[deleted]
- youssefabdelm 1y agoOne 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.
- deepsquirrelnet 1y agoSVGs 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.
- daemonologist 1y agoJust 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 https://freeclimbs.org/wall/demo/edit-set )
- AndrewSwift 1y agoSee svija.com/en — all SVG websites ;-)
- Timwi 1y ago> found that in Firefox performance started to degrade beyond a few thousand elements Strange, I've used SVG a lot and I've not seen that kind of performance problem except when overdoing it with the SVG filters (esp. gaussian blur).
- AndrewSwift 1y agoWe 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.
- deleted 1y ago[deleted]
- anonyonoor 1y agoHas 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?
- Timwi 1y agoEven if I were to make a document editor in SVG, I would still use the <text> element with a font, rather than positioning every character separately or even rendering every letter as a path. That would be incredibly wasteful I think.
- arewethereyeta 1y agoisn't this basically what flutter does?
- chrismorgan 1y agoNo. SVG is a proper part of the browser. You get native text rendering, real links, real text selection, stuff like that. Flutter is pure-canvas. You get no accessibility (unless you duplicate everything, in which case why even bother?), fake links which don’t behave properly, incorrect text rendering, megabytes of overhead, slow startup, &c.
- xnx 1y agoSmall typo: "stuf"
- caminanteblanco 1y agoI 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
- geokon 1y agoThis 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.
- Timwi 1y ago> will render notably different in different browsers (and renderers like Batik/Inkscape/SalamanderSVG/etc). I've run into this too, but only with SVG filters, not with basic elements like text, although you do have to make sure that the correct fonts are always available. > tooltips in SVG don't work when the SVG is in an HTML page. They work just fine when the SVG is actually in the HTML. What you're likely talking about is SVG that is referenced by an <img> tag. The latter means that the browser treats it as an image, so yeah, it doesn't have tooltips. Try putting the SVG directly into the HTML. > Some mildly complex SVGs take GBs of RAM and 1> min to render. I have never encountered that in my 10+ years of using SVG.
- eleumik 1y agoWhy don't build a site with Lego then ? Meanwhile I am trying with bananas.
- geldedus 1y agoIt's been years Nicu hasn't written anything on his blog(s) Is he still with us?