SVG-Tutorial

SVG Kursempfehlung:

SVG bezeichnet das skalierbare Vektorbild (Scalable Vector Graphics) XML Formatdefinition basierend auf Vektoren

Beispiel in jedem Kapitel

Mit unserem "Versuchen Sie es selbst"-Editor können Sie SVG bearbeiten und dann auf den Button klicken, um die Ergebnisse anzuzeigen.

SVG-Beispiel

<html>
<body>
<h1>Mein erstes SVG</h1>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>

Versuchen Sie es selbst

Notwendige Grundkenntnisse

Bevor Sie weiterlernen, sollten Sie sich mit folgenden Inhalten vertraut machen:

  • HTML
  • Grundlagen XML

Wenn Sie diese Inhalte zunächst lernen möchten, besuchen Sie bitte die entsprechenden Tutorials auf unserer Homepage.

Was ist SVG？

  • SVG bezeichnet das skalierbare Vektorbild (Scalable Vector Graphics)
  • SVG zur Definition von vektorbasierten Web-Grafiken
  • SVG Grafiken im XML-Format definieren
  • SVG jeder Element und jede Eigenschaft in der Datei kann animiert werden
  • SVG ist ein W3C-Empfehlungsstandard
  • SVG integriert mit anderen W3C-Standard, z.B. DOM und XSL

SVG ist ein W3C-Empfehlungsstandard

SVG 1.0 wurde am 4. September 2001 zum W3C-Empfehlungsstandard.

SVG 1.1 wurde am 14. Januar 2003 zum W3C-Empfehlungsstandard.

SVG 1.1 (2. Ausgabe) wurde am 16. August 2011 zum W3C-Empfehlungsstandard.

SVG die Vorteile

Im Vergleich zu anderen Bildformaten (wie JPEG und GIF) bietet SVG Die Vorteile sind:

  • SVG Bilder können mit jedem Texteditor erstellt und bearbeitet werden
  • SVG Bilder können durchsucht, indiziert, skriptiert und komprimiert werden
  • SVG Bilder sind erweiterbar
  • SVG Bilder können in jeder Auflösung hochwertig gedruckt werden
  • SVG Bilder sind skalierbar
  • SVG Grafiken verlieren bei der Vergrößerung oder Verkleinerung keine Qualität
  • SVG ist ein offener Standard
  • SVG Dateien sind rein XML

erstellen SVG Bilder

SVG Bilder können mit jedem Texteditor erstellt werden, aber es wird empfohlen, ein Zeichenprogramm (z.B. InkscapeInkscape