Nutzerseite von Besra

Navigation:


Spielereien mit SVGs

Wir bauen uns ein eigenes Symbol. Nur wie? Und warum eigentlich? Letzteres sollte man sich allerdings schon vorher überlegt haben.

Man nehme ein kariertes DIN-A4-Blatt und zeichne sich mit Hilfe eines Kugelschreibers und eines Lineals ein Quadrat in der Größe 16x16cm ein. Wie viele Kästchen sind das? Es sind 32×32. Und 32×32 (Pixel) ist die Standard-Größe eines Plan-Feldes.

Größere Symbole brauchen mehrere Plan-Felder und somit ein größeres Blatt Papier. Oder Millimeterpapier. Und dann vielleicht eine Lupe dazu. Das Block-Symbol hat z.B. die Größe 128×32 Pixel - es erstreckt sich über vier Plan-Felder.

Für den Anfang tut's ein kleines Symbol und wir beschränken uns auf das 16x16cm große Quadrat mit den 32 waagerechten und 32 senkrechten Kästchen. Das Kästchen ganz links oben hat die Koordinaten 0,0 (x=0,y=0), das Kästchen ganz rechts oben hat die Koordinaten 31,0, das Kästchen ganz unten rechts 31,31 und das Kästchen ganz unten links 0,31. Es empfiehlt sich, diese Koordinaten außen an das Quadrat zu schreiben, um sich hinterher die Zählarbeit zu erleichtern.

Nun kann man fröhlich drauf los zeichnen. Dabei sollte man sich am Anfang aber sehr zurückhalten und etwas sehr einfaches nehmen. Z.B. ein Rechteck. Das zeichnet man sich irgendwo innerhalb der Markierung mit Bleistift ein. Und zwar innerhalb der Kästchen, nicht auf den Linien. Man kann auch die Kästchen ausmalen… Muss man aber nicht.

An die Eckpunkte kann man sich nun die Koordinaten schreiben. Z.B. könnte das Rechteck oben links im siebenten Kästchen beginnen. Das ist die Koordinate 6,0. Vorsicht: Siebtes Kästchen ist sechs, denn die Zählung beginnt bei Null! Man fängt übrigens besser in Zeile eins statt null an, also am besten beginnt das Rechteck bei 6,1. Vielleicht geht es bis Spalte 25, dann schreibt man sich an diesen Punkt 25,1. Und nun nach ganz unten, bis in Zeile 31, das ist dann der Punkt 25,31. Dann nach links bis 6,31 und nach oben zurück zu 6,1.

Und nun nimmt man sich einen Texteditor und schreibt sein Symbol, denn gezeichnet wird hier wirklich nur auf dem Papier.

<svg width="32" height="32">
  <g>

sind die ersten Zeilen mit denen die vorher erwähnte Größe von 32×32 Pixeln definiert und der Beginn markiert wird. Jetzt kommt das Rechteck, z.B. so

     <path stroke="rgb(0,0,0)" fill="rgb(255,255,255)" d="M 6,1 L 25,1 L 25,31 L 6,31 z " />

path sagt, dass das nun folgende ein “Pfad” ist, stroke ist der Strich und wie der beschaffen sein soll, steht hinter dem Gleichheitszeichen: “rgb(0,0,0)” bedeutet, dass hier mit RGB-Farben (also der Mischung aus Rot, Gelb und Blau) gearbeitet werden soll und alle drei stehen auf 0 (Null). Das heißt: Schwarz. Fill ist die Füllung des gesamten gleich zu zeichnenden Dings. Wie die beschaffen sein soll, steht auch wieder hinter dem Gleichheitszeichen. Ganz wie zuvor erfolgt hier die Angabe der Farbe und drei Mal 255 ist weiß.

Nun wird's spannend: d ist die Zeichnung und die beginnt mit M (move), mit der Bewegung des imaginären Zeichenstiftes an die Startposition. Hier, an 6,1 wird der Stift auf's imaginäre Papier gesetzt und dann geht es los: L (eine Linie) nach 25,1 (waagerecht nach rechts), weiter mit Linie nach 25,31 (senkrecht nach unten), weiter mit Linie nach 6,31 (waagerecht nach links). Schließen muss man die Figur nicht, dafür sorgt das kleine z am Ende automatisch. Es muss übrigens immer dort stehen.

Fehlt noch der Abschluss:

  </g>
</svg>

Schon ist ein Symbol mit einem weißen Rechteck mit schwarzem Rand fertig. Kann man nichts mit anfangen, macht aber nichts. Die gesamte Definition sieht dann also so aus:

<svg width="32" height="32">
  <g>
     <path stroke="rgb(0,0,0)" fill="rgb(255,255,255)" d="M 6,1 L 25,1 L 25,31 L 6,31 z " />
  </g>
</svg>

Diesen “Text” speichert man unter einem Namen wie “Symbol.xml”. Die Grafik kann - und sollte - man sich danach anzeigen lassen. Das geht z.B. mit Inkscape sehr gut. Wenn die Grafik nicht so aussieht, wie erhofft, hat man sich vermutlich vertippt. Vielleicht fehlt irgendwo ein Leerzeichen, ein “L” oder ein Anführungszeichen…


Beispiel H-Tafel

Dieses Symbol für einen Ausgang (Schalter) basiert auf dem eben hergeleiteten Rechteck. Man kann also doch etwas damit anfangen! Dazu kommt noch das “H”, sowie hier im Beispiel für die Schalterstellung “aus” ein diagonaler, roter Balken. Die SVG-Definition kann man bei Bedarf mit Kommentaren schmücken, wie unten gezeigt.

<svg width="32" height="32">
  <g>
    <!-- Schaltersymbol in Form einer H-Tafel, Stellung OFF -->
    <!-- Schwarzer Rahmen und weisse Fuellung -->
    <path stroke="rgb(0,0,0)" fill="rgb(255,255,255)" d="M 6,1 L 25,1 L 25,31 L 6,31 z " />
    <!-- Das H in doppelter Linienstaerke -->
    <path stroke="rgb(0,0,0)" fill="rgb(0,0,0)" d="M 10,7 L 10,24 L 11,24 L 11,7 z " />
    <path stroke="rgb(0,0,0)" fill="rgb(0,0,0)" d="M 21,7 L 21,24 L 20,24 L 20,7 z" />
    <path stroke="rgb(0,0,0)" fill="rgb(0,0,0)" d="M 10,15 L 21,15 L 21,16 L 10,16 z" />
    <!-- Roter, diagonaler Strich -->
    <path stroke="rgb(255,0,0)" fill="rgb(255,0,0)" d="M 6,30 L 24,1 L 25,1 L 6,31 z" />
  </g>
</svg>

Wie das fertige Symbol aussieht und was man damit machen kann ist unter Schalter-Symbol für Warten beschrieben.


Code-Optimierung

Wie man an diesem Schnipsel erkennt,

    <!-- Das H in doppelter Linienstaerke -->
    <path stroke="rgb(0,0,0)" fill="rgb(0,0,0)" d="M 10,7 L 10,24 L 11,24 L 11,7 z " />
    <path stroke="rgb(0,0,0)" fill="rgb(0,0,0)" d="M 21,7 L 21,24 L 20,24 L 20,7 z" />
    <path stroke="rgb(0,0,0)" fill="rgb(0,0,0)" d="M 10,15 L 21,15 L 21,16 L 10,16 z" />

wurde das “H” aus drei Teilen zusammen gesetzt: Erst der linke senkrechte Strich, dann der rechte, dann der waagerechte Strich. Das ist relativ übersichtlich und schnell gemacht, erfordert aber drei Zeilen, wo eigentlich nur eine nötig ist. So könnte es nämlich auch aussehen:

    <!-- Das H in doppelter Linienstaerke -->
    <path stroke="rgb(0,0,0)" fill="rgb(0,0,0)" d="M 11,24 L 11,16 L 20,16 L 20,24 L 21,24 L 21,7 L 20,7 L 20,15 L 11,15 L 11,7 L 10,7 L 10,24 z " />

Mit dieser etwas länglichen Code-Zeile wird sozusagen die gesamte Kontur des Buchstabens in einem Rutsch abgefahren. Malen nach Zahlen ist das tatsächlich.


Personal Tools