An SVG is all you need • Hacker News Board

Re: An SVG is all you need

#11

Post by avsm » Thu, Dec 11, 2025, 8:53 PM UTC

martijn_himself wrote: post #10

>They are supported on just about every device and platform Except they aren't. I recently used a simple SVG in a background and Safari wasn't able to render it properly so after trying lots of different things I gave up and used different sizes of raster images instead.

What was the SVG that didn't work? In Jon's example in the original post, the SVG he embeds there was one he wrote in around 2005. That's a pretty impressive run for it to render 20 years on...

Re: An SVG is all you need

#12

Post by tracerbulletx » Thu, Dec 11, 2025, 8:56 PM UTC

This feels a little bit like discovering frontend software development? I guess we're done with the trend of being scared of bundling features and running them in the browser close to the user with JavaScript.

Re: An SVG is all you need

#13

Post by xxmarkuski » Thu, Dec 11, 2025, 9:01 PM UTC

I use ChatGPT to compress SVGs, in particular QR codes. Many QR code SVG generators produce inefficient SVGs, and conventional SVG compressors often lack the understanding required for some compression techniques. ChatGPT can replace alignment indicators with elements.

Is there a way to embed the data encoded in the QR code directly within the image? This would allow the data to be parsed directly by the browser, eliminating the need for computer vision to decode it again. Going further, for web images QR codes could be efficiently encoded and rendered by the browser.

Re: An SVG is all you need

#14

Post by psygn89 » Thu, Dec 11, 2025, 9:04 PM UTC

sturbes wrote: post #4

I just went down the same rabbit hole, it is totally fun! https://turbek.com/Designing-Interactive-SVGs-with-AI/ TLDR: - SVG image files: powerful like HTML - Supported widely in browsers - Designer tools make SVGs - SVGs are written in a language - LLMs are great at manipulating language - Designers can collaborate interaction into life

I don't think LLM's are that great at manipulating SVG unless you mean like small edits like rotation and font size. Cool article though, I'll have to think how I can leverage it.

Re: An SVG is all you need

#15

Post by ktpsns » Thu, Dec 11, 2025, 9:13 PM UTC

xxmarkuski wrote: post #13

I use ChatGPT to compress SVGs, in particular QR codes. Many QR code SVG generators produce inefficient SVGs, and conventional SVG compressors often lack the understanding required for some compression techniques. ChatGPT can replace alignment indicators with elements. Is there a way to embed the data encoded in the QR code directly within the image? This would allow the data to be parsed directly by the browser, eli…

I am not sure about your use case. There exist many JS libraries which will generate client side QR codes. How many of them do you handle that you optimize for file size? Or is it just an academic interest?

SVGs are XML so technically, yes, you can just embed your visually encoded payload data with namespaces attributes and elements. If you don't want to use namespaces, you can use off-canvas texts, hidden/opacity=0 texts or even XML comments. You can even use the regular metadata section of SVGs. You can make the whole QR code within the SVG a clickable link.

Re: An SVG is all you need

#16

Post by [deleted] » Thu, Dec 11, 2025, 9:14 PM UTC

xxmarkuski wrote: post #13

I use ChatGPT to compress SVGs, in particular QR codes. Many QR code SVG generators produce inefficient SVGs, and conventional SVG compressors often lack the understanding required for some compression techniques. ChatGPT can replace alignment indicators with elements. Is there a way to embed the data encoded in the QR code directly within the image? This would allow the data to be parsed directly by the browser, eli…

[deleted]

Re: An SVG is all you need

#17

Post by jonludlam » Thu, Dec 11, 2025, 9:21 PM UTC

Author here: I've just made a ninja edit of the post as it didn't really make clear a quite important point - the SVG is literally 20 years old, and still works, astonishingly. I'm not sure much else I wrote around the time would still work without some editing!

Re: An SVG is all you need

#18

Post by morshu9001 » Thu, Dec 11, 2025, 9:31 PM UTC

An SVG and JS, right? It's not interactive on its own.

Re: An SVG is all you need

#19

Post by orliesaurus » Thu, Dec 11, 2025, 9:31 PM UTC

My day job involves building dashboards, and SVGs have been invaluable for crisp icons and graphs... the portability across sizes is a blessing, but some of the more exotic filter effects still fail in certain browsers.

ALSO I've run into security reviews that flag inline SVGs because they can embed scripts... would love to see more tooling to lint and sanitize them before deployment.

BUT seeing a two-decade-old vector still render correctly gives me confidence that the core spec is solid.

Re: An SVG is all you need

#20

Post by stanac » Thu, Dec 11, 2025, 9:34 PM UTC

martijn_himself wrote: post #10

>They are supported on just about every device and platform Except they aren't. I recently used a simple SVG in a background and Safari wasn't able to render it properly so after trying lots of different things I gave up and used different sizes of raster images instead.

SVGs also are mostly unsupported for og:image tags (dependents on the app/browser). I know it's supper specific and I am not even sure if open graph is standardized protocol or not, but it's used everywhere.