From: Vladimír Vondruš <mosra@centrum.cz>
Date: Mon, 1 Jan 2018 17:45:30 +0000 (+0100)
Subject: css: make it possible to style <svg> as .m-image
X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~cjwatson/git?a=commitdiff_plain;h=74471aeb02b7909d13b5462761f988fe2c15726a;p=blog.git

css: make it possible to style <svg> as .m-image
---

diff --git a/css/m-components.css b/css/m-components.css
index 2453d358..62770e1e 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -983,7 +983,7 @@ a.m-button.m-dim:hover, a.m-button.m-dim:focus, a.m-button.m-dim:active {
 }
 
 /* Image */
-img.m-image {
+img.m-image, svg.m-image {
   display: block;
   margin-left: auto;
   margin-right: auto;
@@ -991,11 +991,11 @@ img.m-image {
 div.m-image {
   text-align: center;
 }
-img.m-image, div.m-image img {
+img.m-image, svg.m-image, div.m-image img {
   max-width: 100%;
   border-radius: var(--border-radius);
 }
-div.m-image.m-fullwidth img {
+div.m-image.m-fullwidth img, div.m-image.m-fullwidth svg {
   width: 100%;
 }
 
@@ -1348,7 +1348,7 @@ div.m-math.m-dim svg, svg.m-math.m-dim { fill: var(--dim-color); }
 p, ul, ol, dl, blockquote, pre, figure.m-code-figure, figure.m-console-figure,
 hr, article, article > header, article section,
 .m-note, .m-frame, .m-block, .m-button,
-div.m-scroll, table.m-table, div.m-image, img.m-image,
+div.m-scroll, table.m-table, div.m-image, img.m-image, svg.m-image,
 figure.m-figure, .m-imagegrid, div.m-math {
   margin-bottom: 1rem;
 }
@@ -1356,8 +1356,9 @@ p:last-child, ul:last-child, ol:last-child, dl:last-child, blockquote:last-child
 pre:last-child, figure.m-code-figure:last-child, figure.m-console-figure:last-child,
 hr:last-child, article:last-child, article section:last-child,
 .m-note:last-child, .m-frame:last-child, .m-block:last-child, .m-button:last-child,
-table.m-table:last-child, img.m-image:last-child, div.m-image:last-child,
-figure.m-figure:last-child, .m-imagegrid:last-child, div.m-math:last-child {
+table.m-table:last-child, img.m-image:last-child, svg.m-image:last-child,
+div.m-image:last-child, figure.m-figure:last-child, .m-imagegrid:last-child,
+div.m-math:last-child {
   margin-bottom: 0;
 }
 
@@ -1368,17 +1369,18 @@ li > p:last-child, li > blockquote:last-child, li > pre:last-child,
 li > figure.m-code-figure:last-child, li > figure.m-console-figure:last-child,
 li > .m-note:last-child, li > .m-frame:last-child, li > .m-block:last-child,
 li > .m-button:last-child, li > div.m-scroll:last-child,
-li > table.m-table:last-child, li > div.m-image:last-child,
-li > img.m-image:last-child, li > figure.m-figure:last-child,
-li > div.m-math:last-child {
+li > table.m-table:last-child,
+li > img.m-image:last-child, li > svg.m-image:last-child, li > div.m-image:last-child,
+li > figure.m-figure:last-child, li > div.m-math:last-child {
   margin-bottom: 1rem;
 }
 li:last-child > p:last-child, li:last-child > blockquote:last-child, li:last-child > pre:last-child,
 li:last-child > figure.m-code-figure:last-child, li:last-child > figure.m-console-figure:last-child,
 li:last-child > .m-note:last-child, li:last-child > .m-frame:last-child, li:last-child > .m-block:last-child,
 li:last-child > .m-button:last-child, li:last-child > div.m-scroll:last-child,
-li:last-child > table.m-table:last-child, li:last-child > div.m-image:last-child,
-li:last-child > img.m-image:last-child, li:last-child > figure.m-figure:last-child,
+li:last-child > table.m-table:last-child,
+li:last-child > img.m-image:last-child, li:last-child > svg.m-image:last-child,
+li:last-child > div.m-image:last-child, li:last-child > figure.m-figure:last-child,
 li:last-child > div.m-math:last-child {
   margin-bottom: 0;
 }
diff --git a/doc/css/components-test.rst b/doc/css/components-test.rst
index 5807edf6..a7057e5f 100644
--- a/doc/css/components-test.rst
+++ b/doc/css/components-test.rst
@@ -812,6 +812,34 @@ Image, fullwidth, link (yes, it should be pixelated):
       <a href="http://blog.mosra.cz/"><img src="{filename}/static/flowers-small.jpg" /></a>
     </div>
 
+SVG image:
+
+.. raw:: html
+
+    <svg class="m-image" width="80" height="80">
+      <text x="16" y="40" style="text-anchor: middle; fill: #ff0000">Hello</text>
+    </svg>
+
+SVG image, fullwidth, with link inside:
+
+.. raw:: html
+
+    <svg width="80" height="80" class="m-image m-fullwidth">
+      <a xlink:href="#"><text x="16" y="40" style="text-anchor: middle; fill: #ff0000">Hello</text></a>
+    </svg>
+
+SVG image, fullwidth, with link outside:
+
+.. raw:: html
+
+    <div class="m-image m-fullwidth">
+      <a href="#">
+        <svg width="80" height="80">
+          <text x="16" y="40" style="text-anchor: middle; fill: #ff0000">Hello</text>
+        </svg>
+      </a>
+    </div>
+
 Figures
 =======
 
diff --git a/doc/css/components.rst b/doc/css/components.rst
index 4b3e254a..12bbd26b 100644
--- a/doc/css/components.rst
+++ b/doc/css/components.rst
@@ -598,10 +598,10 @@ justified.
 `Images`_
 =========
 
-Putting :css:`.m-image` class onto the :html:`<img>` tag makes it centered,
-slightly rounded and sets its max width to 100%. Adding :css:`.m-fullwidth` on
-the image element works as expected. For accessibility reasons it's a good
-practice to include the ``alt`` attribute.
+Putting :css:`.m-image` class onto an :html:`<img>` / :html:`<svg>` tag makes
+the image centered, slightly rounded and sets its max width to 100%. Adding
+:css:`.m-fullwidth` on the image element works as expected. For accessibility
+reasons it's a good practice to include the ``alt`` attribute.
 
 .. code-figure::