Depot43-Unterlagen - SVG eigene ID

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>SVG-Animation - SVG eigene ID</title>
    <style>
	svg {
		max-width:400px;
	}
	#KreisAussen {
		stroke:blue;
  		stroke-width:6 ;
		fill: red;
	}
	#KreisInnen {
	    	stroke:white;
  		stroke-width:12 ;
		fill: blue;
	}
    </style>
</head>
    <body>
	<svg width="100%" height="100%" viewbox="0 0 224 226" version="1.1"> 
			<circle id="KreisAussen" cx="113.905" cy="111.538" r="100"></circle>  
			<circle id="KreisInnen" cx="111.982" cy="111.538" r="54.504"></circle>   
	</svg>
    </body>
</html>


 

            

SVG-Code kürzen

Eine einmal erstellte SVG-Datei kann einfach mit einem HTML-Editor (Brackets) bearbeitet werden. Der ursprüngliche Quellcode der SVG-Datei kann erheblich reduziert werden, wenn dieser innerhalb einer HTML-Datei verwendet wird.

Im Vergleich mit der ursprünglichen SVG-Datei: SVG in HTML, wurde gekürzt:

Alle Programmspezifischen Angaben im SVG-Element wurden gelöscht
Alle Style-Angaben im SVG-Element wurden gelöscht
Alle Style-Angaben in der Zeichnung wurden gelöscht !Beachte!

Ohne jede Style-Angabe sind alle Flächen (fill) und Konturen (stroke) schwarz
Diese müssen falls gelöscht mit CSS Formatiert werden
Werden Style-Angaben belassen, können sie mit CSS unter Verwendung von !important überschrieben werden

SVG-Code ergänzen

Es ist ohne weiteres möglich, eigene ID's oder Klassen in den SVG Quellcode einzufügen. Diese ID's können nun ganz gezielt mit CSS angesprochen werden.