SVG Tutorial


SVG steht für Scalable Vector Graphics.

SVG ist eine XML-Auszeichnungssprache zur Beschreibung zweidimensionaler Grafiken. Im Gegensatz zu Bitmap-Bildern werden SVG-Bilder in Textform gespeichert und können ohne Verzerrung auf jede beliebige Größe skaliert werden, da sie auf mathematischen Beschreibungen statt auf Pixeln basieren.

SVG-Grafiken sind skalierbar und auflösungsunabhängig, was bedeutet, dass sie ohne Verzerrung vergrößert oder verkleinert werden können.

SVG wird häufig im Webdesign, bei der Erstellung von Icons, bei der Datenvisualisierung und in anderen grafikbezogenen Bereichen eingesetzt.

Hauptmerkmale von SVG

  • Vektorgrafiken:SVG verwendet pfadbasierte Vektorgrafiken, was bedeutet, dass Grafiken unendlich vergrößert werden können, ohne verzerrt zu werden.
  • Skalierbarkeit:SVG-Dateien bleiben bei unterschiedlichen Auflösungen klar und eignen sich daher für responsives Design.
  • Interaktivität:SVG kann mit JavaScript kombiniert werden, um Animationen und interaktive Effekte zu erzielen.
  • Integration:SVG kann direkt in HTML5 eingebettet werden, ohne externe Dateien zu verwenden.
  • Kompatibilität:Die meisten modernen Browser unterstützen SVG.

Anwendungsszenarien von SVG

  • Web-Icons:Aufgrund der Skalierbarkeit von SVG eignet es sich sehr gut zum Erstellen von Web-Icons.
  • Datenvisualisierung:SVG wird häufig verwendet, um Diagramme und Grafiken zu erstellen, wie Balkendiagramme, Kreisdiagramme usw.
  • Animation:SVG kann mit CSS und JavaScript kombiniert werden, um komplexe Animationseffekte zu erstellen.
  • Spieleentwicklung:In einigen Fällen wird SVG auch verwendet, um einfache Spielgrafiken zu erstellen.
  • Design-Prototypen:Designer können SVG verwenden, um interaktive Design-Prototypen zu erstellen.

Ein einfaches Beispiel

Wir haben einen einfachen roten Kreis mit einem schwarzen Rand erstellt:

SVG-Beispiele

<html> <body> <h1>Mein erstes SVG</h1> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg> </body> </html>

Selbst ausprobieren »

Klicken Sie auf die Schaltfläche "Try it Yourself", um das Ergebnis anzuzeigen.

SVG-Beispiele

Sie können SVG-Beispiele online bearbeiten und die Ergebnisse online anzeigen!

Online-Beispiele

SVG-Referenzhandbuch

Bei Example Tutorial bieten wir Ihnen ein vollständiges SVG-Referenzhandbuch, das alle SVG-Elemente in der W3C-Empfehlung (SVG Version 1.1) auflistet.

SVG-Referenzhandbuch

SVG-Online-Editor

Andere Erweiterungen