SVG - Übersicht

Was ist SVG?

SVG, Scalable Vector Graphics ist eine XML-basierte Sprache zum Definieren vektorbasierter Grafiken.
SVG soll Bilder über das Web anzeigen.
Als Vektorbilder verliert das SVG-Bild nie an Qualität, unabhängig davon, wie es verkleinert oder in der Größe geändert wird.
SVG-Bilder unterstützen Interaktivität und Animation.
SVG ist ein W3C-Standard.
Andere Bildformate wie Rasterbilder können auch mit SVG-Bildern kombiniert werden.
SVG lässt sich gut in XSLT und DOM von HTML integrieren.

Vorteile

Verwenden Sie einen beliebigen Texteditor, um SVG-Bilder zu erstellen und zu bearbeiten.
SVG-Bilder sind XML-basiert, durchsuchbar, indizierbar und können per Skript und komprimiert werden.
SVG-Bilder sind hoch skalierbar, da sie niemals an Qualität verlieren, unabhängig davon, wie sie verkleinert oder in der Größe geändert werden
Gute Druckqualität bei jeder Auflösung
SVG ist ein offener Standard

Nachteile

Die Größe des Textformats ist größer als bei binär formatierten Rasterbildern.
Die Größe kann auch für kleine Bilder groß sein.

Beispiel

Das folgende XML-Snippet kann verwendet werden, um einen Kreis im Webbrowser zu zeichnen.

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
</svg>

Betten Sie das SVG-XML direkt in eine HTML-Seite ein.

testSVG.htm

<html>
   <title>SVG Image</title>
   <body>
   
      <h1>Sample SVG Image</h1>
      
      <svg width="100" height="100">
         <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
      </svg>
   
   </body>
</html>

Ausgabe

Öffnen Sie textSVG.htm im Chrome-Webbrowser. Sie können Chrome / Firefox / Opera verwenden, um SVG-Bilder direkt ohne Plugin anzuzeigen. In Internet Explorer sind ActiveX-Steuerelemente erforderlich, um SVG-Bilder anzuzeigen.

Wie SVG in HTML integriert wird

Das Element <svg> gibt den Start des SVG-Bildes an.
Die Breiten- und Höhenattribute des <svg> -Elements definieren die Höhe und Breite des SVG-Bildes.
Im obigen Beispiel haben wir ein <circle> -Element verwendet, um einen Kreis zu zeichnen.
Die Attribute cx und cy repräsentieren den Mittelpunkt des Kreises. Der Standardwert ist (0,0). Das Attribut r repräsentiert den Radius des Kreises.
Andere Attribute Strich und Strichbreite steuern die Kontur des Kreises.
Das Füllattribut definiert die Füllfarbe des Kreises.
Das Schließen des </ svg> -Tags zeigt das Ende des SVG-Bildes an.