Vektorgrafiken sind eine Methode, um eine Reihe von Formen, Koordinaten und Pfaden an ihren Rendering-Kontext zu übermitteln. Sie sind eine Reihe von Anweisungen zum Zeichnen eines Bildes. Wenn dieses Bild vertikal oder vertikal skaliert wird, werden die Punkte und Linien, die das Bild darstellt, maßstabsgetreu neu gezeichnet. Eine gleichmäßige Kurve zwischen zwei Punkten wird bei jeder Größe genauso gleichmäßig gezeichnet, ähnlich wie ein CSS-definierter Rahmen in einem HTML-Element neu gezeichnet wird, wenn das Element im Darstellungsbereich skaliert wird.
Scalable Vector Graphics (SVG) ist eine vom W3C entwickelte XML-basierte Auszeichnungssprache. Es ist ein Vektorbildformat, das für das moderne Web entwickelt wurde.
Mit jeder Designsoftware, die speziell für die Bearbeitung von Vektorgrafiken vorgesehen ist, können Sie ein Bild als SVG exportieren. Da es sich jedoch um eine standardisierte, für Menschen lesbare Auszeichnungssprache handelt, kann SVG auch mit jeder beliebigen Textbearbeitungssoftware erstellt und bearbeitet werden, unabhängig von der Software, mit der es erstellt wurde. Für Bilder mit einer echten Komplexität wird dies jedoch schnell unrealistisch. SVG-Dateien können mit CSS gestaltet werden oder JavaScript enthalten, das Verhaltensweisen und Interaktionen in die Bilder selbst einbaut.
Neben der offensichtlichen Attraktivität für Designer und Entwickler ist SVG auch ein unglaublich leistungsstarkes Format im Hinblick auf die Endnutzererfahrung. Die beschreibenden Informationen in einer SVG-Quelle sind im Vergleich zu den präskriptiveren pixelrasterbasierten Informationen in einer SVG-Quelle oft sehr kompakt im Vergleich zu den präskriptiveren, pixelrasterbasierten Informationen in einer SVG-Quelle. Der Unterschied zwischen der Anweisung, dass der Browser eine 1 x 1 Pixel große rote Linie zwischen 1 x 1 und 1 x 5 darstellt, und "1 x 1 ist ein rotes Pixel". 1 x 2 ist ein rotes Pixel. 1 x 3 ist ein rotes Pixel. 1 x 4 ist ein rotes Pixel. 1 x 5 ist ein rotes Pixel.“ Die andere Seite ist, dass der beschreibende Charakter von SVG durch den Browser mehr Interpretation – mehr „Denken“ – erfordert. Aus diesem Grund können komplexe SVGs das Rendern aufwendiger sein. Gleichzeitig kann ein sehr komplexes Bild aus einem ausführlichen Satz von Anweisungen und einer großen Übertragungsgröße bestehen.
Es kann ein wenig Ausprobieren erforderlich sein, bis Sie in der Lage sind, einen Kandidaten für eine Bildquelle sofort als besser für SVG und nicht als konventionelles Rasterformat zu erkennen. Es gibt jedoch einige Richtlinien: Benutzeroberflächenelemente wie Symbole werden von SVG fast immer gut unterstützt. Grafiken mit scharfen Linien, klaren Farben und klar definierten Formen sind wahrscheinlich eine gute Wahl für SVG.
SVG ist ein großes Thema: eine komplette Auszeichnungssprache, die neben HTML entwickelt wurde und einzigartige Stiloptionen und Funktionen bietet. Eine ausführlichere Einführung in SVG finden Sie in der Anleitung zu MDN SVG.