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.
That'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.
90% of your users will benefit from it without even realising. 9.9% will silently appreciate it. If you're lucky, the remaining 0.1% will tell you they appreciate it!
Another thing to watch out for with SVGs is how they appear in RSS readers or browser reader views. If you're using external SVG files then it should be fine. If you've optimized them by embedding into the HTML, then you need to be careful. If they rely on CSS rules in the page's CSS then it's not going to work well. For my website I try to make the SVGs self-sufficient by setting the viewBox, width, and height attributes, using a web safe font, and only relying on internal styles. You can still get some measure of light/dark mode support by setting fill or stroke to currentColor.
My advice, for web pages: always specify the <svg> width and height attributes, or the width and height properties in a style attribute, because if non-inline CSS doesn’t load (more common, for various reasons, than most people realise), the SVG will fill the available width. And you probably don’t want your 24×24 icon rendered at 1900×1900.
(For web apps, I feel I can soften a bit, as you’re more likely to be able to rely on styles. But I would still suggest having appropriate width/height attributes, even if you promptly override them by CSS.)
To complete the test, the website needs an HTML page that is mostly SVG. I think that might stand a chance of getting into the main search results rather than just the image search.
Also of interest for me would be whether SVG description markup gets picked up in the index.
To complete the search of possibilities, having the SVG generated by Javascript on page load would be of interest, for example, with some JSON object of data that then gets parsed to plot some SVG images.
Your SVG graphs are very neat and nobody caring is a feature not a bug. If they were blurry PNGs then people might notice but nobody notices 'perfection', just defects.
I noticed you were using 'NASA numbers' in your SVGs. Six decimal places for each point on a path is a level of precision that you can cut down with SVGOMG or using the export features from Inkscape. I like to go for integers when possible in SVG.
The thing with SVG is that the levels of optimisation go on forever. For example, I would set the viewbox coordinates so that (0, 0) is where the graph starts. Nobody would ever notice or care about that, but it would be something I would have to do.
Oh man, this is a deep mine to dig. I haven't even thought about svg size optimization. The default blog template I used really wants me to use hero images, and the jpgs are already hefty. I just looked at my network panel, and it seems the font files are loaded once per svg on initial load and then are cached.
What is the motivation for viewbox coordinates being at (0,0)? I have been thinking about setting chart gutters so that the graph is left aligned with the text, but this seems like an orthogonal issue.
> Also the sizing of the text in the chart and how it is displayed in your page is tightly coupled and requires some forethought.
I used to make a lot of charts with R/ggplot and the big disadvantage is, as you mentioned, the sizing of elements, especially text. So I wrote a small function that would output the chart in different sizes and a tiny bit of JS to switch between them at different breakpoints. It worked pretty well I think, the text was legible on all devices, though I still had to check that it looks fine and elements aren't suddenly overlapping or anything.
Another advantage of SVGs is that they can have some interactivity. You can add tooltips, hovers, animation and more. I used ggiraph for that: https://ardata.fr/ggiraph-book/intro.html
It does come up in normal results for me, I don't need to go to the images section, the page has keyword for testing lmtbk4mh, see result https://www.google.com/search?q=lmtbk4mh
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.
Thanks 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.
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.
> 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.
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 )
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.
Readit News
* 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...
[1] https://www.masswerk.at/6502/6502_instruction_set.html#stack
- smaller file sizes
- dark mode
- readable text
- selectable text
(For web apps, I feel I can soften a bit, as you’re more likely to be able to rely on styles. But I would still suggest having appropriate width/height attributes, even if you promptly override them by CSS.)
Also of interest for me would be whether SVG description markup gets picked up in the index.
To complete the search of possibilities, having the SVG generated by Javascript on page load would be of interest, for example, with some JSON object of data that then gets parsed to plot some SVG images.
Your SVG graphs are very neat and nobody caring is a feature not a bug. If they were blurry PNGs then people might notice but nobody notices 'perfection', just defects.
I noticed you were using 'NASA numbers' in your SVGs. Six decimal places for each point on a path is a level of precision that you can cut down with SVGOMG or using the export features from Inkscape. I like to go for integers when possible in SVG.
The thing with SVG is that the levels of optimisation go on forever. For example, I would set the viewbox coordinates so that (0, 0) is where the graph starts. Nobody would ever notice or care about that, but it would be something I would have to do.
What is the motivation for viewbox coordinates being at (0,0)? I have been thinking about setting chart gutters so that the graph is left aligned with the text, but this seems like an orthogonal issue.
I used to make a lot of charts with R/ggplot and the big disadvantage is, as you mentioned, the sizing of elements, especially text. So I wrote a small function that would output the chart in different sizes and a tiny bit of JS to switch between them at different breakpoints. It worked pretty well I think, the text was legible on all devices, though I still had to check that it looks fine and elements aren't suddenly overlapping or anything.
Another advantage of SVGs is that they can have some interactivity. You can add tooltips, hovers, animation and more. I used ggiraph for that: https://ardata.fr/ggiraph-book/intro.html
It’s way undervalued and rarely gets updates.
https://gionkunz.github.io/chartist-js/
I wrote a small graphing library for mine [1], but it has limitations.
[1] https://coffeespace.org.uk/projects/sound-source-delta.html
[1] https://www.damninteresting.com
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.
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.
They do get indexed by Google, and we take some extra steps to ensure usability.
Deleted Comment
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 )
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).