SVG/Tutorials/Einstieg/Einbindung

Aus SELFHTML-Wiki
< SVG‎ | Tutorials‎ | Einstieg(Weitergeleitet von Inline-SVG)
Wechseln zu: Navigation, Suche

Mit SVG erstellte Grafiken sind in erster Linie grafische Daten in Textform, die dann als SVG-Dokument abgespeichert werden. Die empfohlene Dateiendung ist .svg oder, wenn die Datei mit gzip komprimiert ist, .svgz. Der MIME-Type ist image/svg+xml.

Diese Kapitel zeigt verschiedene Möglichkeiten SVG-Grafiken oder ganze SVG-Codeabschnitte in Webseiten einzubinden.

SVG-Dokumente in Webseiten

Ursprünglich konnte man SVG-Dokumente nur in Bildbetrachtungsprogrammen wie dem Adobe SVG-Viewer, bzw. Batik-Viewer von Apache ansehen. Heute ist es möglich SVG direkt in allen Browsern ohne Plugins darzustellen. (Statistiken zeigen oft noch einige Promille von IE8-Nutzern. Dabei ist aber anzunehmen, dass es sich zum überwiegenden Teil um Bots handelt.)

Struktur von SVG-Standalone-Grafiken: Grundgerüst eines XML-Dokuments


mit dem img-Element

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

svg-Grafiken einbinden ansehen …
<img alt="self-Logo" src="Self-Logo.svg">
ansehen …


+ einfach und unkompliziert

+ CSS-Animationen und SMIL möglich

– CSS-Angaben der Webseite wirken nicht

– keine Links

– kein JavaScript


als Multimedia-Objekt mit object

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 (responsive Imagemaps)

– object wird in CMS oft nicht unterstützt (Einsatz im CMS)


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>
ansehen …


Empfehlung:

In img- und object-Elementen können Sie SVG-Grafiken ganz einfach mit prozentualen Breitenangaben an die Größe des Elterncontainers anpassen.

responsive Bilder ansehen …
img {
  width: 100%; 
  height: auto;
}

<img src="ubongo.svg" alt="ubongo">
Die Breite passt sich durch den Wert 100% an die Breite des Elternelements an.
Die Höhe wird durch den Wert auto entsprechend angepasst.
ansehen …

im iframe

Ähnlich wie die Variante mit object funktioniert eine Einbindung in einem iframe:

+ SVG darf Links enthalten.

+ Manipulation des Objekts durch JavaScript möglich.

+ domainübergreifend einsetzbar

– nicht 100% responsiv


svg-Grafiken im iframe 
 
  <iframe height="200" width="400" src="document.svg" scrolling="no">
  
    <!---Fallback--->
  <img src="document.png" width="400" height="200" alt />
</iframe>

    
</body>
</html>

als Hintergrundbild im CSS

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

SVG als externe Hintergrundgrafik 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("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.
ansehen …

+ einfache Einbindung mit url('…')

– keine CSS-Regeln für :hover möglich

– Manipulation durch JavaScript nicht möglich

Inline-SVG

Externe Grafiken benötigen einen zusätzlichen http-Request. Wenn Sie diesen umgehen wollen, nutzen Sie die Möglichkeit SVG direkt in die Webseite zu integrieren:

Inline-SVG im CSS

Sie können SVG-Code 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 der SVG-direkt notiert. Dabei müssen der MIME-Type und die Zeichenkodierung angegeben werden.
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.
ansehen …

+ :hover-Effekte möglich

+ kein HTTP-Request nötig

+

– CSS wird groß und unübersichtlich

Alternative: Data-URIs

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.

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

inline-SVG in HTML

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.


+ Animationen und Manipulationen mittels CSS oder JavaScript sind problemlos möglich

+ kein HTTP-Request nötig

+ Verlinkungen innerhalb der SVG sind möglich

– HTML-Markup wird groß und unübersichtlich

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>
ansehen …

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

Weblinks

  • svgwg.org: Beispiele, welche Interaktivität bei den verschiedenen Einbindungen möglich ist.
Abgerufen von „http://wiki.selfhtml.org/index.php?title=SVG/Tutorials/Einstieg/Einbindung&oldid=86241#Inline-SVG“