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> <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> <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> <g id="edge1" class="edge"> <title>a0->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> <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> <g id="edge2" class="edge"> <title>a1->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> <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> <g id="edge9" class="edge"> <title>a1->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> <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> <g id="edge3" class="edge"> <title>a2->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> <g id="edge11" class="edge"> <title>a3->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> <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> <g id="edge12" class="edge"> <title>a3->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> <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> <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> <g id="edge4" class="edge"> <title>b0->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> <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> <g id="edge5" class="edge"> <title>b1->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> <g id="edge10" class="edge"> <title>b2->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> <g id="edge6" class="edge"> <title>b2->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> <g id="edge13" class="edge"> <title>b3->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> <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> <g id="edge7" class="edge"> <title>start->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> <g id="edge8" class="edge"> <title>start->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>
