You can also make individual elements of an svg interactive by embedding as an object. Try clicking on the circles of the brownian music logo here https://owen.cafe/projects/
I think of object as more of an iframe (which you can also use for svgs IIRC), but I’m sure the standards differentiate better.
I ran into trouble inlining SVGs, because some of the SVGs I was inlining contained inline <style> tags that were leaking out into the rest of the document and affecting other SVGs on the page. I ended up having to do some postprocessing on them; basically I assigned each inlined SVG a unique id and then rewrote the contents of any <style> contained within to prefix each selector with the id, so that the rules would only apply to things within the SVG that contained the <style>. I wrote about it in my blog here: https://jordemort.dev/blog/fixing-leaky-svg-style-tags/
I use dark mode. I would call it fine if you put a white background behind just the diagram, and some white padding around them so that dark lines near the edge of the diagram aren’t lost.
The “Chroma doesn’t have a TLA+ grammar” issue is one of the reasons I’m still on Hugo 0.37.
Also doing diagrams in GoAT seems just awful.
Well it’s good to know if I implement TLA+ highlighting for Hugo (one way or another) there would be at least one other user!
you also could’ve added CSS with a prefers-color-scheme media query to the SVG files and not need to inline them
Interesting, how would that work? Do you have an example?
https://hexplo.de/ This pure-svg game of mine has a stylesheet.
If you embed an svg as an img, inline styles inside the svg will work, but external stylesheets linked form the svg won’t.
However, you can load the svg as an object element, then the svg can reference external css. This answer goes through it: https://stackoverflow.com/a/50286256/6522680
You can also make individual elements of an svg interactive by embedding as an object. Try clicking on the circles of the brownian music logo here https://owen.cafe/projects/
I think of object as more of an iframe (which you can also use for svgs IIRC), but I’m sure the standards differentiate better.
I ran into trouble inlining SVGs, because some of the SVGs I was inlining contained inline
<style>tags that were leaking out into the rest of the document and affecting other SVGs on the page. I ended up having to do some postprocessing on them; basically I assigned each inlined SVG a uniqueidand then rewrote the contents of any<style>contained within to prefix each selector with theid, so that the rules would only apply to things within the SVG that contained the<style>. I wrote about it in my blog here: https://jordemort.dev/blog/fixing-leaky-svg-style-tags/I use dark mode. I would call it fine if you put a white background behind just the diagram, and some white padding around them so that dark lines near the edge of the diagram aren’t lost.