Basic Shapes mit SVG
Inhaltsverzeichnis:
- Beispiele für Basic Shapes
- Grundlagen für Basic Shapes
- Was ist SVG
- Reactangles
- Wiederholung Reactangles
- Circles und Ellipses
- Polygon
In diesem Tutorial werde ich ihnen die Grundlagen vermitteln, wie Sie mit Hilfe von Scaleable Vector Graphics (SVG) verschiedene Geometrische Grafiken erstellen können. Insgesamt werden wir dabei vier verschiedene Geometrische Figuren erzeugen. Damit Sie wissen was auf Sie zukommt kommen nun erst einmal ein paar Beispiele.
Beispiele für Basic Shapes
Diese Grafiken sind besonders, da Sie nicht als Bild implementiert worden, sondern lokal auf ihrem Rechner gerendert werden. Wie dies nun funktioniert erkläre ich ihnen jetzt.
Grundlage für Basic Shapes
Zu aller erst ist es wichtig zu wissen auf welche Art und Weise überhaupt SVG in unser Template integriert werden kann.
Mit <svg beginnen wir unser SVG Element. Dann geben wir noch die Abmessung unseres "Arbeitsbereiches" an und schließen das ganze mit >.
<svg width="200" height="100">
Nun folgt z.B. der Code für ein Shape. Dieser könnte z.B. so aussehen:
<polygon points="200,10 250,190 160,210" style="fill:lime;">
Danach muss das SVG Element nur noch geschlossen werden, was folgendermaßen funktioniert:
</svg>
Zusammengefasst sieht dies dann nun so aus:
<svg width="200" height="100">
<polygon points="200,10 250,190 160,210" style="fill:lime;">
</svg>
Was ist SVG?
Für alle Interessierten hier noch eine kurze Erklärung was SVG überhaupt genau ist.
Scalable Vector Graphics (SVG, englisch für skalierbare Vektorgrafik) ist die vom World Wide Web Consortium (W3C) empfohlene Spezifikation zur Beschreibung zweidimensionaler Vektorgrafiken. SVG, das auf XML basiert, wurde erstmals im September 2001 veröffentlicht. Praktisch alle relevanten Webbrowser können einen Großteil des Sprachumfangs darstellen.[2]
Dies wäre dann erst einmal die Grundlage um fortzufahren. In diesem Tutorial werden wir insgesamt 4 verschiedene Shapes zusammen kreieren.
- Reactangles
- Circles
- Ellipses
- Polygon
Reactangles
Um ein Rechteck mit Hilfe von SVG zu erzeugen müssen wir erst einmal wieder unseren "Arbeitsbereich" definieren. Wir wollen z.B. einen 400px Breiten und 110px Hohen Bereich erstellen. Dies funktioniert folgendermaßen:
<svg width="400" height="110">
Nun müssen wir sagen welche Form das ganze am Ende werden soll, welche Abmessungen unseren Rechteck hat und wie es aussehen soll (Style). Dies funktioniert folgendermaßen:
<rect width="300" height="100" style="fill:rgb(0,0,255)"/>
Dann nicht vergessen das ganze wieder zu schließen:
</svg>
Wenn ihr alles richtig gemacht habt kommt folgendes dabei herraus:
Wiederholung in vier Schritten
1. "Arbeitsbereich definieren"
2. Form und Abmessungen definieren
3. Aussehen definieren
4. SVG Bereich wieder schließen
Circles und Ellipses
Einen Kreis in SVG zu erstellen ist nun etwas komplizierter. Der Beginn ist jedoch wieder derselbe:
<svg width="400" height="110">
Nun geben wir jedoch an wo der Kreis in unserem Bereich platziert wird und welchen Radius er hat. Anschließend kommt dann wieder die Gestaltung.
<circle cx="50" cy="50" r="40" fill="red"/>
Zum Schluss wieder das ganze schließen
</svg>
Ergebniss:
Zu aller erst definieren wir wieder unseren Arbeitsbereich:
<svg height="140" width="300">
Nun kommt noch ein neuer Wert hinzu (ry) welcher die "Stauchung unseres Kreises bestimmt"
<ellipse cx="100" cy="80" rx="70" ry ="50" style ="fill:yellow;">
Zum Schluss wieder das ganze schließen
</svg>
Polygon
<svg height="210" width="500">
Nun geben wir unsere Punkte als Koordinaten relativ zum Arbeitsbereich an
<polygon points="200,10 250,190 160,210" style="fill:lime;">
Und wie immer das ganze wieder schließen:
</svg>
Ergebniss: