Einführung Vektorgrafik

Vektor-Grafik

Alle Beispieldateien

SVG ist dem HTML ganz ähnlich, nur geht es statt um Text um Bildelemente. Genau wie in HTML kann man auch Bilder einfügen und diese Bilder sind externe Dateien.

Anders als bei HTM kann man aber Bilder einbetten oder mit einem Link verbinden. In den Beispielen sind alle Bilder eingebettet. Der Grund: SVG inkludiert den Speicherort als absoluten Pfad im Kode. Wenn man dann die Beispiele an einen anderen Ort verschiebt, sieht man die Bilder nicht. Das ist ganz ähnlich wie bei einer Html-Datei mit „Broken Links“.

Die Dateien, um die es hier geht, heißen svg (Scalable Vector Graphics). In Windows 8/8.1 ist SVG mit keiner Anwendung verknüpft. In Windows 10 ist SVG mit dem Edge-Explorer verknüpft und kann leider nicht auf einen anderen Browser geändert werden.

Basics

Was ist Vektorgrafik?
https://de.wikipedia.org/wiki/%C3%96sterreich

Flagge
RM -> Bild in neuem Tab öffnen -> zeigt png-Datei
RM -> Link in neuem Tab öffnen -> zeigt svg-Datei
https://de.wikipedia.org/wiki/Datei:Flag_of_Austria.svg

Wie schaut eine SVG-Datei aus?

<?xml version="1.0" encoding="UTF-8"?>
<sdirvg xmlns="http://www.w3.org/2000/svg" width="900" height="600">
<rect fill="#ed2939" width="900" height="600"/>
<rect fill="#fff" y="200" width="900" height="200"/>
</svg>

Wappen
RM Link in neuem Tab öffnen
https://de.wikipedia.org/wiki/Datei:Austria_Bundesadler.svg

Der Wappen-Adler ist komplexer, und er ist mit Inkscape gezeichnet. Es gibt auch eine genaue History und man sieht, der „Adler“ ist in beständiger Entwicklung.

Beispiele für SVG

Ordner: 90 Beispiele

Beispielbilder auf Wikimedia
https://commons.wikimedia.org/wiki/Main_Page

Kamera
https://commons.wikimedia.org/wiki/Main_Page#/media/File:Camera2_mgx.svg
-> more details
https://upload.wikimedia.org/wikipedia/commons/6/66/Camera2_mgx.svg

666 SVG-Bilder
https://commons.wikimedia.org/wiki/Category:SVG

Quelle für Bilder
http://all-free-download.com/free-vector/christmas.html
http://all-free-download.com/free-vector/download/christmas_ball_frame_310545.html
3MB
http://all-free-download.com/free-vector/download/christmas_hats_04_vector_163456.html
5.8 MB

Google Suche  nach  Svg-Bildern

„free svg images owls“ -> Images

liefert eine große Zahl von Bildern, zum Beispiel auch zwei Eulen
Man muss sich anmelden (zum Beispiel mit dem Facebook-Account)
Es stellt sich bald heraus, dass diese Dinge kostenpflichtig sind, auch die beiden Eulen (50 Cent)
http://www.misskatecuttables.com/products/thanksgiving/freebie-of-the-day-thanksgiving-owls.php?&cuid=1fc67300a83adf2f09b8fa8107920231
Aber man bekommt die png-Datei, die ist sogar freigestellt
Und diese Datei kann man problemlos in eine Vektor Grafik umwandeln, kostet nichts.
Und dann ist die Datei beliebig skalierbar. Siehe später.

Inkscape ist ein Vektor Zeichenprogramm

Ordner: 10 Linien Kontur Füllung

Bleistift wählen
Linienzug zeichnen
Kontur und Füllung einstellen
Bild speichern (z1.svg)
Bild exportieren (z1.png)
Bild importieren und vergleichen mit Original (z2.svg)

Verschiedene Objektformen (z3.svg)
Sterne und Polygone (z4.svg, z5.svg)

Bilder anordnen

Ordner: 20 Bilder anordnen

Gitter definieren 1cm
Bilder laden
Bilder an Gitter ausrichten
w1.svg
Bilder verknüpfen oder einbetten -> einbetten
Vergleich der Dateigröße
Vorteil verknüpfen: klein, nur mit den Bildern gemeinsam protabel
Vorteil einbetten: nur eine Datei, portabel
Bilder mit Rahmen trennen
Zwei Rechtecke zeichnen
Rechtecke zu einem Kreuz kombinieren
Keine Kontur, nur Füllung
Beschriftung: Füllen + Kontur
w2.svg

Klonen

Ordner: 40 Schachbrett
Quadrat zeichnen, schwarz einfärben
duplizieren
Weiß einfärben
Gruppe duplizieren
Zeile duplizieren
w1.svg

Quadrat zeichnen, schwarz einfärben
klonen
klonen -> Gekachelte Klone
Verschiebung x, pro Reihe 100%, abwechseln
8 Reihen, 4 Spalten
Man braucht eigentlich nur ein Quadrat, die anderen erzeugt man durch ein Hintergrundquadrat
w2.svg

Vektorisieren

Ordner: 60 Vektorisieren/Eulen

http://www.misskatecuttables.com/products/thanksgiving/freebie-of-the-day-thanksgiving-owls.php?&cuid=1fc67300a83adf2f09b8fa8107920231

Bild markieren
Pfad -> Bitmap nachzeichnen -> Farben -> 1..10..20 (Glätten, Scans stapeln, Hintergrund entfernen)
w4.svg

Overlays

Ordner: 30 Profilbild-FB

jpg Profilbild
png Flagge Frankreich
jpg Black Ribbon
svg Flagge EU (Gruppe mehrerer Objekte)
w1.svg

Profilbild vektorisieren
w2.svg
Alle löschen bis auf eines
black ribon transparent machen
Filter -> Füllung und Transparenz -> Helligkeitsradierer
570, 641, 1
Französische Fahne vektorisieren (Farben -> 3 Farben)
Achtung auf Original (Bild) und Vektor (Objekt)
w3.svg

Weihnachtsbild in Weihnachtskugel

95 Christbaumkugel

Man bekommt eine ZIP-Datei mit den Formaten .ai, .eps und .jpg
Man kann nur .ai verwenden
w1.svg
Bild hereinholen und in den Kreis positionieren
Geht nicht, weil die Sicht durch ein Objekt verstellt wird
w2.svg
Muster -> Gruppierung aufheben, Weißen Kreis entfernen, aha, der war drübergelegt
Gesicht kreisrund ausschneiden und überdie Grafik legen
Kreis auf Gesicht platzieren
Kreis und Gesicht markieren
Objekt -> Ausschneidepfad setzen -> Gesicht wird zugeschnitten
Gesicht in den Vordergrund
Gesicht skalieren und auf Weihnachtsbild setzen
w3.svg

Weihnachtsbild in Weihnachtskugel auf Christbaumkarte

Man muss bedenken, dass die Sternderln und die weiße Kugel nicht ein sondern viele Objekte sind.
Aber diese Objekte liegen übereinander und daher ist es schwierig, einfach nur durch draufklicken sie zu isolieren.

Problem der rote Hintergrund und die Sterne stören, wir wollen nur die Kugel und die Banderln haben.
Christbaumkugel als .ai-Datei laden (Christmas_ball_frame.ai) und als .svg speichern.
Das Bild ist detwa doppelt so groß, weil svg kein Binärformat ist.
Wir müssen das Bild zerlegen, also die Gruppierung aufheben.
Danach befördern wir die Bestandteile in verschiedene Ebenen.
Zuerst ist alles in Ebene1
Wir erstellen eine Ebene Hintergrund unter Ebene 1
Wir erstellen eine Ebene Banderln (weiß) über Ebene 1
Wir benennen Ebene1 um in Sternderln (rot)
Die Ebenen sind also
Banderln (weiß)
Sternderln (rot) <– hier ist alle drinnen
Hintergrund [ganz unten]

Speichern

Alles markieren -> Objekt -> Gruppierung aufheben
Nichts markieren
Tab (markiert das unterste Objekt) das ist in diesem Fall einfach ein Rahmen, dieses Objekt löschen wir einfach.
Nichts markieren
Tab (markiert das unterste Objekt) das ist in diesem Fall der rote Hintergrund.
RM Verschiebe zu Ebene Hintergrund
Ebene Hintergrund sperren

Gruppierung aufheben, Ebene 1 unsichtbar machen
Ein weißes Objekt nach dem anderen in die (unsichtbare) Ebene „Banderln (weiß)“ verschieben. Damit verschwinden sie.

Damit haben wird Objekt in drei Ebenen zerlegt, die wir unabhängig voneinander bearbeiten können.

Ordner 95 Christbaumkugel -> Christmas_ball_frame-layered.svg

Weihnachtskarte mit vielen Gesichtern

Ordner: 99 Weihnachtskarte