[WIP] Contrast color svg

content/body/img.php

@@ -150,8 +150,8 @@
     <title id="circle-alt">A dark blue circle with text inside</title>
 
     <rect x="0" y="0" width="200" height="163" fill="none" fill-opacity="1"></rect>
-    <circle cx="81" cy="85" r="75" fill="#00a" stroke="#000" stroke-width="1"></circle>
-    <text id="svg-text" x="81" y="85" font-size="14px" text-anchor="middle" fill="#fff">
+    <circle cx="81" cy="85" r="75" class="circle" stroke="#000" stroke-width="1"></circle>
+    <text id="svg-text" x="81" y="85" font-size="14px" text-anchor="middle" class="text">
       I am text in a circle
     </text>
   </svg>
@@ -364,4 +364,35 @@
     }
   ]
 }
+</script>
+
+<h2>Use Embed to update a SVG</h2>
+
+<?php includeStats(["isForNewBuilds" => false]); ?>
+
+<p>
+  To ensure compatibility with Safari and allow dynamic color updates based on the color theme, use the <code>embed</code> HTML tag instead of the <code>img</code> tag to import SVGs. This approach facilitates greater flexibility in styling SVGs directly through CSS or JavaScript
+</p>
+
+<div id="svg-embed-example" class="enable-example">
+  <embed type="image/svg+xml" src="images/icons/add-embed.svg" role="presentation" title="Link SVG Image">
+</div>
+
+<?php includeShowcode("svg-embed-example"); ?>
+<script type="application/json" id="svg-embed-example-props">
+{
+  "replaceHtmlRules": {},
+  "steps": [
+    {
+      "label": "Add readable title",
+      "highlight": "title",
+      "notes": "Add title for accessibility"
+    },
+    {
+      "label": "Add role to embed",
+      "highlight": "role",
+      "notes": ""
+    }
+  ]
+}
 </script>

less/img.less

@@ -54,6 +54,21 @@
     }
 }
 
+#inline-svg-example{
+    .circle {
+        fill: #00a;
+        .enable__is-dark-mode &{
+            fill: #fff;
+        }
+    }
+    .text {
+        fill: #fff;
+        .enable__is-dark-mode &{
+            fill: #00a;
+        }
+    }
+}
+
 #svg-sprite-example {
     p {
         text-align: center;