Scalable Vector Graphics (engl = skalierbare Vektorgrafik) ist eine auf XML-basierende, zweidimensionale Vektorgrafik. Der größte Vorteil in der Verwendung von SVG´s gegenüber Bild- bzw. Grafik-Formaten (.jpg, .png, etc.) ist die Skalierbarkeit ohne Qualitätsverlust.
Ein weiterer Vorteil gegenüber den gerade angesprochenen Formaten z.B.: bei der Verwendung von SVG´s auf einer Webseite ist, dass zum Darstellen lediglich der XML-Code und nicht die eigentliche .svg-Datei extra geladen werden bzw. auf dem Server hinterlegt sein muss. Dadurch kann die Ladezeit eines Webprojektes, aufgrund weniger Serveranfragen die beim Aufrufen des Projektes gestellt werden müssen, verbessert werden.
Trotzdem ist ebenfalls möglich, eine .svg-Datei z.B.: klassisch in einem Ordner namens “Images” abzuspeichern und über gängige Ausgabemöglichkeiten (z.B.: HTML img-Tag oder CSS Background-image) darzustellen. In projektbezogenen Sonderfällen ist es eventuell sinnvoller oder nur möglich ein SVG-Format über diesen klassischen Weg wunschgemäß darzustellen. Aus diesem Grund möchten wir dir einen Beitrag verlinken, welcher die Vor- & Nachteile der verschiedenen Ausgabeoptionen mit Beispiel-Code aufgelistet hat: Hier gehts zum Beitrag von mediaevent.de
Durch das Verwenden des XML-Codes zur Darstellung von SVG´s, können diese stark angepasst und auch animiert werden. Der XML-Code richtet sich vom Aufbau her nach den z.B.: in Adobe Illustrator erstellten Ebenen, Pfaden & Ankerpunkten der erstellten Grafik. Wie der XML-Code geschrieben wird, kann also bereits im Erstellungsprozess einer Grafik (z.B.: durch das Erstellen mehrerer Ebenen) manipuliert werden. Hauptsächlich sollte bei einer später gewünschten Animation bereits hier auf den Aufbau geachtet werden, sodass für die Animation notwendig anzusprechende Teilbereiche anschließend auch die gewünschte Animation erzielen können. Oft findet man innerhalb des XML-Codes Tag´s wie zum Beispiel: , , , welche einen Teilbereich des SVG´s darstellen (Um zu überprüfen, welche Tags aus dem XML-Code zu welchem Teilbereich z.B. von sehr detailreichen Grafiken gehören, kann man in seinem Browser z.B.: bein den Developer Tools von Google Chrome (Shortcut = F12) über die einzelnen Tags im XML-Code hovern was dazu führt, dass der passende Teilbereich der Grafik gehighlightet wird) (Hier sein noch zu erwähnen, dass eine SVG-Datei über einen Doppelklick in eurem Standardbrowser direkt angezeigt werden kann).
Quelle: Unsplash / Mae Mu
Mittlerweile finden sich auch eine Reihe von Software-Anbietern auf dem Markt, welche Tools bereitstellen, um ohne Skriptsprachen wie JavaScript das Animieren von Vektorgrafiken über nutzerorientierte Oberflächen zu erleichtern bzw. es einer breiteren Masse von Nutzern zur Verfügung stellen.
Nachfolgend findest du eine Auflistung einiger Tools:
Wichtige Links zu diesem Thema
