SVG steht für Scalable Vector Graphics und bezeichnet ein XML-basiertes Format für zweidimensionale Vektorgrafiken. Das W3C verabschiedete SVG 1.0 im Jahr 2001 als Empfehlung. Anders als PNG oder JPG speichert eine SVG-Datei keine Pixel, sondern beschreibt Formen, Pfade, Farben und Texte als Code.
Daraus ergibt sich die wichtigste Eigenschaft: SVG lässt sich ohne Qualitätsverlust beliebig skalieren, vom FaviconEin Favicon ist ein kleines Symbol, das Browser neben dem Seitentitel im Tab anzeigen. Auch in Lesezeichen, im Verlauf und teilweise in Suchergebnissen taucht es auf. Der Name setzt sich aus „favorite“ und „icon“ zusammen, weil das Symbol ursprünglich dazu diente, favorisierte Seiten in der Lesezeichenliste zu markieren. Heute ist es ein fester Bestandteil jeder Website. Wenn viele Tabs offen…
Weiterlesen: Favicon bis zum Großformat. Die Dateien sind bei einfachen Motiven oft nur wenige Kilobyte groß. Das macht das Format zur ersten Wahl für Logos, Icons, Illustrationen und Diagramme mit klaren Flächen. Für Fotos mit feinen Farbverläufen eignet es sich dagegen nicht. Das zugrunde liegende Prinzip erklärt der Eintrag zur Vektorgrafik.
Weil SVG als Text vorliegt, lässt es sich direkt in HTML einbetten, per CSS gestalten und per JavaScript steuern. So können Farben an einen Dark ModeDark Mode, auf Deutsch dunkler Modus, bezeichnet ein Farbschema für Oberflächen, bei dem helle Schrift und helle Bedienelemente auf dunklem Hintergrund dargestellt werden. Er ist das Gegenstück zum klassischen hellen Erscheinungsbild und steht heute in Betriebssystemen, Apps und Webseiten als Option zur Verfügung. Nutzende können ihn meist dauerhaft wählen oder die Einstellung dem Betriebssystem überlassen, das je nach Tageszeit automatisch…
Weiterlesen: Dark Mode angepasst, Hover-Effekte umgesetzt oder Animationen erzeugt werden. Welche dieser Möglichkeiten zur Verfügung steht, hängt von der Einbindung ab: Wird SVG als Bild über das img-Element oder als CSS-Hintergrund geladen, bleibt es für Stylesheets und Skripte der Seite eine geschlossene Grafik. CSS, das direkt in der SVG-Datei steht, wirkt aber auch dort, Skripte in der Datei führen Browser bei dieser Einbindung nicht aus. Nur inline im HTML eingebundene SVGs lassen sich vollständig von außen per CSS und JavaScript ansprechen.
Technisch legt das Attribut viewBox ein eigenes Koordinatensystem fest und sorgt dafür, dass die Grafik sich an den verfügbaren Platz anpasst. Bei Logos empfiehlt es sich, Schrift in Pfade umzuwandeln, damit fehlende Schriften die Darstellung nicht verändern. Exportiert wird SVG aus Programmen wie Illustrator, Figma oder Inkscape. Werkzeuge wie SVGO entfernen überflüssigen Code und verkleinern die Dateien weiter.
Es gibt Hinweise zur Sicherheit: SVG-Dateien können Skripte enthalten. Dateien aus unbekannter Quelle sollten deshalb nicht ungeprüft eingebunden oder hochgeladen werden. Viele Content-Management-Systeme, darunter WordPress, erlauben den Upload von SVG standardmäßig nicht und benötigen dafür eine Bereinigung oder ein Plugin.
Im Webdesign ist SVG außerdem Grundlage für Icon-Systeme und Illustrationen, die sich an das Farbschema einer Website anpassen. Ein SVG-Sprite bündelt viele Icons in einer Datei, aus der sie sich per use-Element überall wiederverwenden lassen. Das zentralisiert die Pflege und spart Anfragen, wobei dieser Vorteil bei HTTP/2 kleiner ausfällt als früher. Bei sehr komplexen Motiven mit tausenden Pfaden können Dateigröße und Rendering allerdings leiden, dann ist ein Pixelformat wie WebP oder PNG die bessere Wahl.
Für BarrierefreiheitBarrierefreies Design bezeichnet die Gestaltung von Inhalten, Oberflächen und Produkten, die für möglichst viele Menschen nutzbar sind, unabhängig von Seh-, Hör-, Bewegungs- oder kognitiven Einschränkungen. Im Englischen spricht man von Accessibility. Gemeint ist nicht nur eine Rücksicht auf eine kleine Gruppe, denn Barrieren entstehen auch situativ, etwa durch grelles Sonnenlicht auf dem Display, eine gebrochene Hand oder eine laute Umgebung.…
Weiterlesen: Barrierefreiheit lassen sich Titel und Beschreibung im SVG hinterlegen oder ein aria-label setzen. Damit Screenreader sie zuverlässig auslesen, empfiehlt es sich, das Element mit role=“img“ auszuzeichnen und title und desc über aria-labelledby mit dem svg-Element zu verknüpfen. Für die Weitergabe an Druckereien eignet sich meist ein PDF besser, weil es Farbräume und Schriften zuverlässiger transportiert. Im Logo-Übergabepaket ergänzt SVG die PDF-Dateien und deckt den Einsatz im Web ab.