Was ist SVG?
Scalable Vector Graphics
W3C Spezifikation zur Beschreibung von 2D-Vektorgrafiken in XML-Syntax (XML-basiertes Format)
geometrische Primitive Rechteck, Kreis, Ellipse, Linie, Polylinie, Polygon sowie weitere Elemente zur Darstellung von Pfaden, Text, Hyperlinks
Formatierung mit CSS und durch Einsatz von JS-Routinen dynamisch verändern
offen, plattformunabhängig, durchsuchbar, Einsatz für Web und Print
Animationen möglich
Wie ist das SVG-Koordinatensystem aufgebaut? Wie sind die Einheiten?
Grafikinhalte werden in Reihenfolge ihrer Definition im XML-Code auf Zeichenfläche angeordnet/überlagert
Wie funktioniert die Rechteck-Form in SVG?
<rect x=”…” y=”…” width=”…” height=”…” rx=”…” ry=”…"/>
x=x-Koordinate
y=y-Koordinate
width=Breite
height=höhe
rx,ry=Radien für abgerundete Ecken (optional)
Wie funktioniert die Kreis-Form in SVG?
<circle cx=”…” cy=”…” r=”…”/>
cx = x-Koordinate des Mittelpunktes
cy = y-Koordinate des Mittelpunktes
r = Radius
Wie funktioniert die Ellipse-Form in SVG?
<ellipse cx=”…” cy=”…” rx=”…” ry=”…” />
rx = Radius der Halbachse in x-Richtung
ry = Radius der Halbachse in y-Richtung
Wie funktioniert die Linien-Form in SVG?
<line x1=”…” y1=”…” x2=”…” <2=”…” />
x1 = x-Koordinate des ersten Punktes
y1 = y-Koordinate des ersten Punktes
x2 = x-Koordinate des zweiten Punktes
y2 = y-Koordinate des zweiten Punktes
Wie funktioniert die Mehrfachlinie-Form in SVG?
<polyline points=”x1,y1 X2,y2 … xn,yn”/>
points = Liste der einzelnen durch Linien zu verbindenden Punkte
Trennung durch Komma/Leerzeichen
Wie funktioniert das Polygon-Element in SVG?
<polygon points=”x1,y1 X2,y2 …. xn,yn”/>
letzter Punkt wird mit erstem Punkt verbunden
Was ist das minimale Polygon?
Dreieck
Wie kann man SVG-Objekte gruppieren?
mit dem g-Element
im öffnenden Tag können auch Grafikeigenschaften hinterlegt werden
<g fill=”none” stroke=”blue” stroke-width=”1”>
…
</g>
Wie kann man Textinhalte in SVG umsetzen? (einzeilig/mehrzeilig)
<text x=”…” y=”…”> Text </text>
x = x-Koordinate der Grundlinie
y = y-Koordinate der Grundlinie
<text x=”…” y=”…”>
<tspan x=”…” dy=”…”> Text </tspan>
</text>
dy = vertikaler Zeilenabstand
Wie kann man Objekte in SVG gestalten?
Mit Präsentationsattributen in SVG-Tag:
Mit CSS-Eigenschaften im Style-Attribut:
mit CSS-Eigenschaften in style-Element:
Mit CSS-Eigenschaften über externes Stylesheet:
Was sind wichtige Präsentationsattribute?
fill: Füllfarbe
stroke: Rahmenfarbe
stroke-width: Rahmenstärke
stroke-dasharray: Rahmen/Linie gestrichelt
opacity: Deckkraft (1=volle Deckkraft)
auch fill-opacity und stroke-opacity
font-size, font-family, font-style
text-decoration, text-transform
Welche Farbwerte können in SVG verwendet werden?
HEX
(6-Stellig) #FF0000
(3-Stellig) #F00
RGB
(dezimale Schreibweise) rgb(255,0,0)
(prozentuale Schreibweise) rgb(100%,0%,0%)
Farbwort red
Wie funktionieren Transformationen in SVG?
Koordinatensystem-Transformation
Transformiert wird Koordinatensystem und nicht jeweiliges Objekt!
transform-Attribut
Rotieren: rotate(Winkel in Grad)
Skalieren: scale(Faktor für x- und y-Richtung)
Neigen: skewX(Winkel in Grad) oder skewY
Verschieben in x-bzw.y-Richtung: translate(Distanz_x,Distanz_y)
lassen sich auch in Transformations-Matrix formulieren
Wie funktioniert Animation in SVG grundlegend?
Mit SVG-Erweiterung
Als Kindelement eines zu animierenden SVG-Elements:
per Referenz über dem zu animierenden Element zugewiesene ID:
Spezialform Pfade
<path d=”…”/>
Wie stellt man Hyperlinks und externe Bilder dar?
<a xlink:href=”…”>
<text x=”…” y=”…”
<image xlink:href=”…” x=”…” y=”…” width"=”…” height=”…”
Bildformate gif, jpeg, png, svg
Last changeda year ago
