SVG/Einbindung

Aus SELFHTML-Wiki
< SVG
Wechseln zu: Navigation, Suche

Es gibt viele verschiedene Möglichkeiten svg-Grafiken oder ganze SVG-Codeabschnitte in Webseiten einzubinden.

Einbindung externer SVG-Dateien[Bearbeiten]

mit dem img-Element[Bearbeiten]

Die Einbindung von .svg- Grafiken ist sehr einfach, entweder direkt über das img-Element, oder mit Hilfe von object.

Beispiel: svg-Grafiken einbinden ansehen …
<img alt="self-Logo" src="Self-Logo.svg">
Beachten Sie: Der IE9-11 skaliert SVG-Grafiken mit width- und height-Attributen nicht. Durch dazu Hinzufügen eines viewBox-Attributs wird dieses Problem gelöst.

als Multimedia-Objekt mit object[Bearbeiten]

Die Variante mit object bietet folgende Vorteile:

  • Fallback-Text oder .png-Bild für den IE8.
  • Animation des Objekts durch JavaScript möglich
  • Formen können im SVG-Quelltext mit Links ergänzt werden
Beispiel: svg-Grafiken einbinden ansehen …
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
</head>

<body>
  <h1>svg-Grafiken einbinden</h1>
 
  <object data="Self-Logo.svg" type="image/svg+xml">
  
    <!---Fallback--->
    Ihr Browser kann leider kein svg darstellen!  
  </object>

    
</body>
</html>

Einbindung in CSS[Bearbeiten]

als externe Grafik[Bearbeiten]

SVG-Grafiken können aber auch als background-image in CSS eingebunden werden.

Beispiel: Initial ansehen …
p::first-letter{
/* Image-Replacement */ 
  border: 0; 
  font: 0/0 a; 
  text-shadow: none; 
  color: transparent;
}

p span{
  display:inline-block;
  float:left;
  width: 98px;
  height:106px;
  margin-right: 0.3em; 
 
/* Hintergrundbild */
  background-image: url("http://wiki.selfhtml.org/images/7/77/Initiale_E.svg");
  background-repeat: no-repeat;
  background-size: contain;
}
<p>
  <span>E</span>s war einmal eine kleine süße Dirne, 
  ...
</p>
In diesem Beispiel wurde der Anfangsbuchstabe des Texts durch eine SVG-Grafik ersetzt (Initiale). Das Hintergrundbild wurde mit background-size: contain; passend skaliert.

als eingebundenes SVG-Markup[Bearbeiten]

Externe Grafiken benötigen einen zusätzlichen http-Request. Wenn Sie diesen umgehen wollen, können Sie die SVG-Grafik auch direkt innerhalb der background-image-Eigenschaft notieren:

Beispiel ansehen …
a {
  display: inline-block;
  text-decoration: none;  
  padding-right: 1em;
  background: 
    url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="2,2 5,2 5,3 3,3 3,9 9,9 9,7 10,7 10,10 2,10"/><polygon points="6.2,2 10,2 10,5.79 8.58,4.37 6.5,6.5 5.5,5.5 7.6,3.4"/></svg>') right no-repeat;	
}
Anstelle einer externen Referenz wird das SVG-Markup direkt notiert.
Beachten Sie, dass Sie aus dem SVG-Code alle Zeilenumbrüche entfernen müssen.
Die Daten in Data-URLs müssen laut Standard URL-encodiert sein. Viele Browser akzeptieren nicht URL-encodierte SVGs, im IE werden sie jedoch nicht ausgeführt.

Siehe auch


Eine Alternative wäre die base64-Codierung der Grafik. Sie spart einen HTTP-Request, da die Grafikinformationen direkt im Stylesheet angegeben werden, ist aber ca. ein Drittel größer als die ursprüngliche Datei. Angesichts der größeren Dateigröße der URL-encodierten SVG-Grafik ist dies hier aber zu vernachlässigen.

Beispiel: Einbindung als Data-URI
a {
  background: url("data:image/svg+xml;base64,[data]");
}

inline-SVG in HTML[Bearbeiten]

Alternativ kann eine SVG-Grafik mithilfe des svg-Elements inline im HTML dargestellt werden. Dieser Code kann dann durch CSS formatiert, bzw. durch JavaScript animiert und transformiert werden.

Beispiel: svg-Grafiken einbinden ansehen …
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Beispiel: Einbindung von Inline-SVG</title>
</head>
 
<body>
  <h1>Beispiel: Einbindung von Inline-SVG</h1>
  <svg>
  <style>
    .gelb{
	fill:	rgb(223,172,32);
	stroke-width:	1px;
	stroke:	rgb(40,130,225);
    }
    .blau{
	fill:	rgb(57,131,171);
    }
 
    .linie,.pblau,.quad {
        fill:	none;
	stroke-width:	1px;
	stroke-linecap:	round;
	stroke:	rgb(40,130,225);	
    }
 
    .pblau{
	fill:	rgb(40,130,225);
	stroke:white;
    }
    .quad{
	fill:	white;
    }
 
</style>
  <g id="Layer1">
    <path class="gelb"
	      d="M141,195 C164,189 178,173 178,136 C178,87 150,85 111,74 C106,73 86,67 82,64 C81,62 81,60 81,59 C81,46 89,48 100,48 C110,48 120,48 131,49 
	         C138,50 145,51 152,51 C170,51 170,38 170,23 C170,13 168,8 163,5 L183,5 C199,5 195,10 195,169 L195,183 C195,189 189,195 183,195 L141,195 Z"/>
    <path class="blau" 
	      d="M37,195 L16,195 C10,195 5,189 5,183 L5,16 C5,10 10,5 16,5 L61,5 C39,11 24,26 24,62 C24,75 27,91 37,100 C55,117 114,125 119,130 C121,133 
		     120,137 120,140 C120,150 114,150 105,150 C92,150 79,149 66,148 C59,147 51,145 44,145 C30,145 28,156 28,167 L28,174 C28,186 28,192 37,195Z" />
  </g>
 
  <g id="Linien">
    <path d="M111,74 L150,84" class="linie"/>
    <path d="M178,174 L178,87" class="linie"/>
    <path d="M141,195 L165,189" class="linie"/>
  </g>
    <g id="Punkte_blau">
      <path d="M165,185 C167,185 169,186 169,189 C169,191 167,193 165,193 C162,193 161,191 161,189 C161,186 162,185 165,185Z" class="pblau"/>
      <path d="M178,170 C180,170 182,171 182,174 C182,176 180,178 178,178 C176,178 174,176 174,174 C174,171 176,170 178,170Z" class="pblau"/>
      <path d="M178,132 C180,132 182,133 182,136 C182,138 180,140 178,140 C176,140 174,138 174,136 C174,133 176,132 178,132Z" class="pblau"/>
      <path d="M178,83 C180,83 182,84 182,87 C182,89 180,91 178,91 C176,91 174,89 174,87 C174,84 176,83 178,83Z" class="pblau"/>
      <path d="M150,80 C152,80 154,81 154,84 C154,86 152,88 150,88 C147,88 146,86 146,84 C146,81 147,80 150,80Z" class="pblau"/>
    </g>
   <g id="Punkte_weiss">
      <path d="M111,70 C113,70 116,72 116,74 C116,76 113,79 111,79 C109,79 107,76 107,74 C107,72 109,70 111,70Z" class="quad"/>
      <path d="M82,59 C84,59 87,61 87,63 C87,65 84,68 82,68 C80,68 78,65 78,63 C78,61 80,59 82,59Z" class="quad"/>
      <path d="M81,54 C83,54 86,56 86,58 C86,60 83,63 81,63 C79,63 77,60 77,58 C77,56 79,54 81,54Z" class="quad"/>
      <path d="M99 44C101 44 104 46 104 48.5 C104 50 101 53 99 53C97 53 95 50 95 48C95 46 97 44 99 44Z" class="quad"/>
      <path d="M131,45 C133,45 136,47 136,49 C136,51 133,54 131,54 C129,54 127,51 127,49 C127,47 129,45 131,45Z" class="quad"/>
      <path d="M151,47 C153,47 156,49 156,51 C156,53 153,56 151,56 C149,56 147,53 147,51 C147,49 149,47 151,47Z" class="quad"/>
      <path d="M170,19 C172,19 175,21 175,23 C175,25 172,28 170,28 C168,28 166,25 166,23 C166,21 168,19 170,19Z" class="quad"/>
   </g>
   <g id="Quadrate">
      <rect x="137" y="191" width="8" height="8" class="quad"/>
      <rect x="179" y="191" width="8" height="8" class="quad"/>
      <rect x="191" y="179" width="8" height="8" class="quad"/>
      <rect x="191" y="12" width="8" height="8" class="quad"/>
      <rect x="179" y="1" width="8" height="8" class="quad"/>
      <rect x="159" y="1" width="8" height="8" class="quad"/>
    </g>
  </svg>
</body>
</html>

In der vorliegenden Dokumentation werden wir uns hauptsächlich mit dieser direkten Art der Einbindung von SVG-Grafiken in Webseiten beschäftigen, die viele Vorteile bietet.

Weblinks[Bearbeiten]