<circle r="100" cx="150" cy="150" fill="yellow" stroke="blue" stroke-width="5" />

2. SVG ist …

SVG-Logo … eine Auszeichnungssprache für graphische Inhalte, die in HTML integriert und mit CSS gestylt und animiert werden kann.

Die SVG-Spezifikation ist ein offener Standard, der vom World Wide Web Consortium (W3C) seit 1999 entwickelt wird.

3. Grundformen

<circle/> <ellipse/> <rect/> <polygon/> <path/>
TEXT in SVG Text entlang einer Bézierkurve. Lauftext entlang einer Bézierkurve! Lauftext entlang einer Bézierkurve!

ist …

5. Die viewBox

Vektorgrafiken werden in einem Koordinatensystem gezeichnet und lassen sich verlustfrei skalieren!

(200,200)

6. Wozu kann man SVG nutzen?

Logos

SVG-Logo
Selfhtml

Icons

Datenvisualisierung

Infografik Klimatabelle
durchschnittliche globale Temperaturen (1850-2018)
Quelle: Wikimedia Commons
Infografik Blutzirkulation
Blutzirkulation
Quelle: Wikimedia Commons

7. Wie kann man SVGs erzeugen?

Nutzen Sie diese Programme:

Adobe Illustrator
Adobe Illustrator
corelDraw
Gimp
The GIMP
Inkscape
Inkscape
Boxy SVG
Boxy SVG
sketch
Sketch