SVG

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

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

Referenz

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

    Erstellen Sie eigene SVG-Dokumente, die Sie als Bild oder Multimediaobjekt einbinden können.

     
  • Text in SVG
    • Füllungen und Randlinien
    • Filter-Effekte
    • Schrift von Zauberhand
    • animierte Textpfade
     
  • SVG Elemente färben
    • 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 (in Arbeit)
     

Für Fortgeschrittene

  • Pfade
    • elliptische Bögen
    • Bézier-Kurven
    • Shape-Morphing
     
  • 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
    • 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
     
  • Masken und Beschneidungen
    • clip-path
    • mask
    • clipPath
    • Mask in SVG
     
  • 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

     
  • Infografiken
    Sonnenfinsternis-schema.svg
     
  • Gruppierungen
    (g, symbol und use)

    SVG-Elemente gemeinsam kontrollieren

     
  • pointer-events

    Elemente gezielt von Maus-Interaktionen ausschließen

     


Weblinks

  • 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 von „http://wiki.selfhtml.org/index.php?title=SVG&oldid=94978“