SVG

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
SVG Logo.svg
Fotos werden als Rastergrafiken gespeichert
- für alles andere wie Logos, Icons, Diagramme, usw. gibt es SVG!

Das auf XML basierende SVG (Scalable Vector Graphics) ist ein vom W3C empfohlenes Grafikformat zur Beschreibung zweidimensionaler Vektorgrafiken.

  • SVG-Elemente

    Referenz für den schnellen Überblick

     
  • SVG-Attribute

    Referenz für den schnellen Überblick

     
  • Kategorie:SVG

    Alle Seiten in alphabetischer Übersicht
     

Tutorials

Für Anfänger

  • Einstieg in SVG
    • Warum SVG nutzen?
    • SVG mit CSS stylen
    • SVG mit CSS animieren
    • barrierefreie SVGs

    Step by step eigene SVGs erstellen

     
  • Standalone-SVGs
    • Namensraum angeben
    • Viewport und viewBox

    Erstelle eigene SVG-Dokumente, die du als Bild oder Multimediaobjekt einbinden kannst.

     
  • Text in SVG
    • Füllungen und Randlinien
    • Filter-Effekte
    • Schrift von Zauberhand
    • animierte Textpfade
     
  • Zeichnen in SVG
    • Füllungen
    • Kontur & Randlinien
    • Markierungen
    • Verläufe
     
  • Responsive Imagemaps

    Klickflächen innerhalb eines Bilds?

    Das wird jetzt mit SVG gemacht!
     
  • Icons mit SVG-Sprites
    • SVGs optimieren
    • currentColor
    • animierte Icons
    • mehrfarbige SVG-Icons
     

Für Fortgeschrittene

  • Pfade in SVG

    Tutorial mit vielen Beispielen

    • Bézier-Kurven
    • elliptische Bögen
     
  • Geometrie mit MathML, SVG und JavaScript
    • foreignObject
      • HTML in SVG
      • MathML in SVG
    • Drag & Drop in SVG
     
  • Daten­visualisierung
    • Balken- und Kreisdiagramme
    • Liniendiagramme
    • interaktive Landkarten
    • Funktionsplotter
     
  • Muster in SVG
    • geometrische Muster
    • unregelmäßige Muster
    • Texturen für natürliche Oberflächen
     
  • Filter in SVG
    • Licht und Schatten
    • Bildmanipulation
     
  • SMIL
    • animate
    • animateMotion
    • animateTransform

    Shape-Morphing und mehr!

     
  • SVG und JavaScript
    • DOM-Scripting
    • Animation
     
  • Beschneidungen mit clip-path

    sichtbare Bereiche von Elementen flexibel steuern

     
  • Transform
    mit CSS
    drehen,
    skalieren, schräg
    stellen und
    verschieben
     
  • Einstieg in Leaflet

    SELF-Blog-Artikel von Jürgen Berkemeier,
    Leaflet ist eine API, um Karten in Webseiten einzubinden

     
  • SVG – Strukturieren und Recyceln mit
    <symbol> und <use>
    „Muss ich den Baum jetzt 100𝑥 malen?“
     
  • Gruppierungen
    (g, symbol und use)

    SVG-Elemente gemeinsam kontrollieren

     
  • pointer-events

    Elemente gezielt von Maus-Interaktionen ausschließen

     

Warum SVG nutzen?

SVG (Scalable Vector Graphics) eignet sich besonders für die Darstellung vektorbasierter Grafiken. Anders als Rastergrafiken werden SVG-Grafiken nicht aus einzelnen Pixeln aufgebaut, sondern aus geometrischen Formen und Pfaden. Dadurch lassen sie sich ohne Qualitätsverlust beliebig vergrößern oder verkleinern.

SVG wird heute von allen gängigen Browsern nativ unterstützt und kann direkt in HTML eingebettet werden.

SVG kann …

  • beliebig skaliert werden, ist also responsiv und immer gestochen scharf!
  • Text als Text darstellen, sodass er grundsätzlich auch für Suchmaschinen und assistive Technologien zugänglich bleibt.
    Durch die Verwendung von Elementen wie title und desc können Metadaten hinterlegt werden, die Screenreadern semantische Hinweise zu den Grafiken geben und so die Zugänglichkeit erhöhen.
  • mit CSS zentral formatiert und animiert werden,

mit JavaScript verändert und interaktiv gesteuert werden,

Typische Anwendungsfälle sind:

SVG 2

Nach der Verabschiedung von SVG 1.1 im Jahre 2003 kam es unter anderem durch die mangelhafte Browser-Unterstützung zu einem Stillstand in der Entwicklung. Seit September 2016 hat SVG 2 den Status einer Candidate Recommendation, wurde bis jetzt aber nicht endgültig als Empfehlung (Recommendation) verabschiedet.[1]

Im Kernpunkt der neuen Spezifikation steht nicht die Erweiterung durch neue Features, sondern die bessere Integration von SVG mit HTML, CSS und DOM und die Entfernung nicht unterstützter Eigenschaften. Eine Übersicht des bisher Erreichten findet man bei GitHub, wo Nikos Andronikos die Entwicklung dokumentiert: SVG 2 user agent support[2]

Zu den wichtigen Entwicklungen im Zusammenhang mit SVG 2 gehören:

  • Präsentationsattribute (in SVG 2 auch Layout-Eigenschaften wie x, y, width etc.) können durch CSS gestylt werden.[3]
  • Hover-Effekte können dank tabindex="0" auch mit der Tastatur angetabbt werden.
  • Verweise können mit dem href-Attribut notiert werden.
  • SVG-Filter und SVG-Masken können per CSS auch auf HTML-Elemente angewandt werden.
  • Die SVG-eigene Animation SMIL bleibt erhalten, obwohl Chrome sie aufgeben wollte.[4]

SVG vs. Canvas

HTML5 Canvas erzeugt mit Hilfe von JavaScript 2D-Grafiken. Wenn ein Detail geändert wird, muss die gesamte Grafik neu gezeichnet werden. In SVG kann ein Element seine Form oder Größe ändern, ohne dass dies die anderen Objekte betrifft. Diese Änderung kann durch JavaScript, aber auch durch CSS-Animation oder :hover erreicht werden.

In Canvas ist die Größe der Leinwand festgelegt, während das SVG-Element durch die viewBox responsiv an vorhandene Viewport-Größen angepasst wird.

Andererseits wird die Anzeigefläche in Canvas sehr schnell gerendert, sodass es für schnelle, grafikintensive Spiele gut geeignet ist. Ein Canvas kann mit einer JavaScript-Anweisung in ein .jpg oder .png Bild gespeichert werden.

Allerdings ist Canvas ein Alptraum in Bezug auf die Zugänglichkeit, da die Inhalte eben nicht wie bei SVG Teil des DOM, sondern nur Teil einer Zeichnung sind. So müssen alternative Inhalte als Fallback dargestellt werden, die bei SVG schon im Markup vorhanden sind und von Screenreadern problemlos ausgelesen werden können.

Weblinks

  1. ↑ W3C: SVG - Roadmap
  2. ↑ SELF-Blog: SVG 2 - was lange währt ... vom 28. November 2016
  3. ↑ W3C: Presentation attributes
  4. ↑ Trotz einiger Gerüchte über ein Beibehalten von SMIL
    Yahoo.groups: Good news concerning SVG SMIL/element-based animation syntax vom 20.03.2015,
    da es einfacher als die Kombination von CSS-animation und JavaScript sei, ist Google offiziell bei der Abschaffung geblieben.
    Allerdings bleibt die Unterstützung jetzt wohl erhalten.


  • W3C: W3C SVG
  • W3C: W3C Planning Page
  • Mozilla Wiki: SVG:Language:Regrets (This is a place to collect a list of things about the SVG language that we might like to change if we could go back in time, or issues that we might be able to remedy in some way in a future version of the language.)

Deutsch:

Einführungen:

  • wikibooks.org SVG
    sehr gutes Buch mit vielen farbigen Beispielen
  • dev.microsoft.com SVG-Animation für Anfänger
    Obwohl der IE SMIL nicht unterstützt, wird hier sehr anschaulich erklärt

Beispiele:

  • datenverdrahten.de SVG – Learning by Coding
    viele Beispiele, besonders zu Datenvisualisierung (von Thomas Meinike)
  • Hoffmann.bplaced.net SVG- und PHP-Labor
    Skalierbare Vektorgrafik – Animation (von O.Hoffmann)

Englisch:

SVG 2



Blogs und Foren

Abgerufen am 11.08.2026
von "http://wiki.selfhtml.org/wiki/SVG"