SVG Vektorgrafik

Informatik · Gymnasium Muttenz

SVG — Scalable Vector Graphics

Ein Bild, das nicht aus Pixeln besteht, sondern aus einer Bauanleitung: Zeichne einen Kreis hierhin, einen Strich dorthin. Sie schreiben diese Anleitung selber — und weil sie nur Text ist, brauchen Sie dafür nichts als diese Seite. Jede Übung hat eine Werkbank mit Editor und Vorschau.

Ein paar Zeilen SVG. Diese Blume bauen Sie in Abschnitt 2.

So arbeiten Sie mit dieser Seite

  • Schreiben Sie Ihren Code links in die Werkbank. Die Vorschau rechts aktualisiert sich automatisch, mit Ctrl/⌘ + Enter sofort.
  • Der Reiter heisst bild.svg: Was Sie schreiben, ist eine vollständige Bilddatei. Mit Herunterladen holen Sie sie auf den Computer und können sie im Browser oder in einer Webseite verwenden.
  • Ihr Code bleibt in diesem Browser gespeichert, auch wenn Sie die Seite schliessen.
  • Die Animationen auf dieser Seite laufen wirklich — anders als im gedruckten Skript, wo nur ein starres Bild davon stehen kann.

«I was asking questions which nobody else had asked before, because nobody else had actually looked at certain structures. Therefore, as I will tell, the advent of the computer, not as a computer but as a drawing machine, was for me a major event in my life.»

Benoît Mandelbrot Benoît Mandelbrot (1924–2010), zitiert nach Wikiquote

Foto: Rama, Wikimedia Commons, CC BY-SA 2.0 FR

Zum Nachschlagen

Die folgenden Adressen werden im Kapitel erwähnt. SVG hat sehr viele Attribute — niemand kennt sie alle auswendig, man schlägt sie nach.

Werkzeuge