Merge pull request #547 from cmbuckley/svg-reader-mode

SVG Reader Mode

Author: cmbuckley

_data/fingerprints.yml

@@ -3,4 +3,4 @@ icons: 715715b9
 maths: 5414f235
 scripts: 5220ed99
 search: b74b56ab
-style: 3c9360bb
+style: 7179d42c

_includes/figure.html

@@ -16,6 +16,7 @@
   </video>
 {%- elsif include.img or include.object %}
   {% if include.url %}<a href="{{ include.url }}">{%- endif -%}
+
     {%- if include.img %}<img src="{{ include.img }}"
     {%- else %}<object role="img" data="{{ include.object }}"
     {%- endif %}
@@ -24,7 +25,12 @@
         {%- if include.alt %}{{ include.alt }}
         {%- elsif include.url %}{{ include.caption | default: 'View larger image' }}
         {%- endif -%}
-    ">{% if include.object %}</object>{%- endif %}
+    ">
+
+  {%- if include.object %}</object>
+  <img src="{{ include.object }}" alt="" class="rm-only" />
+  {%- endif -%}
+
   {%- if include.url %}</a>{% endif %}
 {%- endif %}
 {%- if include.caption %}

_includes/v.html

@@ -1,7 +1,7 @@
 {%- unless site.suppress_fingerprints -%}
   ?v=
 
-  {%- assign fingerprints = 'icons: 715715b9,maths: 5414f235,scripts: 5220ed99,search: b74b56ab,style: 3c9360bb' | split: ',' -%}
+  {%- assign fingerprints = 'icons: 715715b9,maths: 5414f235,scripts: 5220ed99,search: b74b56ab,style: 7179d42c' | split: ',' -%}
   {%- assign found = false -%}
 
   {%- if jekyll.environment == 'production' -%}

_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?
 

_sass/_custom.scss

@@ -28,6 +28,11 @@ mark {
     @extend %sr-only;
 }
 
+.rm-only {
+    @extend %rm-only;
+    left: 0.1px;
+}
+
 .search-results:empty {
     @extend %loading;
     margin: 0 auto 1.5em;

_sass/partials/_mixins.scss

@@ -1,15 +1,20 @@
 // Screen reader only content
 %sr-only {
+    @extend %rm-only;
+    height: 1px;
+    clip-path: inset(50%);
+}
+
+// Reading mode only content
+%rm-only {
     position: absolute;
     margin: -1px 0 0 -1px;
     padding: 0;
     display: block;
     width: 1px;
-    height: 1px;
     font-size: 1px;
     line-height: 1px;
     overflow: hidden;
-    clip: rect(0,0,0,0);
     border: 0;
     outline: 0;
 }