Vektor-Grafik
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
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
Franz Fiala
Letzte Artikel von Franz Fiala (Alle anzeigen)
- Neue Folgen im Physik-Universum - 18. Dezember 2023
- Große Dateien in WordPress - 17. Dezember 2023
- Wien-Panorama - 16. Dezember 2023
Neueste Kommentare