SVG Einführung

SVG, Scalable Vector Graphics, ist eine XML-Auszeichnungssprache, die zur Beschreibung zweidimensionaler Grafiken verwendet wird.

Im Gegensatz zu Bitmap-Bildern werden SVG-Bilder als Text gespeichert und können ohne Verzerrung auf jede beliebige Größe skaliert werden, da sie auf mathematischen Beschreibungen statt auf Pixeln basieren.

Voraussetzungen vor dem Lernen:

Bevor Sie fortfahren, sollten Sie über ein grundlegendes Verständnis von Folgendem verfügen:

  • HTML
  • XML-Grundlagen

Wenn Sie diese zuerst lernen möchten, besuchen Sie bitte dieStartseitedieser Website und wählen Sie das entsprechende Tutorial aus.

Was ist SVG?

  • SVG steht für Scalable Vector Graphics
  • SVG wird verwendet, um vektorbasierte Grafiken für das Web zu definieren
  • SVG definiert Grafiken mit dem XML-Format
  • SVG-Bilder verlieren beim Vergrößern oder bei Größenänderung nicht an Qualität
  • SVG ist ein Standard des World Wide Web Consortium
  • SVG ist ein integraler Bestandteil von W3C-Standards wie DOM und XSL

SVG ist eine W3C-Empfehlung

SVG wurde am 14. Januar 2003 zur W3C-Empfehlung.

Weitere Informationen über die W3C-SVG-Aktivität finden Sie in unserem W3C-Tutorial.

SVG-Geschichte und Vorteile

SVG-Geschichte:

Die Entwicklung von SVG wurde von der W3C SVG Working Group angestoßen, die 1998 gegründet wurde, und entstand zusammen mit sechs Standardvorschlägen, die in diesem Jahr beim W3C eingereicht wurden:

  • Am 4. September 2001 wurde SVG 1.0 veröffentlicht.
  • Am 4. Januar 2003 wurde SVG 1.1 veröffentlicht.
  • Am 14. Januar 2003 wurden die mobilen SVG-Subversionen SVG Tiny und SVG Basic eingeführt.
  • Am 22. Dezember 2008 wurde SVG Tiny 1.2 veröffentlicht.
  • Am 16. August 2011 wurde SVG 1.1 (2. Ausgabe) veröffentlicht und wurde damit zur aktuellen W3C-Empfehlung.
  • Das W3C forscht derzeit noch an SVG 2 und entwickelt es weiter. Die neueste Entwurfsversion finden Sie unterHier klicken zum Anzeigen 。

Vorteile von SVG:

  • Skalierbarkeit: SVG-Bilder können verlustfrei auf jede Größe skaliert werden, ohne Verzerrung. Das liegt daran, dass SVG auf Vektorbeschreibungen und nicht auf Pixelbildern basiert, sodass es auf Bildschirmen mit unterschiedlichen Auflösungen und Größen klar bleibt.

  • Textcharakter: SVG-Dateien sind XML-basierte Textdateien, die leicht zu bearbeiten und zu pflegen sind. Sie können SVG-Dateien direkt bearbeiten, um Grafiken anzupassen, oder einen Texteditor oder Code-Editor verwenden, um SVG-Bilder zu erstellen und zu ändern.

  • Interaktivität: SVG ermöglicht das Hinzufügen interaktiver Elemente wie Links, Animationen und Event-Handler. Dadurch können SVG-Bilder mit Benutzern interagieren und ein reichhaltigeres Benutzererlebnis schaffen.

  • Animationsunterstützung: SVG unterstützt das Erstellen von Animationen mit CSS und JavaScript, wodurch Grafiken lebendiger werden. Sie können CSS-Animationen oder JavaScript-Skripte verwenden, um dynamische Effekte für SVG-Grafiken zu erzielen, wie Übergänge, Drehung, Skalierung usw.

  • Einbettbarkeit: SVG-Bilder können direkt in HTML-Dokumente eingebettet oder als externe Dateien in HTML-Dokumente verlinkt werden. Dadurch können SVG-Bilder nahtlos in andere Webtechnologien wie CSS, JavaScript usw. integriert werden.

SVG-Dateien anzeigen

SVG wird in modernen Webbrowsern weitgehend unterstützt, einschließlich Chrome, Firefox, Safari usw.

SVG-Bilder können über Inline-SVG-Code oder externe SVG-Dateien in HTML-Dokumente eingebettet werden.

  • Google Chrome: Google Chrome ist ein beliebter moderner Webbrowser mit guter Unterstützung für das SVG-Format und umfangreichen Entwicklerwerkzeugen.

  • Mozilla Firefox: Mozilla Firefox ist ebenfalls ein weit verbreiteter Webbrowser, der die Anzeige und Darstellung von SVG-Bildern unterstützt und die meisten SVG-Funktionen unterstützt.

  • Apple Safari: Safari ist ein von Apple entwickelter Webbrowser mit guter Unterstützung für SVG, geeignet für Mac, iOS und andere Geräte.

  • Microsoft Edge: Microsoft Edge ist ein Webbrowser von Microsoft, unterstützt das SVG-Format und verbessert kontinuierlich die SVG-Unterstützung.

  • Opera: Opera ist ein schneller und sicherer Webbrowser mit guter Unterstützung für SVG und viele moderne Webtechnologien.

  • Brave: Brave ist ein datenschutzorientierter Webbrowser auf Chromium-Basis, daher unterstützt er auch SVG-Bilder.

  • Vivaldi: Vivaldi ist ein hochgradig anpassbarer Webbrowser, ebenfalls auf Chromium basierend, und unterstützt das SVG-Format.

SVG-Dateien erstellen

Hier sind die grundlegenden Schritte zum Erstellen einer SVG-Datei:

  1. Texteditor öffnen: Verwenden Sie Ihren bevorzugten Texteditor, wie Visual Studio Code, sieheVScode Tutorial。

  2. SVG-Code schreiben: Schreiben Sie SVG-Code in einem Texteditor. SVG-Code besteht aus XML-Markup, das grafische Elemente, Attribute und Stile beschreibt.

  3. Datei speichern: Speichern Sie den geschriebenen SVG-Code als.svgeine Datei, die mit der Erweiterung endet, wie z. B.example.svg。

  4. SVG-Dateien in der Vorschau anzeigen: Öffnen Sie die SVG-Datei mit einem Webbrowser oder betten Sie die SVG-Datei in ein HTML-Dokument ein, um das SVG-Bild im Browser in der Vorschau anzuzeigen.

Das Folgende ist ein einfaches SVG-Dateibeispiel, das ein SVG-Bild mit einem Kreis erstellt:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="80" fill="blue" />
</svg>

Dieser Code beschreibt eine SVG-Zeichenfläche mit einer Breite von 200 Einheiten und einer Höhe von 200 Einheiten. Auf der Zeichenfläche wird ein Kreis gezeichnet, mit Mittelpunktkoordinaten (100, 100), einem Radius von 80 Einheiten und einer Füllfarbe von Blau.

Andere Erweiterungen