(CiP-5) Buchstaben zeichnen und entwerfen

Zum kompletten Frame-Aufbau
dieser Seite
 

Normale druckfertige Buchstaben sind durch die äußeren und inneren Ränder definiert. Sie ergeben eine Fläche.

Beim Schreiben eines Buchstabens mit einem Stift entsteht eine völlig andere Form: so genannte "Druckbuchstaben" bestehen aus Linien.

Gerade die Umsetzung eines Flächenbildes in eine Linienform beim Lernen der Buchstaben bringt heute etliche Pädagogen zum Ausflippen, denn das Hin- und Herschalten zwischen dem "Denken in Linien" und dem "Denken in Flächen" macht es schwer, die eigentliche Struktur eines Buchstabens zu erkennen, zu lernen und zu optimieren.

Hier soll nun mit SVG-Code die Ablaufprozedur beim Schreiben eines Buchstabens mit einem Stift nachgebildet werden. Dies führt zwangsläufig zu mehreren Lösungen, denn jede Handschrift ist anders. Trotzdem gibt es für jeden Buchstaben eine gewisse "eindeutige" Kurven-Beschreibung.

Dieses Projekt bearbeitet die Kurvenbeschreibung der Buchstaben für Lern- und Vergleichszwecke. Es ist eine wunderbare Übung für das freie SVG-Coding auf der Basis einer einzelnen Form.

Ziele dieses Ansatzes können sein:

Bildschirm-Kurs mit Kurven zum Lernen der Buchstaben für Kinder

Entwicklungsplattform für das Gestalten neuer Buchstabenformen

Siehe auch CiP 01 Das Logo für SVG
  Grundsätzlich definiert ist dabei der Hintergrund, die im Browser sichtbare Fläche (view box) und die Linienfarbe (.str1) sowie die Liniendicke (stroke-width) und der Startpunkt unten Links.

Jeder Buchstabe muss nach seiner Form-Beschreibung einen Sprungbefehl zur Grundlinie für den nächsten Buchstaben enthalten.

Die erste Ausbaustufe ist ein komplettes Alfabeet (Großbuchstaben) mit den primären Linien-Befehlen m, l, h und v bzw. M, L, H und V.

  
 
Befehls-Kürzel Befehl Bedeutung Wertangabe (z.B.)
M Move geht zu Absolut:
X=100, Y=200 		M100 200
L Linie zeichnet Linie nach Absolut: X=100, Y=200 L100 200
H Horizontale Linie zeichnet horizontale
Linie zu Absolut: X=100
(Y-Wert bleibt)		 H100
V Vertikale Linie zeichnet vertikale Linie zu Absolut: Y=100
(X-Wert bleibt)		 V100
m move geht relativ zu:
x=+100, y=+200		 m100 200
l linie zeichnet Linie relativ nach: y=+100, y=+200 l100 200
h horizontal zeichnet Linie relativ nach x=+100 (Linie von 100 Länge nach rechts) h100
v vertikal zeichnet Linie relativ nach y=+100 (Linie von 100 Länge nach unten) v100

Natürlich lassen sich in SVG auch Rundungen zeichnen, Eckradien einfügen und völlig freie Kurven definieren. Dazu nutzen Sie in einem 2. Schritt die nachfolgenden Befehle für Beziér-Kurven.

Befehls-Kürzel Befehl Bedeutung Wertangabe (z.B.)
Q Quad-Bézier zeichnet Beziér-Kurve mit Anfasser (x=140, y=150) und absolutem Zielpunkt Q 140 150, 160 30
q quad-Bézier zeichnet Beziér-Kurve mit Anfasser (x=140, y=150) und relativem Zielpunkt q 140 150, 160 30
C Cube-Bézier zeichnet kubische Bézier-Kurve mit zwei Anfassern und einem absoluten Zielpunkt C 150 150,180 170,300 40
c Cube-Bézier zeichnet kubische Bézier-Kurve mit zwei Anfassern und einem relativem Zielpunkt c 150 150,180 170,300 40
T   zeichnet quadratische Bézier-Kurve mit gespiegeltem Anfasser T 100 100
t   zeichnet quadratische Bézier-Kurve mit gespiegeltem Anfasser relativ zum Anfangspunkt t 100 100

Probieren Sie allerdings erst einmal ein komplettes Alfabeet mit geraden Linien zu erzeugen:

Definitionen:

Bei Großbuchstaben der Befehle beziehen sich deren Werte immer auf die absolute Koordinate, bei Kleinbuchstaben auf den gerade relativen Koordinatenpunkt.

Beispiel: ein L-Befehl von L 100 200 zieht vom aktuellen Stand eine Linie zum absoluten Koordinatenpunkt X=100 und Y=200.

l 100 200 bewirkt eine Linie vom aktuellen Standpunkt nach x=+100 und y=+200.

 

<svg width="100%" height="100%" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd" viewBox="0 -100 14200 1200"><defs><style type="text/css">
<![CDATA[
.str1 {stroke:#025EBB;stroke-width:80;stroke-linecap:round}
.fil0 {fill:none}
.fil1 {fill:#D4D0C8;opacity:0.8}
]]></style></defs>
<g id="1">
<rect class="fil1" x="0" y="0" width="4000" height="1000"/>
<path class="fil0 str1"
d="m100 800

Hier kommen nacheinander die Kurven für die benötigten Buchstaben reinkopiert (ohne Komma, Klammer ect.)

"/></g></svg>

Kopieren Sie sich diesen Code einfach in einen Editor und fügen Sie statt der roten Zeilen nacheinander den Code der gewünschten Buchstaben aus der unteren Liste ein.

Speichern Sie ihre Datei mit der Endung .svg ab. In einem geeigneten Browser (IE6) können Sie sich das Ergebnis dann anschauen.
A v-500 l100 -200h200l100 200v500m 0-300h-400 m600 300 A
B v-700 h200l100 100v100l-100 100h-200 h300 l 100 100 v200 l-100 100 h-300 m570 0 B
C m400 -600 l-100 -100 h-200 l-100 100 v500 l100 100h200l100 -200m 150 200 C
D v-700 h300l100 100v500l-100 100h-300 m600 0 D
E v-700 h400 m -400 300 h300 m -300 400 h400 m170 0 E
F v-700 h400 m -400 300 h300 m 260 400 F
G m400 -600 l-100 -100 h-250 l-100 100 v500 l100 100h250l100 -100 v-200 h-200 m400 300 G
H v-700 m0 350h400 m 0 -350 v700 m200 0 H
I v-700 m200 700 I
J m-50 -700h200v700l-200 200 m400 -200 J
K v-700 m350 0 l-350 340 v100v-100l380 360 m150 0 K
L m0-700v700h300m120 0 L
M v-700 m200 0 m-200 0 l250 500l250-500 m200 0 m-200 0 v700m200 0 M
N v-700 m0 200 m0 -200 l400 700 m0 200 m0 -200 v-700 m200 700 N
O m100 0l-100-100v-500l100 -100h250l100 100v500l-100 100h-250m550 0 O
P v-700h250l100 100v200l-100 100h-250m500 300 P
Q m100 0l-100-100v-500l100 -100h250l100 100v400l-200 200h-150 m350 0l-200 -200m400 200 Q
R v-700h250l100 100v150 l-100 100 h-250 m50 0 l300 350 m170 0 R
S m0 -100 l100 100 h200 l100 -100 v-200 l-100 -100 h-200 l-100 -100 v-100 l100 -100 h200 l100 100 m200 600 S
T m-100 -700h400m-200 0v700m300 0 T
U m0-700v600l100 100h200l100 -100v-600m200 700 U
V m-50-700l250 700 m-200 0 m200 0l250 -700 m150 700 V
W m-50-700l180 700 m-200 0 m200 0l180 -700 m-200 0 m200 0 l180 700 m-200 0 m200 0l180 -700m150 700 W
X l500 -700 m-500 0 l500 700 m180 0 X
Y l300 -700 m-300 0 l150 350 m280 350 Y
Z m30 -700 h360 m-100 0 m100 0 l-400 700 m-100 0 m100 0 h400 m200 0 Z
Komplettes Alfabeet in neuem Fenster öffnen
 

Konkrete Übungen:

  
1. Setzen Sie Ihren Namen mit den Formen der hier definierten Buchstaben und gleichen Sie den sichtbaren Fensterbereich (viewbox) und die Hintergrundfläche an die Länge Ihres Namens an.
Beispiel: "Manfred" als SVG-Datei in neuem Fenster öffnen

Speichern Sie diese Datei als namen.svg ab.
2. Entwickeln Sie eine alternative Form für einen mittleren Buchstaben innerhalb ihrer namen.svg. Optimieren Sie die Spationierung (Abstand zwischen den einzelnen Buchstaben) und den Grundlinienstand.
Beispiel: "Manfred" als SVG-Datei in neuem Fenster öffnen		  
3. Entwickeln Sie die deutschen Sonderzeichen Ö, Ä und Ü.  
4. Entwickeln Sie die passenden Zahlenformen von 0 bis 9.  
5. Wenn Sie sich sicher fühlen im Umgang mit den einfachen Linien-Befehlen, nutzen Sie die Befehle für Beziér-Kurven (Q, C, T, q, c, t) für abgerundete Buchstabenformen.  
  Feedback zu diesem Modul: Team: Manfred Baierl