DavidWhitten at 16:01, 26 November 2022

2022-11-26T16:01:07Z

DavidWhitten: /* example 2.1 */

2022-11-26T15:58:09Z

‎example 2.1

DavidWhitten at 15:55, 26 November 2022

2022-11-26T15:55:58Z

DavidWhitten at 15:54, 26 November 2022

2022-11-26T15:54:44Z

DavidWhitten at 15:54, 26 November 2022

2022-11-26T15:54:08Z

DavidWhitten: Created page with "== https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web ==
2022-11-26T15:51:52Z

Created page with "== 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..."

New page
== 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>

← Older revision		Revision as of 16:01, 26 November 2022
Line 191:		Line 191:
	</style>		</style>
	</nowiki>		</nowiki>
		+	== Example 2.2 ==
		+	<span style="background: url("fallback.png") no-repeat center;
		+	background-image: url("image.svg");
		+	background-size: contain;">Foobar</span>
		+
		+	{{Green\|BazQuux}}

@@ Line 185: / Line 185: @@
    height="87"
    width="100" />
 </nowiki>

← Older revision		Revision as of 15:55, 26 November 2022
Line 178:		Line 178:
	== example 2.1 ==		== example 2.1 ==
	<nowiki><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></nowiki>		<nowiki><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></nowiki>
		+
		+	<nowiki>
		+	<img
		+	src="equilateral.svg"
		+	alt="triangle with all three sides equal"
		+	height="87"
		+	width="100" />
		+	</nowiki>

← Older revision		Revision as of 15:54, 26 November 2022
Line 177:		Line 177:

	== example 2.1 ==		== 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>	+	<nowiki><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></nowiki>

← Older revision		Revision as of 15:54, 26 November 2022
Line 175:		Line 175:
	<circle cx="150" cy="100" r="90" fill="blue" />		<circle cx="150" cy="100" r="90" fill="blue" />
	</svg>		</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>

VIZ/Embedding SVG in HTML - Revision history

DavidWhitten at 16:01, 26 November 2022

DavidWhitten: /* example 2.1 */

DavidWhitten at 15:55, 26 November 2022

DavidWhitten at 15:54, 26 November 2022

DavidWhitten at 15:54, 26 November 2022