Mehrere Möglichkeiten zum Einfügen von SVG in HTML-Seiten

<svg Breite="400" Höhe="300" id="testSvg">
   <circle cx="100" cy="100" r="50" fill="rot" stroke="schwarz" strock-width="2" id="testCircle"></circle>
</svg>

//Sie können CSS verwenden, um den Stil von SVG zu steuern, aber die Attribute unterscheiden sich von denen gewöhnlicher Webelemente <style type="text/css">
   #testSvg {border:1px solid #ccc;}
   #testSvg Kreis {
   	Füllung: rot;
   	Strich: blau;
   	Strichstärke: 3;
   }
</Stil>

//Sie können JS verwenden, um SVG zu bearbeiten, einfache Animationen zu erstellen usw. <script type="text/javascript">
   var Kreis = document.getElementById("testCircle");
   circle.addEventListener("klicken", Funktion(e) {
   	console.log("Kreis anklicken ...");
   	Kreis.setAttribute("r", 65);
   }, FALSCH);
</Skript>

//Zusätzlich zur Verwendung von JS können Sie SVGs eigenes Animate verwenden, um Animationseffekte zu erstellen<svg width="400" height="300" id="testSvg">
   <Kreis cx="100" cy="100" r="50" id="TestKreis">
   	<animate attributeName="cx" von="100" bis="300" Dauer="2s" repeatCount="unbestimmt"></animate>
   </Kreis>
</svg>

//Verwenden Sie das <img>-Tag <img src="test.svg'" />
//Oder Base64-Kodierung von SVG <img src="data:image/svg+xml;base64,[data]" />

//Verwenden Sie das <embed>-Tag <embed id="embedSvg" type="image/svg+xml" src="test.svg"></embed>
//SVG-DOM abrufen
var embedSvg = document.getElementById("embedSvg").getSVGDocument();
console.log("SVG DOM: ", embedSvg);
		
//Verwenden Sie das <object>-Tag <object id="objectSvg" type="image/svg+xml" data="test.svg"></object>
//SVG-DOM abrufen
var objectSvg = document.getElementById("objectSvg").getSVGDocument();
console.log("SVG DOM: ", ObjektSvg);

//Verwenden Sie das <iframe>-Tag <iframe id="iframeSvg" src="test.svg"></iframe>
//SVG-DOM abrufen
var iframeSvg = document.getElementById("iframeSvg").contentDocument;
console.log("SVG DOM: ", iframeSvg);

<style type="text/css">
	.svg-div {
		Breite: 400px;
		Höhe: 300px;
		Hintergrund: URL („test.svg“) keine Wiederholung Mitte / 50 %;
		Rand: 1px durchgezogen #ccc;
	}
</Stil>

<div Klasse="svg-div"></div>

var svgStr = neuer XMLSerializer().serializeToString(document.getElementById("testSvg"));
konsole.log(svgStr);