SVG/ Weitere Elemente

Aus Wikibooks

< SVG
Wechseln zu: Navigation, Suche
SVG:   Einführung  Vorwort Unterstützung / Installation  Start mit SVG   Zeichnen mit SVG Grafiken formatieren Die Farbgebung und SVG Effekte  Animation Weitere Elemente SVG im Web SVG-Zeichensätze Barrierefreiheit Interaktivität Javascript und SVG Referenz 


Inhaltsverzeichnis

[Bearbeiten] Bild einbetten mit <image>

<image xlink:href="test.jpg" x="10" y="10" width="100" height="100"/>

Hier wird dann das Bild test.jpg, das sich im selben Verzeichnis befindet wie unser SVG, eingebunden und auf die Größe von 100 x 100 skaliert.

[Bearbeiten] Base64

Es ist auch möglich, Bitmap-Bilder direkt im SVG-Dokument zu platzieren. Da XML aber nur Text erlaubt, müssen die Binärdaten einer Pixelgrafik in eine Textdarstellung umgewandelt werden werden, damit wir sie einbinden können. Für diese Umwandlung verwendet man Base64.

<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   width="640px"
   height="480px">
    <image
       y="84.6"
       x="85.6"
       height="184"
       width="180"
       xlink:href="data:--MIME-Type der Datei--;base64,

Hier kommt die Datei als Base64 codiert hin

" />
</svg>

Wie codiert man jetzt eine Pixelgrafik als Base64? Am einfachsten ist es wohl ein Bild einfach über ein Vektorgrafik-Programm ein zu binden. Alternativ kann man ein Bild auch einfach sich selbst als E-Mail schicken und den Quelltext betrachten. Wenn perl installiert ist geht es auch recht einfach über die Kommandozeile mit:

perl -MMIME::Base64 -0777 -ne 'print encode_base64($_)' <bitmap.png

oder mit dem tool Base64 wie es in jeder Linux Distribution zu finden ist.

Und so sieht das mit einem eingebettetem PNG-Bild:

SvgTutorialEmbedbitmap.svg 
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640px" height="480px">
    <image y="84.6" x="85.6" height="184" width="180" xlink:href="data:image/png;base64,
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
mXLcAAAAAElFTkSuQmCC
" />
</svg>

Hier sieht man recht deutlch warum man Pixelgrafiken in einem Vektorformat vermeiden sollte. W3C image Referenz

[Bearbeiten] Gruppierungen

<g>

Mit Gruppierungen können wir Elemente zu Gruppen zusammenfassen, dieses wird dann selbst wie ein grafisches Element benutzt werden, es kann Transformiert werden, es kann eine ID zugewiesen werden und es kann geklont werden. Wenn einer Gruppierung ein Stil zugewiesen wird wie Schriftart oder Strichstärke werden diese Stile auf die Kindelemente vererbt solange sie im Kindelement nicht anders definiert werden. W3C group Referenz

[Bearbeiten] Klonen

Mit dem <use>-Element lassen sich auf sehr einfache Weise Elemente, Gruppen und ganze Zeichnungen in einem SVG wiederverwenden, diese können neu Positioniert, Transformiert und es können andere Stile zugewiesen werden.

Hier ein Beispiel in dem wir einen Pfad (mit den Umrissen eines Schafes) mit dem <use>-Element klonen und neu positionieren:

  1. <?xml version="1.0" encoding="UTF-8" standalone="no"?>

  2. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1718" height="1090">

  3. <path d="M 854,0 C 849,0 843,0 838,0 C 832,0 832,6 827,6 C 827,6 821,6 821,6 C 810,6 805,11 799,22 C 794,28 794,39 799,50 C 777,55 760,77 755,100 C 755,100

  4.  755,105 755,105 C 771,111 782,105 794,100 C 788,144 816,171 854,171 C 900,166 911,133 911,94 C 922,100 938,100 950,94 C 950,94 955,89 955,89 C 944,66 927,55

  5.  911,50 C 916,39 916,33 911,28 C 911,28 911,28 911,22 C 911,17 905,11 900,11 C 894,6 883,0 878,6 C 872,6 867,6 867,6 C 861,0 854,0 854,0 z M 854,6 C 854,6

  6.  861,11 861,11 C 861,11 867,11 867,11 C 867,11 872,11 872,17 C 878,17 878,17 878,11 C 878,11 883,11 883,11 C 889,11 894,11 894,17 C 894,17 900,17 900,17 C

  7.  900,17 905,22 905,22 C 905,28 905,28 905,28 C 905,33 905,39 900,44 C 900,50 900,50 900,50 C 900,55 894,55 889,55 C 889,55 889,55 889,55 C 883,61 878,55

  8.  872,50 C 872,44 872,50 872,50 C 867,50 861,50 854,44 C 854,44 854,44 854,44 C 849,61 832,61 827,55 C 821,55 821,55 821,55 C 816,55 810,50 810,44 C 799,44

  9.  799,33 805,28 C 810,11 821,6 827,17 C 832,17 832,17 832,17 C 832,11 838,6 838,6 C 849,11 849,6 854,6 z M 854,50 C 854,50 861,55 867,55 C 872,72 883,83

  10.  900,89 C 900,89 900,89 900,89 C 900,89 900,89 900,89 C 905,127 894,155 854,160 C 816,160 799,127 805,94 C 816,89 827,77 832,61 C 843,66 849,61 854,50 z M

  11.  810,55 C 810,55 816,61 816,61 C 821,61 821,55 821,55 C 821,61 827,61 827,61 C 816,89 788,100 760,100 C 766,77 782,61 810,55 z M 905,55 C 922,61 933,72

  12.  944,89 C 933,94 916,94 900,89 C 889,77 872,72 872,55 C 872,55 872,55 872,55 C 878,61 883,61 889,61 C 894,61 900,61 905,55 z M 832,77 C 827,77 827,83 821,83

  13.  C 821,89 821,94 827,100 C 832,100 838,100 843,94 C 843,83 838,77 832,77 z M 867,83 C 861,89 867,94 867,100 C 872,100 878,100 883,94 C 883,89 883,83 878,77 C

  14.  872,77 867,77 867,83 z M 838,83 C 838,89 838,89 838,89 C 838,94 832,94 832,94 C 832,89 832,89 832,89 C 832,83 832,83 838,83 z M 878,83 C 878,83 878,83

  15.  878,83 C 878,89 878,89 878,89 C 878,94 878,94 872,94 C 872,94 872,89 872,89 C 872,83 872,83 878,83 z M 872,133 C 872,133 867,133 867,133 C 867,133 867,138

  16.  861,138 C 861,144 861,144 861,149 C 861,144 867,138 867,138 C 867,138 867,138 867,138 C 872,144 878,138 872,133 C 872,133 872,133 872,133 z M 838,133 C

  17.  838,133 832,133 832,133 C 832,133 832,138 832,138 C 838,144 838,144 843,144 C 843,144 843,138 843,138 C 843,144 849,144 849,149 C 849,144 849,144 843,138 C

  18.  843,138 843,138 843,133 C 838,133 838,133 838,133 z" id="dolly" />

  19.   <g id="klondolly1">

  20.     <use x="150"   y="200" xlink:href="#dolly" />

  21.     <use x="-150"  y="200" width="128" height="128" xlink:href="#dolly" />

  22.   </g>

  23.   <g id="generation2">

  24.     <use x="300" y="200"  xlink:href="#klondolly1" />

  25.     <use  x="-300" y="200" xlink:href="#klondolly1" />

  26.   </g>

  27.   <use x="600" y="200" xlink:href="#generation2" />

  28.   <use x="-600" y="200" xlink:href="#generation2" />

  29.   <text x="277" y="1000" font-size="144px">Anger is a gift</text>

  30. </svg>
unser Klonschaf

In Zeile 3 beginnen wir mit dem Pfad unseres Schafes in Zeile 18 weisen wir diesem die eindeutige id dolly zu. So jetzt zum eigentlichen Thema dem <use>-Element: In Zeile 20 teilen wir dem <use> Element erst mal mit xlink:href="#dolly" was es zu klonen gibt, das kann durchaus auch eine andere SVG-Datei sein oder ein Element daraus auf das man mit xlink verweisen kann, mehr dazu unter xlink.

W3C use Referenz

[Bearbeiten] zeichnen auf Vorrat

mit dem <defs>-Element kann man Marker, Farbverläufe, Symbole und Buchstaben auf Vorrat halten ohne das sie gleich angezeigt werden. W3C defs Referenz

[Bearbeiten] Symbolisches

<symbol> ist ein Gruppierungselement wie <g> wird aber nie direkt angezeigt, und es kann eine eigene viewBox und preserveAspectRatio übergeben werden. W3C symbol Referenz

[Bearbeiten] <marker>

marker-mid: url(#mark1); marker-end: url(#mark2); oder wenn überall gleich marker: <marker id="mark1" markerWidth="6" markerHeight="10"

  refX="0" refY="4" orient="auto">

W3C mask Referenz

[Bearbeiten] Musterhaft

<pattern>

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<defs>
<pattern id="test" width="20" height="20"  patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="5"/>
</pattern>
</defs>
<circle cx="100" cy="100" r="50" fill="url(#test);"/>
</svg>

W3C pattern Referenz

[Bearbeiten] Farbverlauf

[Bearbeiten] <linearGradient>

Ein linearer Farbverlauf erzeugt die Farbübergänge an einer gedachten Linie, diese Linie wird wie bei dem <line> Element mit x1 für die erste X-Koordinate, y1 für die erste Y-Koordinate und x2 y2 für die Endpunkte angegeben, üblicherweise aber mit Prozentwerten. <linearGradient id="lg" x1="0%" y1="0%" x2="0%" y2="100%"> .... </linearGradient> Die id wird angegeben damit wir der Verlauf später auch wieder finden. Auf dieser gedachten Linie entlang können wir an bestimmten Punkten die Farbe festlegen dazu werden die <stop> Elemente als Kindelemente in <linearGradient> geschrieben. Im <stop> Element geben wir mit dem Attribut offset an wo auf der Linie wir die Farbe festlegen z.B. offset="0" oder offset="0%" für den Beginn offset"0.5" oder offset="50%" für die Mitte und offset="1" oder offset="100%" für das ende der Linie. Die Farbe wird in dem <stop> Element mit dem Attribut stop-color festgelegt z.B. stop-color="black" oder als CSS-Style z.B. style="stop-color:black" wodurch es auch möglich wird die Farben für den Verlauf in einem externen CSS zu definieren.

<stop> Elemente kann man beliebig viele definieren aber man benötigt mindestens zwei. <defs> <linearGradient id="lg" x1="0%" y1="0%" x2="0%" y2="100%"> stop-color="green" offset="0" /> stop-color="red" offset="1" /> </linearGradient> </defs>


<linearGradient> ist immer ein Kindelement von <defs> da es nicht direkt angezeigt werden kann


Um jetzt unseren Verlauf sichtbar zu machen müssen wir ihn als Füllung einem Element zuweisen in dem wir diesem Element entweder zusätzlich das Attribut fill="url(#iddesfarbverlaufs)" oder als CSS über fill:url(#iddesfarbverlaufs).

linearGradient
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
<defs>
	<linearGradient id="lg" x1="0%" y1="0%" x2="0%" y2="100%">
		<stop style="stop-color:#0000ff;" offset="0" />
		<stop style="stop-color:#00ff88;" offset="1" />
	</linearGradient>
</defs>
 
<rect fill="none" stroke="#000" x="1" y="1" rx="10" width="118" height="118" />
 
<rect style="fill:url(#lg); stroke:none;"
      width="100" height="100" x="10" y="10" />
</svg>

[Bearbeiten] <radialGradient>

radialGradient
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
<title>An example of a radial gradient</title>
 
 
<defs>
	<radialGradient id="rg" cx="50%" cy="50%" r="40%">
		<stop style="stop-color:#0FF;" offset="0" />
 
		<stop style="stop-color:#F00;" offset="1" />
	</radialGradient>
</defs>
 
<rect fill="none" stroke="#000" x="1" y="1" rx="10" width="118" height="118" />
 
<rect style="fill:url(#rg); stroke:none;"
      width="100" height="100" x="10" y="10" />
 
</svg>

RadialGradient W3C Referenz

[Bearbeiten] Drüberlegen und durchscheinen

[Bearbeiten] <clipPath>

clipPath
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1000" height="1000" viewBox="0,0 1,1">
<defs>
<g id="pentagram">
<g id="cone">
  <polyline id="triangle" points="0,0 0,1 .5,1" transform="translate(0,-1) rotate(18)"/>
  <use xlink:href="#triangle" transform="scale(-1,1)"/>
</g>
<use xlink:href="#cone" transform="rotate(72)"/>
<use xlink:href="#cone" transform="rotate(-72)"/>
<use xlink:href="#cone" transform="rotate(144)"/>
<use xlink:href="#cone" transform="rotate(-144)"/>
</g>
<clipPath id="starfoo">
  <use xlink:href="#pentagram" />
</clipPath>
</defs>
 
<g transform="translate(0.5,0.5)" clip-path="url(#starfoo)" >
<circle r="1" fill="red"/>
<circle r="1" clip-path="url(#starfoo)" fill="green" transform="rotate(36)"/>
</g>
</svg>

W3C clipPath Referenz

[Bearbeiten] <mask>

W3C Mask Referenz

[Bearbeiten] Transformatoren

Von „http://de.wikibooks.org/wiki/SVG/_Weitere_Elemente“
Persönliche Werkzeuge