diff --git a/docs/HowTo/SVG.md b/docs/HowTo/SVG.md
new file mode 100644
index 000000000..fcb79b3c2
--- /dev/null
+++ b/docs/HowTo/SVG.md
@@ -0,0 +1,43 @@
+---
+layout: none
+---
+
+<h3 style='text-align:center'>SVG</h3>
+
+~~~svg
+    <svg
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 100 100"
+        height="20%" width="20%">
+        <rect
+            width="50%" height="50%"
+            x="25%" y="25%"
+            class="purple-stroke blue-fill" />
+        <circle 
+            r="25%" cx="50%" cy="50%" 
+            class="red-stroke green-fill" />
+        <line 
+            x1="0%" x2="100%" y1="50%" y2="50%"
+            class="purple-stroke" />
+    </svg>
+~~~
+
+<div style='text-align:center'>
+<svg
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+    height="20%" width="20%">
+    <rect
+        width="50%" height="50%"
+        x="25%" y="25%"
+        class="purple-stroke blue-fill" />
+    <circle 
+        r="25%" cx="50%" cy="50%" 
+        class="red-stroke green-fill" />
+    <line 
+        x1="0%" x2="100%" y1="50%" y2="50%"
+        class="purple-stroke" />
+</svg>
+</div>