View source for VIZ/Embedding SVG in HTML

== https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web ==

<svg width="224pt" height="409pt"
 viewBox="0.00 0.00 224.00 409.01" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 405.0146)">
<title>G</title>
<polygon fill="#ffffff" stroke="transparent" points="-4,4 -4,-405.0146 220,-405.0146 220,4 -4,4"/>
<g id="clust1" class="cluster">
<title>cluster_0</title>
<polygon fill="#d3d3d3" stroke="#d3d3d3" points="8,-64.2146 8,-357.0146 98,-357.0146 98,-64.2146 8,-64.2146"/>
<text text-anchor="middle" x="53" y="-340.4146" font-family="Times,serif" font-size="14.00" fill="#000000">process #1</text>
</g>
<g id="clust2" class="cluster">
<title>cluster_1</title>
<polygon fill="none" stroke="#0000ff" points="133,-64.2146 133,-357.0146 208,-357.0146 208,-64.2146 133,-64.2146"/>
<text text-anchor="middle" x="170.5" y="-340.4146" font-family="Times,serif" font-size="14.00" fill="#000000">process #2</text>
</g>
<!-- a0 -->
<g id="node1" class="node">
<title>a0</title>
<ellipse fill="#ffffff" stroke="#ffffff" cx="63" cy="-306.2146" rx="27" ry="18"/>
<text text-anchor="middle" x="63" y="-302.0146" font-family="Times,serif" font-size="14.00" fill="#000000">a0</text>
</g>
<!-- a1 -->
<g id="node2" class="node">
<title>a1</title>
<ellipse fill="#ffffff" stroke="#ffffff" cx="63" cy="-234.2146" rx="27" ry="18"/>
<text text-anchor="middle" x="63" y="-230.0146" font-family="Times,serif" font-size="14.00" fill="#000000">a1</text>
</g>
<!-- a0&#45;&gt;a1 -->
<g id="edge1" class="edge">
<title>a0&#45;&gt;a1</title>
<path fill="none" stroke="#000000" d="M63,-288.046C63,-280.3456 63,-271.1889 63,-262.6312"/>
<polygon fill="#000000" stroke="#000000" points="66.5001,-262.6278 63,-252.6279 59.5001,-262.6279 66.5001,-262.6278"/>
</g>
<!-- a2 -->
<g id="node3" class="node">
<title>a2</title>
<ellipse fill="#ffffff" stroke="#ffffff" cx="63" cy="-162.2146" rx="27" ry="18"/>
<text text-anchor="middle" x="63" y="-158.0146" font-family="Times,serif" font-size="14.00" fill="#000000">a2</text>
</g>
<!-- a1&#45;&gt;a2 -->
<g id="edge2" class="edge">
<title>a1&#45;&gt;a2</title>
<path fill="none" stroke="#000000" d="M63,-216.046C63,-208.3456 63,-199.1889 63,-190.6312"/>
<polygon fill="#000000" stroke="#000000" points="66.5001,-190.6278 63,-180.6279 59.5001,-190.6279 66.5001,-190.6278"/>
</g>
<!-- b3 -->
<g id="node8" class="node">
<title>b3</title>
<ellipse fill="#d3d3d3" stroke="#000000" cx="168" cy="-90.2146" rx="27" ry="18"/>
<text text-anchor="middle" x="168" y="-86.0146" font-family="Times,serif" font-size="14.00" fill="#000000">b3</text>
</g>
<!-- a1&#45;&gt;b3 -->
<g id="edge9" class="edge">
<title>a1&#45;&gt;b3</title>
<path fill="none" stroke="#000000" d="M74.8407,-217.9759C93.195,-192.8043 128.6326,-144.2041 150.1169,-114.74"/>
<polygon fill="#000000" stroke="#000000" points="152.9777,-116.7571 156.0414,-106.6149 147.3216,-112.6329 152.9777,-116.7571"/>
</g>
<!-- a3 -->
<g id="node4" class="node">
<title>a3</title>
<ellipse fill="#ffffff" stroke="#ffffff" cx="63" cy="-90.2146" rx="27" ry="18"/>
<text text-anchor="middle" x="63" y="-86.0146" font-family="Times,serif" font-size="14.00" fill="#000000">a3</text>
</g>
<!-- a2&#45;&gt;a3 -->
<g id="edge3" class="edge">
<title>a2&#45;&gt;a3</title>
<path fill="none" stroke="#000000" d="M63,-144.046C63,-136.3456 63,-127.1889 63,-118.6312"/>
<polygon fill="#000000" stroke="#000000" points="66.5001,-118.6278 63,-108.6279 59.5001,-118.6279 66.5001,-118.6278"/>
</g>
<!-- a3&#45;&gt;a0 -->
<g id="edge11" class="edge">
<title>a3&#45;&gt;a0</title>
<path fill="none" stroke="#000000" d="M48.8771,-105.9302C40.7465,-116.0678 31.3099,-129.9799 27,-144.2146 13.0904,-190.155 13.0904,-206.2742 27,-252.2146 30.2661,-263.0019 36.4764,-273.6038 42.8313,-282.5183"/>
<polygon fill="#000000" stroke="#000000" points="40.0487,-284.6414 48.8771,-290.499 45.6285,-280.4145 40.0487,-284.6414"/>
</g>
<!-- end -->
<g id="node10" class="node">
<title>end</title>
<polygon fill="none" stroke="#000000" points="133.2152,-36.3225 96.7848,-36.3225 96.7848,.1079 133.2152,.1079 133.2152,-36.3225"/>
<polyline fill="none" stroke="#000000" points="108.7848,-36.3225 96.7848,-24.3225 "/>
<polyline fill="none" stroke="#000000" points="96.7848,-11.8921 108.7848,.1079 "/>
<polyline fill="none" stroke="#000000" points="121.2152,.1079 133.2152,-11.8921 "/>
<polyline fill="none" stroke="#000000" points="133.2152,-24.3225 121.2152,-36.3225 "/>
<text text-anchor="middle" x="115" y="-13.9073" font-family="Times,serif" font-size="14.00" fill="#000000">end</text>
</g>
<!-- a3&#45;&gt;end -->
<g id="edge12" class="edge">
<title>a3&#45;&gt;end</title>
<path fill="none" stroke="#000000" d="M74.7996,-73.8523C81.0108,-65.2394 88.7817,-54.4636 95.8314,-44.6879"/>
<polygon fill="#000000" stroke="#000000" points="98.7733,-46.5923 101.7836,-36.4341 93.0956,-42.4979 98.7733,-46.5923"/>
</g>
<!-- b0 -->
<g id="node5" class="node">
<title>b0</title>
<ellipse fill="#d3d3d3" stroke="#000000" cx="168" cy="-306.2146" rx="27" ry="18"/>
<text text-anchor="middle" x="168" y="-302.0146" font-family="Times,serif" font-size="14.00" fill="#000000">b0</text>
</g>
<!-- b1 -->
<g id="node6" class="node">
<title>b1</title>
<ellipse fill="#d3d3d3" stroke="#000000" cx="170" cy="-234.2146" rx="27" ry="18"/>
<text text-anchor="middle" x="170" y="-230.0146" font-family="Times,serif" font-size="14.00" fill="#000000">b1</text>
</g>
<!-- b0&#45;&gt;b1 -->
<g id="edge4" class="edge">
<title>b0&#45;&gt;b1</title>
<path fill="none" stroke="#000000" d="M168.5047,-288.046C168.7186,-280.3456 168.9729,-271.1889 169.2106,-262.6312"/>
<polygon fill="#000000" stroke="#000000" points="172.7094,-262.7212 169.4885,-252.6279 165.7121,-262.5268 172.7094,-262.7212"/>
</g>
<!-- b2 -->
<g id="node7" class="node">
<title>b2</title>
<ellipse fill="#d3d3d3" stroke="#000000" cx="173" cy="-162.2146" rx="27" ry="18"/>
<text text-anchor="middle" x="173" y="-158.0146" font-family="Times,serif" font-size="14.00" fill="#000000">b2</text>
</g>
<!-- b1&#45;&gt;b2 -->
<g id="edge5" class="edge">
<title>b1&#45;&gt;b2</title>
<path fill="none" stroke="#000000" d="M170.757,-216.046C171.0779,-208.3456 171.4594,-199.1889 171.816,-190.6312"/>
<polygon fill="#000000" stroke="#000000" points="175.3133,-190.7649 172.2328,-180.6279 168.3194,-190.4735 175.3133,-190.7649"/>
</g>
<!-- b2&#45;&gt;a3 -->
<g id="edge10" class="edge">
<title>b2&#45;&gt;a3</title>
<path fill="none" stroke="#000000" d="M153.5874,-149.5082C136.258,-138.1653 110.6682,-121.4156 91.1028,-108.6092"/>
<polygon fill="#000000" stroke="#000000" points="92.8724,-105.5844 82.5885,-103.0362 89.0387,-111.4413 92.8724,-105.5844"/>
</g>
<!-- b2&#45;&gt;b3 -->
<g id="edge6" class="edge">
<title>b2&#45;&gt;b3</title>
<path fill="none" stroke="#000000" d="M171.7383,-144.046C171.2035,-136.3456 170.5677,-127.1889 169.9734,-118.6312"/>
<polygon fill="#000000" stroke="#000000" points="173.4632,-118.3613 169.2787,-108.6279 166.48,-118.8463 173.4632,-118.3613"/>
</g>
<!-- b3&#45;&gt;end -->
<g id="edge13" class="edge">
<title>b3&#45;&gt;end</title>
<path fill="none" stroke="#000000" d="M155.9735,-73.8523C149.6428,-65.2394 141.7225,-54.4636 134.5372,-44.6879"/>
<polygon fill="#000000" stroke="#000000" points="137.2132,-42.4189 128.4705,-36.4341 131.5728,-46.5646 137.2132,-42.4189"/>
</g>
<!-- start -->
<g id="node9" class="node">
<title>start</title>
<polygon fill="none" stroke="#000000" points="115,-401.0146 75.7627,-383.0146 115,-365.0146 154.2373,-383.0146 115,-401.0146"/>
<polyline fill="none" stroke="#000000" points="86.6698,-388.0182 86.6698,-378.011 "/>
<polyline fill="none" stroke="#000000" points="104.0929,-370.0182 125.9071,-370.0182 "/>
<polyline fill="none" stroke="#000000" points="143.3302,-378.011 143.3302,-388.0182 "/>
<polyline fill="none" stroke="#000000" points="125.9071,-396.011 104.0929,-396.011 "/>
<text text-anchor="middle" x="115" y="-378.8146" font-family="Times,serif" font-size="14.00" fill="#000000">start</text>
</g>
<!-- start&#45;&gt;a0 -->
<g id="edge7" class="edge">
<title>start&#45;&gt;a0</title>
<path fill="none" stroke="#000000" d="M105.4624,-368.9283C98.3843,-358.4745 88.541,-343.9367 80.1137,-331.4901"/>
<polygon fill="#000000" stroke="#000000" points="82.792,-329.2032 74.2872,-322.885 76.9957,-333.1278 82.792,-329.2032"/>
</g>
<!-- start&#45;&gt;b0 -->
<g id="edge8" class="edge">
<title>start&#45;&gt;b0</title>
<path fill="none" stroke="#000000" d="M124.4753,-369.2843C131.7813,-358.6975 142.0812,-343.7724 150.8274,-331.0987"/>
<polygon fill="#000000" stroke="#000000" points="153.779,-332.9837 156.5783,-322.7653 148.0178,-329.0078 153.779,-332.9837"/>
</g>
</g>
</svg>

== example 2 ==
 <svg
  version="1.1"
  baseProfile="full"
  width="300"
  height="200"
  xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
 </svg>
 
== example 2.1 ==
<iframe class="sample-code-frame" title="What is SVG sample" id="frame_what_is_svg" width="300" height="240" src="https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web/_sample_.what_is_svg.html" loading="lazy"></iframe>