[HN Gopher] Nice things with SVG
___________________________________________________________________
Nice things with SVG
Author : fmerian
Score : 537 points
Date : 2025-04-12 17:40 UTC (1 days ago)
(HTM) web link (fuma-nama.vercel.app)
(TXT) w3m dump (fuma-nama.vercel.app)
| kmoser wrote:
| This taught me that SVGs can be animated with CSS. Cool!
|
| I wonder if anybody has recreated vector graphics games like
| Asteroids using SVGs and animation. You'd have to use JS to
| change the shape and direction of the asteroids when they're
| shot, but that would just require a bit of JS.
| mkoryak wrote:
| It would be more performant to use canvas, but it might be kind
| of fun to do with svg
| hinkley wrote:
| Easier to do a11y in SVG.
|
| And the oft overlooked synergy with aria work is test
| automation. Code that is hard to screen read is often also
| difficult to integration or E2E test accurately.
| hinkley wrote:
| Video I bookmarked when I was stuck in backend land because I
| knew I'd want to learn it some day:
|
| https://youtube.com/watch?v=wc8ovZZ78SY
|
| I discovered this shortly after introducing The Secret of Kells
| to a child and had terrible, beautiful ideas about overly
| ornate websites that I have since thought better of. Mostly.
| LegionMammal978 wrote:
| One fun thing that can be done with SVG files: you can use
| entities in an inline DTD to define constants to be shared across
| different places in the file. You can see some great examples of
| this in the SVGs in David Ellsworth's "Squares in Squares" page
| [0].
|
| The major browsers have no issues with this, though note that
| some tools like Inkscape won't parse the DTD nor expand the
| entities.
|
| [0] https://kingbird.myphotos.cc/packing/squares_in_squares.html
| timewizard wrote:
| You can also extract different parts of an existing svg and use
| (clone) them elsewhere on the page.
|
| https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/E...
| ygra wrote:
| I've used this to succinctly define a Sierpinski carpet on
| Wikimedia Commons a while ago: https://commons.wikimedia.org/
| wiki/File:Sierpinski_carpet_6....
|
| That file was able to lock up or crash most SVG renderers
| back then.
| noahbald wrote:
| It might work in browsers but a lot of SVG tooling will ignore
| DTD because it's a DOS risk.
|
| E.g. Billion laughs attack
| https://en.wikipedia.org/wiki/Billion_laughs_attack
| znpy wrote:
| That page took a good five seconds to render on my 2022 iPhone
| se
| lenkite wrote:
| Maybe I am missing something, but can't find any !doctype or
| !element that would represent a DTD on that page. If you are
| talking simply about SVG defs and use - that isn't a DTD.
| LegionMammal978 wrote:
| They're all in the standalone files, e.g., look at the source
| of https://kingbird.myphotos.cc/packing/square-11.svg. It
| defines a bunch of entities to represent various lengths and
| angles, which obviously can't be <use>d. (CSS variables would
| be an alternative these days, but many non-browser tools such
| as librsvg will have trouble with those as well.)
| tannhaeuser wrote:
| You say "entities" but that term is actually the name for
| SGML/XML's mechanism to define arbitrary syntactic content for
| reference/reuse with entity references a la &ref, whereas in
| SVG you can park shapes/paths/whatever under refs, giving those
| an id attribute value, and then <use> those element in the body
| SVG content, which is also what the page you linked is using
| (for each individual SVG ie. there's no sharing of rectangles
| across the many pictures since these are pulled-in individually
| via <embed> inot their own DOM rather than used as inline SVG).
|
| I wonder why SVG's original designers found it necessary to
| supply an ad-hoc re-implementation of the entity mechanism. I
| think it might have to do with how rendering properties can be
| overridden at the usage site? At least I don't think it was
| established that browsers ignore entity definitions or
| basically anything in the document prolog/DOCTYPE considering
| SVG was part of W3C's push to replace HTML's SGMLish legacy
| syntax with XHTML/XML.
| jarek-foksa wrote:
| Entities seem to be resolved at parse time, so they are more
| like a preprocessor directives. <use> is much more powerful
| as all instances are "live" and updated dynamically when you
| change the original object.
|
| If I recall correctly, the primary motivation behind <symbol>
| and <use> was interoperability with corresponding primitives
| in Adobe Illustrator.
| LegionMammal978 wrote:
| > which is also what the page you linked is using
|
| To be clear, it's using both of them for different purposes,
| you'll find both <use> elements and <!ENTITY> declarations in
| files like
| https://kingbird.myphotos.cc/packing/square-11.svg. You can't
| <use> a numeric quantity in an attribute, the closest
| alternative for those would be CSS variables.
|
| As for the existence of <use>, I agree with jarek-foksa, the
| idea is that the original element and all its clones from
| <use> are linked in the DOM at runtime, as opposed to DTD
| entities which are baked in textually. Also, most people hate
| XML, I'd imagine they'd hate internal DTDs doubly so,
| especially with how little information can be found about
| them outside the XML standard.
|
| (Browser devs also love to beat the drum of minimizing attack
| surface, so it's a bit surprising that DTDs and XML
| stylesheets still work at all. I'd expect them to tear out
| that functionality in a heartbeat if it were ever used in a
| modern exploit.)
| chentastic wrote:
| Was always fascinated by SVG art. How good are LLMs in generating
| SVGs?
| krebby wrote:
| Getting better!
|
| https://simonwillison.net/2024/Oct/25/pelicans-on-a-bicycle/
| jamesgpearce wrote:
| Perhaps a generous definition of "better"... but some of
| those genuinely made me laugh!
| jbreckmckye wrote:
| In at least my limited experience, they're kind of bad. They
| can retrieve shapes that already exist, sometimes inaccurately,
| but they are less reliable at creating novel ones
| simpaticoder wrote:
| Regular LLMs are quite bad at it (see simonwillison's blog
| post). However this paper [0] describes an apparently sound
| approach using Neural Radiance Fields (NeRFs), however their
| github repo [1] has been "code coming soon!" for months now, so
| you can't really use it.
|
| 0 - https://arxiv.org/pdf/2501.03992
|
| 1 - https://github.com/SagiPolaczek/NeuralSVG
| pizza wrote:
| I've gotten decent outputs with Claude with iteration (sending
| both text feedback and screenshot for context) and then tweaked
| the output in Inkscape.
| plumeria wrote:
| Checkout StarVector: https://github.com/joanrod/star-vector/
| qingcharles wrote:
| https://github.com/simonw/pelican-bicycle/blob/main/README.m...
| hinkley wrote:
| I always thought transforms were an odd inclusion in SVG until I
| tried to make my own icons/logo with it. Those curves are
| challenging to get right. When I got done with the second logo I
| decided it looked flat and I needed to skew it 10deg. The thought
| of rewriting all of those lines and curves suddenly made rotation
| seem like a much much better idea. Good thing too because it
| looked weird next to test and I changed the angle several more
| times to make the kerning look right.
| aiibe wrote:
| Svg Tailwind combo makes hover animations easy and fun.
| mvdtnz wrote:
| Any examples? This sounds interesting to me.
| srid wrote:
| <svg class="w-16 h-16 text-blue-500 transition-
| all duration-300 ease-in-out transform hover:scale-125
| hover:rotate-12 hover:text-purple-600"
| fill="currentColor" viewBox="0 0 100 100"
| xmlns="http://www.w3.org/2000/svg" >
| <circle cx="50" cy="50" r="40" /> </svg>
|
| Preview: https://grok.com/share/bGVnYWN5_2a2dd030-8177-4fa0-a
| ac5-17d2...
| skeptrune wrote:
| Insane. I had no idea Grok previews were that smooth
| xwat wrote:
| Live preview: https://play.tailwindcss.com/db6WOoLcg8
| rckt wrote:
| 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.
| memhole wrote:
| I agree. I'm sure there's limitations, but svg feels more like
| a wysiwyg for web design than css
| wwweston wrote:
| Seems like it hits limits really fast -- management/legibility
| gets difficult without groups and layers and performance
| doesn't seem to scale well.
| srid wrote:
| without groups and layers
|
| As distinct from `<g>`?
| WillAdams wrote:
| 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.
| perilunar wrote:
| 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.
| eMPee584 wrote:
| so how can you know it's actually possible?
| perilunar wrote:
| 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 wrote:
| Actually just found one, via an old stack overflow post.
| Only a three page test, but proves the point:
|
| https://svg.nicubunu.ro
| geokon wrote:
| 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 wrote:
| > 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 wrote:
| 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).
| CliffStoll wrote:
| Is there any SVG extension which allows density of line? I have a
| plotter which can lift/lower a pen; it's driven from SVG files.
| It'd be sweet to allow the pen to lower while the line is being
| drawn (as we often do with handwriting).
|
| Oh - it's an Axidraw, from Evil Mad Scientist Labs - great
| device, wonderful people.
| WillAdams wrote:
| Probably you would want to do that with G-code.
|
| I've been doing that sort of thing in:
|
| https://github.com/WillAdams/gcodepreview
| m-a-t-t-i wrote:
| It's pretty easy to store custom instructions in plain SVG
| files and interpret them in with your reader. For example I
| have a multi-purpose laser-cutter / plotter and I use opacity
| for laser power, stroke weight for movement speed, green
| channel for number of passes, blue channel for z-axis height
| and red channel for lowering the pen or turning of the laser
| etc.
| chrisweekly wrote:
| Even tho it's 8y old, Sarah Drasner's famous "SVG Can Do _That_?
| " talk is still eye-opening for many. CSS has matured a ton since
| then (I'm less sure about SVG per se)... in any case it's HIGHLY
| recommended.
|
| Slides: https://slides.com/sdrasner/svg-can-do-that
|
| Video: https://youtu.be/ADXX4fmWHbo?si=6YPZkopyEDc8PSte
| jamra wrote:
| Big fan of her book as well though I don't know if the
| recommended tools are still relevant.
| srid wrote:
| Which book are you referring to?
| technetist wrote:
| Probably "SVG Animations" available through O'Reilly. It is
| from 2017. While many of the frameworks used have come and
| gone; there are a few stable concepts. If you can get it on
| sale, I'd recommend. Full price is a hard sell.
| j45 wrote:
| Appreciate the intro to the book above - two additional
| useful SVG books. I think O'Reilly has a few more SVG
| titles
|
| SVG Essentials: https://www.oreilly.com/library/view/svg-
| essentials-2nd/9781...
|
| SVG Text Layout:
| https://www.oreilly.com/library/view/svg-text-
| layout/9781491...
|
| The fact there's a book on just text layout helped me
| learn how much depth there is in SVG.
| jarek-foksa wrote:
| From the table of contents this looks like a book
| sponsored by and written to promote GreenSock. Which
| would be fine if the title was not misleading. Apparently
| SMIL is mentioned only in one chapter as "not suggested"
| solution.
| baosoy wrote:
| I worked on a project that did something fun with SVGs like this.
| It was built with React, and we had a series of still
| illustrations with an animated element, with its colour
| controlled by a CMS.
|
| The frontend would basically call an API that would return an SVG
| image with the right colour assigned and the animation done by
| hiding and showing svg elements.
|
| You can see an example here:
| https://web.archive.org/web/20221020133516im_/https://uncrow...
| joshuaturner wrote:
| "A Deep Dive Into SVG Path Commands" by Nanda Syahrasyad [0] is
| really great for understanding how SVG paths are composed. It's
| from almost 2 years ago now and really opened my eyes to all that
| SVGs can do and exactly how they're doing it.
|
| [0] https://www.nan.fyi/svg-paths
| AndrewSwift wrote:
| 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
| exabrial wrote:
| All I want is a browser that executes WASM and displays SVG...
| get out out of JS/HTML hell.
| staindk wrote:
| Great article! On mobile I can't find anywhere to demo/see the
| animated content in action, not sure if it's desktop only or
| what.
| xyst wrote:
| svg based games, wen?
| xerox13ster wrote:
| wasn't that flash player?
| flaviuspopan wrote:
| soon
| braebo wrote:
| Complex animated SVG is fun to roll until you get into the weeds
| of SMIL and Safari bricks your phone for missing a leading 0 on a
| float or some random nonsense.
| hansvm wrote:
| "bricks"?
| chrisweekly wrote:
| It's slang; picture a literal brick (akin to a rock or
| stone). Your device is "bricked" if something has rendered it
| useless.
| EE84M3i wrote:
| I think GP is suggesting that the idea the GGP encountered
| an SVG that bricked their iPhone (without being a
| specifically crafted exploit payload) is an extraordinary
| claim that would require extraordinary evidence.
| lawik wrote:
| Also easy to interpret generously as hyperbole.
|
| Especially if you know how easy it can be to accidentally
| do something that works fine in other browsers but makes
| Safari kill the tab.
|
| Doesn't actually brick the device but a fairly hard
| failure in the browser.
| hansvm wrote:
| GP was right. I was pretty sure your interpretation is
| correct, but I've seen enough things over the years that
| I was curious if there were any more details about actual
| bricking.
| intrasight wrote:
| Haven't done much recently, but I do really like SVG. I did a fun
| project for a grid scale battery company in 2017. I generated
| graphical reports of battery status and health. I used a .Net
| extension in Sql Server to generate the graphics from the
| database.
| deivid wrote:
| 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/
| danielstocks wrote:
| Made a small silly game recently just for fun, using mostly CSS
| animated SVG tiles for rendering: https://pipeline-
| panic.vercel.app/
| perilunar wrote:
| Nice!
| two_handfuls wrote:
| It's a fun little game, thank you for sharing!
| danielstocks wrote:
| Source code can be found here:
| https://github.com/danielstocks/pipeline-panic
| chrisweekly wrote:
| This is a great little game! Thanks for sharing the source, too
| -- v nicely done.
| vunderba wrote:
| Nice. Reminds me of the board game Waterworks from the 70s.
|
| https://boardgamegeek.com/boardgame/333/waterworks
| fitsumbelay wrote:
| 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
| snitty wrote:
| >height="20"
|
| What fresh hell is this?
| perilunar wrote:
| What's the issue?
|
| HTML attribute: height="20"
|
| CSS property: height: 20px;
|
| JS statement: element.style.height = "20px";
| benjanik wrote:
| For anyone who is using creatively using JS to create SVG
| dynamically and looking for work, DM me!
| all2 wrote:
| Not that guy, but just chiming in so you have some visibility.
| perilunar wrote:
| Couple of (nice?) things I've built with SVG:
|
| Sun Clock: https://sunclock.net
|
| Degrees What?: https://degreeswhat.com
| slow_turtle3 wrote:
| oh wow!!
| eMPee584 wrote:
| A lot of ecosystem vibe seems to go to Lottie at the moment
| though.. does SVG cover a matching feature set? is there hope for
| a conversion tool?
| Voultapher wrote:
| > 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.
| RobotToaster wrote:
| Sounds like a problem with apple's implementation? I don't have
| any problem with firefox on an old 9th gen i5.
| leptons wrote:
| > 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 wrote:
| 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.
| imhoguy wrote:
| I really miss Macromedia Flash. There wasn't a single tech like
| Flash and SWF format which flourished with so many indie games
| and animated movies available without any extra downloads (other
| than Flash Player). Barier to entry was so low.
|
| Now, take SVG, it has potential to do everything what SWF could.
| But there is no editor like Flash and scene/object based coding
| solution like ActionScript. And each browser has own quirks so
| only simple SVG is guaranteed to be displayed everywhere.
| 7952 wrote:
| Well it still exists as Adobe Animate which can export to html.
|
| Comparing SVG to Flash seems like an apples to oranges
| comparison anyway. The format does not have to do everything
| that Flash did but can rely on the other technologies in the
| browser.
| jefozabuss wrote:
| I think web assembly can be comparable, e.g. unity/unreal/godot
| can compile to the browser pretty easily.
|
| The problem is that each of these apps can be quite bloated and
| in the tens of MBs range not the usual single digit MB.
| mettamage wrote:
| Sounds like there is a startup opportunity here to recreate
| this
| gocsjess wrote:
| 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 wrote:
| What performance issues have you encountered? Perf was decent
| 10 years ago so long as you avoided filters, but even that has
| improved.
| defanor wrote:
| 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.
| paulryanrogers wrote:
| Fun to see how apparent boundaries can be pushed or broken with
| clever use of lesser known features.
|
| That said, most of this is probably better done with CSS today.
|
| My only professional exposure to SVG was when a pen tester found
| my predecessor's code had unintentionally allowed them, and that
| one can do injection attacks from the SVG itself. Of course this
| was around the time a client discovered SVG worked for them, so I
| had to make support official _and_ defeat injection attacks. Good
| times.
| rjinman wrote:
| I wrote a game of Tetris in JavaScript with SVG many years ago.
| It had nice graphics and was smoothly animated. I hadn't heard of
| anyone else using SVG like that at the time.
|
| I also made a game called Pro Office Calculator (available on
| Steam), which includes a Doom-style 3D engine for which I used
| Inkscape as my map editor. Here's an example of a map:
| https://github.com/robjinman/pro_office_calc/blob/develop/da...
| enduser wrote:
| Reminds me of Avara which used MacDraw as a level editor. Very
| cool!
| rorads wrote:
| 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...
| soup10 wrote:
| i'll be a contrarian, that css and svg "hacks" like this are
| "impressive" are a symptom of a web-platform that is dogshit for
| multimedia. If a game did this nobody would even blink, the fact
| that it's another convoluted css hack makes it "notable".
___________________________________________________________________
(page generated 2025-04-13 23:01 UTC)