[HN Gopher] Nice Things with SVG
___________________________________________________________________
Nice Things with SVG
Author : fmerian
Score : 253 points
Date : 2025-04-12 17:40 UTC (5 hours 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
| 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/
| 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...
| 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.
| 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.
| 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?
| 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.
| 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/
___________________________________________________________________
(page generated 2025-04-12 23:00 UTC)