Scalable Vector Graphics - SVG
Ein Beispiel
<?xml version="1.0" standalone="no"?>
<svg viewBox="0 0 34 34" id="home" xmlns="http://www.w3.org/2000/svg">
<g stroke="gold" stroke-width="2">
<rect x="2" y="2" width="30" height="30" rx="5" ry="5" fill="yellow" fill-opacity="0.4"/>
<rect x="9" y="15" width="16" height="12" fill="none"/>
<path d="M6,18 l11,-11 l11,11" fill="none" stroke-width="3"/>
<rect x="15" y="19" width="4" height="8" fill="gold" stroke-width="1"/>
</g>
</svg>
Das SVG-Bild daraus
Zum Inhalt der Datei
SVG ist ein Bestandteil des XML-Sprachraumes. Daraus resultiert die erste Zeile. Im Beispiel ist der minimal nötige Umfang zur Anwendung gekommen. Wenn eine SVG-Datei mit Software erstellt wird kommen viele Informationen dazu. Es ist so zu sehen womit der Designer arbeitet, wer der Urheber ist und noch mehr.
In der 2. Zeile sind Angegeben zur Dimension des Bildes, die ID und der benutze Namensraum notiert. Nach der Konvention für XML muß dem öffnenden Tag <svg> ein schließender zugeordnet sein </svg>. Dazwischen kommt alles was notwendig ist um das Bild zu zeichnen.
Die erste Bildinfo - es besteht aus einer Gruppe. Wird mit dem Tag g realisiert. Die soll mit einem goldenen Stift der Dicke 2 gezeichnet werden. In der Gruppe sind 4 Aktionen zum Bildaufbau enthalten – drei Rechtecke und ein Pfad.
Um ein Rechteck zu definieren existiert der Tag <rect/>. Er braucht den Startpunkt als x und y Wert sowie Breite und Höhe.. Weiterhin sind Angaben möglich zu abgerundeten Ecken (rx ry) und zur Füllung des Rechteckes mit Farbe. Auch die Stiftdicke kann angegeben werden (hier wird die Angabe aus der Gruppe für dieses Element überschrieben).
Der Pfad besteht aus Punkten und der Information wie diese miteinander verbunden werden. Er beginnt mit einem Move zum Startpunkt. Mittels Linien werden die nächsten 2 Punkte relativ zum vorhergehenden angesteuert.
SVG erstellen
Plotter werden mit Programmen ausgeliefert die SVG verarbeiten können – mal mehr oder weniger. Einige können auch SVG exportieren. Mit Inkscape, eine freie Software existiert ein Tool das beim arbeiten mit SVG hilfreich sein kann.
Oft kommt man aber schneller zum Ziel mit einem einfachen Editor und ein par Zeilen Code. Zur Anzeige der Grafik – einfach einen Browser bemühen.
Praxisbeispiel per Editor
Ich möchte dieses Innenteil erstellen:
Dazu meine Skizze mit Größen in mm:
Das LED-Teelicht hat einen Durchmesser von 40mm. Für das SVG reicht ein Arbeitsblatt von 100x100mm. Links und oben möchte ich einen Randabstand von 10mm. Der Umriss wird als Pfad erstellt.
Der Startpunkt M liegt somit bei 15,10. Es folgt eine Linie welche relativ angegeben wird – also kleines l mit 68,0 – bedeutet 68mm in der x-Richtung und 0mm in der y-Richtung. Dann erneut l mit 0,5 – 0mm auf x und 5mm auf y.
Öffne die Datei mit dem Umriss zum Vergleich. Lass dir den Quelltext anzeigen.
Jetzt kommt die Öffnung für den Kreis dazu. Der Mittelpunkt vom Umriss liegt auf 49,49 – da kommt der Kreis mit dem Radius 20 hin. Zur Kontrolle öffne Datei mit dem Kreis.
Nur noch die Pfalzlinien. Dazu benutze ich Pfade mit Attribut stroke-dasharray. . Angegeben werden die Strichlänge und der Abstand zum nächsten Strich. Ich habe mich für 3,3 entschieden. Die Pfalzlinie ist 68mm lang. 11 Paare benötigen 66mm deshalb beginnt bei mir die Pfalzlinie 2mm versetzt.
Ihr wollt mit einem Pfalztool arbeiten – dann setzt den Wert für stroke-dasharray auf none.
Geschafft – hier das Ergebnis.
Das gleiche mit Silhouette Studio
Diese Grundmuster kann schnell auf ähnliche Verwendungen angepasst werden. Hier ein Beispiel.
Weitere Beispiele
Gleichseitiges Dreieck
Arbeitsblatt von 70x70mm, Dreieck mit Seitenlänge von 50mm, Startpunkt bei 10,60
In der Hälfte der Grundseite ist die Höhe eingezeichnet um die Spitze des Dreieck zu berechnen.
Dazu verwende ich den Satz des Pythagoras – a²+b²=c². Dabei ist die Hypotenuse 50mm und eine
Kathete 25mm. Womit sich die Höhe zu 43,3mm berechnet.
d="M10,60 l50,0 l-25,-43.3 z"
Ein 3D-Model für dreieckigen Grundriss
Oft Hilft eine Skizze.
Arbeitsblatt 170x60mm, Startpunkt 10,15
Ohne Berechnung keine exakte Form. Die schrägen Linien steigen im Winkel von 30° - benötigt werden x-y-Koordinaten. Dazu ist die Gegenkathete mit 5mm bekannt. Da die Ankathete zu berechnen ist muss der Tangens benutzt werden - tan (30°)=GK/AK. AK = 8,66mm.
Der Pfad beginnt mit d="M10,15 l8.66,-5 l0,-5"
Wie weit nach x zum nächsten Punkt? Dreieckseite 50mm, davon sind 2 Schrägen a 8,66mm abzuziehen.
Nach Adam Ries bleiben für die Strecke x 32,68mm.
Pfad: d="M10,15 l8.66,-5 l0,-5 l32.68,0 l0,5 l8.66,5 "
zur Kontrolle die Ansicht per Browser.
Ok, den Teil nach dem Start 2-mal wiederholen. Test.
Es folgt eine Klebelasche mit "l5,0 l0,15 l-5,0" Test.
Und nun der untere Teil – analog zu oben
mit "l-8.66,5 l0,14.5 l-32.68,0 l0,-14.5 l-8.66,-5" Test.
Bald fertig, das letzte wieder 2-mal anhängen und dann mit z den Pfad schließen. noch die Pfalz-Linien hinzufügen.
Die erste d="M18.66,10 l32.68,0" - eine weitere d="M10,15 l50,0". Nun, die weiteren könnt ihr jetzt selbst.
Die weiteren Arbeiten erfolgen in Silhouette Studio.
Dazu den Umriss im Studio öffnen. Die Seiteneinstellung auf 200x100mm setzen.
In den Raster-Einstellungen „Am Raster ausrichten“ abwählen und das Raster auf 10mm mit 10 Teilungen einstellen.
Ich habe die Ansicht auf Zoom 150% eingestellt.
Der fertige 3-Eck-Körper
Nun sind die 3-eckigen Deckflächen an der Reihe. Dazu benutze ich das schon entwickelte gleichseitige Dreieck von oben. Es muss mit Stecklaschen an den Seiten erweitert werden.
Wir haben ein Teil mit 5cm Kantenlänge. Aber gebraucht wird noch eins mit 8cm Kantenlänge. Nun frisch ans Werk und neu anfangen. Oder? Es geht einfacher. Dazu kennt SVG den transform-Befehl. Er ändert die Größe per Eigenschaft scale. Man erweitert die äußerste Gruppe damit. Mit 8/5 wird der Vergrößerungsfaktor bestimmt. Ich möchte die Höhe nicht verändern und füge transform="scale(1.6,1.0)" in die einleitende Gruppen-Definition ein. Achtung! Das Dokument überprüfen ob es groß genug ist – eventuell anpassen. Vergrößerter Umriss.
Beim Verändern der Höhe ändern sich die Schlitze für die Laschen. Diese müssen angepasst werden.
Die Deckflächen müssen aber beim transformieren mit scale(1.6,1.6) bedacht werden. Sonst bleibt
das Dreieck nicht gleichseitig.