Eine Vektorgrafik enthält auf schlanke Weise die Darstellung von (mathematischen) Objekten wie Linien, Kreise, etc. Ihre Auflösung bleibt im Gegensatz zu einer Rastergrafik auf jeder Ebene erhalten, was sie besonders attraktiv für zoombare Medien macht. Mittlerweile unterstützen die meisten Navigatoren das Format SVG für skalierbare Vektorgrafiken; für die Spezifikationen siehe: w3.org. Beispiel einer einfachen Grafik (.svg), (.txt), (.html); als Muster: (.svg) (510 Bytes), (.pdf) (5.8 kB).
Ein weiterer Vorteil ist ihre Transparenz. Vektorgrafiken eignen sich somit ausgezeichnet für die Darstellung von Moirémustern und allerlei sonstigen optischen Täuschungen!
Moiré-Effekt mit dem Bildschirm ✦ Kreise, Strecken und Punkte ✦ Schwebung ✦ Strahlen (sternförmige Objekte) ✦ Geschachtelte Quadrate ✦ Emergente Zeichen: «Linseneffekt» ✦ Kurven und Pfade
“You don’t need something more to get more – that is what emergence means.” — Murray Gell-Mann, “Beauty and truth in physics”, 2007
Hier kann getestet werden, ob sich ein Moiré mit dem eigenen Bildschirm oder der Projektionsfläche ergibt. Achtung: grosse Unterschiede zwischen verschiedenen Applikationen!
Es werden sich auch aus den folgenden Bildern unbeabsichtigte Moiré-Effekte ergeben. Die meisten Navigatoren erlauben die ganze Ansicht zu vergrössern oder zu verkleinern; damit lassen sich diese Effekte verringern oder steigern.
Einige der folgenden Vektoren werden im Navigator möglicherweise unzureichend wiedergegeben, wenn Kantenglättung (Anti-Aliasing) angewendet wird. Bitte prüfen Sie dies mit dem folgenden Bild (.pdf). Das entsprechende Vektorbild (.svg) sollte mindestens genauso gut aussehen.
Adobe PostScript® ✦ Kompakte Programme ✦ Druckreife Grafiken ✦ PyX ✦ MetaPost
PostScript® (PS) ist Turing-vollständig; die Programme ergeben eine druckreife Vektorgrafik, welche z. B. mit ghostscript.com, GSview, inkscape.org oder okular.kde.org u. a. angezeigt werden kann.
Sowohl SVG als auch die HTML Canvas haben viel von PS geerbt. Durch die Möglichkeit zu rechnen, bleiben die PS-Anweisungen mit ganzen Zahlen exakt (acht signifikante Stellen in der Ausführung); soll jedoch am Ende eine SVG-Datei entstehen, ist das direkte Schreiben dieser in puncto Lesbarkeit meistens vorzuziehen. Gleiches gilt für diverse LaTeX-Pakete (z. B. tug.org/metapost) oder das Python pyx-project.org. Die Grafiken sind redundant gruppiert und/oder enthalten unnötige Attribute: (.py)/(.svg), (.mp)/(.svg); immerhin beide ohne nutzloses Begrenzen (clipping).
Schachbrettmuster ✦ Dreieckmuster ✦ Wabenstruktur (Hexagonnetz) ✦ Carreaux miraculeux ✦ Fensterrosen (rosettenartige Moirébilder) ✦ Klammern, Wellen und 3D-Effekte ✦ Maurer-Rosetten ✦ Verfolgungskurven ✦ Konforme Abbildungen ✦ Fading Effekt ✦ Glass Muster und anderes
Achtung! Browser auf mobilen Geräten, welche auf ‹SVG Tiny› zurückgreifen, stellen Vektorgrafiken mit dem Element ‹pattern› als grobe Rastergrafik dar.
Schachtelungen in der Vektorgrafik ✦ Pfadgrafiken ✦ Höhere Ordnungen (Pfade) in rekursiven Grafiken
Selbstähnliche Figuren können sowohl durch Schachtelungen im Text der Vektorgrafik selber als auch durch Erzeugen eines Pfades mit einem externen Programm erstellt werden. Kombinationen der beiden Methoden ergeben oft eine willkommene Optimierung hinsichtlich Darstellungszeit versus Datenmenge.
Neon Farbeffekt ✦ Kontrastsehen ✦ Enigma Täuschung ✦ Kanizsa (nicht euklidisch) ✦ Anaglyphe ✦ Rotoreliefs
Für weitere optische Täuschungen siehe z. B.:
Einer der ersten, der sich wissenschaftlich mit der physiologischen Optik befasst, ist Hermann von Helmholtz: e-rara-21259, en français: gallica.bnf.fr.
Penrose «Dreieck» openclipart.org [1a], [1b], «Wellen» [2], «Rotation» [3], «3D» [4], Farbvariante der «Fraser Spirale» [5], «Adelson Schatten» [6], Farbhintergrund [7], 3D [8].
Karierte Blätter & Hefte 4 mm, 5 mm ✦ Linierte Hefte 9 mm A4, A6 ✦ Notenhefte und Blätter
Diese Dokumente sind für den Gebrauch auf einem Tablet oder mobilen Gerät mit Stiftfunktion gedacht. Bitte beim allfälligen Ausdrucken die Wahl auf «tatsächliche Grösse» («Fit to printable area: none») belassen. Die Lineaturstärke beträgt dem Standard von TikZ gemäss 0.4 pt. Diesen Standard habe ich, von Spezialblättern abgesehen, übernommen.
Optimierte Darstellung von PDF und SVG Dokumenten ✦ Parkettierungen ganzer Seiten ✦ Vector Art ✦ Kurven ✦ Formeln in HTML
<stroke-linecap="round"> geschmeidig gemacht werden (.svg)/(.pdf). Ein ganzer Pfad ist hier wegen der Verjüngung der Konturstärke (noch?) nicht möglich.<symbol> (.svg), Spirograph, 3D-Effekt durch <fill-rule="evenodd"> (.svg)/(.pdf)[Ctrl] + [P] (.pdf) (2 kB)Mathematik und HTML ist ein weites Feld (lange kein besonders ruhmreiches und ästhetisches…). Am besten erstellt man eine Vektorgrafik oder arbeitet via MathJax.org oder KaTeX.org, welche jedoch JavaScript voraussetzen.