SVG article example

cmbuckley · cmbuckley · commit 088a907d78ab · 2026-01-12T22:39:24.000Z
diff --git a/_posts/2026-01-10-making-svgs-dark-mode-reading-mode-friendly.md b/_posts/2026-01-10-making-svgs-dark-mode-reading-mode-friendly.md
@@ -9,7 +9,7 @@ image:
   meta:
     src: /files/2026/01/flowchart.png
     alt: A diagram in light and dark modes
-last_modified_at: 2026-01-10 23:41 +0000
+last_modified_at: 2026-01-12 22:39 +0000
 ---
 
 I use Scalable Vector Graphics (SVGs) on this site as they're an effective format for diagrams; they can be easily modified, styled, animated and localised.
@@ -48,7 +48,9 @@ There's no way to apply CSS to the reading mode view, so any background colour n
 </svg>
 ```
 
-Again, this isn't exactly a satisfying solution, but it does mean a single SVG can be used in all rendering contexts.
+Again, this isn't exactly a satisfying solution, but it does mean a single SVG can be used in all rendering contexts. Here's an example:
+
+{% include figure.html object="/files/2026/01/example.svg" alt="A rectangle labelled 'Hello world'" %}
 
 Have I missed a neater solution? Is there something I've not considered with this approach? Do other browsers run into the same (or different) problems?
 
diff --git a/files/2026/01/example.svg b/files/2026/01/example.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
+  <style>
+    @media (scripting: enabled) { .bg { fill: none !important; } }
+    :root { --curr: black; }
+    .rect { stroke: var(--curr); fill: none; }
+    text { fill: var(--curr); }
+    @media (prefers-color-scheme: dark) {
+        :root { --curr: #d1d1d1; }
+	}
+  </style>
+  <rect class="bg" height="100%" width="100%" style="fill:white" />
+  <rect class="rect" x="50" y="50" width="200" height="200" />
+  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">Hello world!</text>
+</svg>
