HTML/Multimedia und Grafiken/SVG

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das svg-Element ist ein Container für die XML-Sprache SVG, mit der Sie skalierbare Vektorgrafiken in Ihre Webseite integrieren können.

  • HTML5
  • Android
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Folgende Attribute sind möglich:

Beachten Sie: Wenn Sie einen HTML5-Doctype verwenden, benötigen Sie keine Namensraum-Angabe.
Beachten Sie: Ohne Angabe einer festen Breite wird das SVG-Element im Firefox und im Opera 300x150px groß; in den anderen Browsern (Android, Chrome, IE und Safari) nimmt es die Breite des Elternelements an. Sie können dieses Verhalten durch die Angabe eines Prozentwerts von width: 100%; auch für Firefox und Opera erreichen.
  • viewBox: Mit diesem Attribut wird festgelegt, wie sich das Koordinatensystem in Bezug auf die tatsächliche Breite des SVG-Elements verhält.
  • preserveAspectRatio: legt fest, ob das Seitenverhältnis beim Skalieren behalten oder verändert wird.


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>

[Bearbeiten] Siehe auch

[Bearbeiten] Referenz

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML