Was sind Scalable Vector Graphics (SVG)
Skalierbare Vektorgrafiken (Scalable Vector Graphics – kurz: SVG) werden mittlerweile von allen modernen Browsern unterstützt. Denoch sind Scalable Vector Graphics für einige Designer und Entwickler immer noch etwas Neues.
Vorteile beim Einsatz von skalierbaren Vektor-Grafiken:
Kleine Dateigrößen
Wenn sie richtig erstellt und ausgeliefert werden, sind Scalable Vector Graphics viel kleiner als Bitmaps. Das bedeutet: Seiten, die SVGs verwenden, laden schneller, benötigen eine niedrigere Bandbreite und sind schneller erreichbar.
Skalierbar, ohne Qualitätsverlust
Da SVGs auf mathematischen Beschreibungen basieren – können SVGs ohne Qualitätsverlust größer oder kleiner skalieren, was diese zu perfektem Modul für moderne, schnelle Webseiten macht.
Adressierbare Komponenten im DOM
Jedes einzelne Element in einer SVG-Grafik ist über das DOM adressierbar, so dass CSS und JavaScript Teile einer SVG-Grafik im Browser manipulieren können. Bei SVGs kann jede einzelne Form eine eigene ID oder Klasse haben, check that.
Die unterschiedliche Typen von Komponenten von SVGs:
- Elemente mit grafischer Präsentation, aufgebaut aus grafischen Primitiven
- Text in einer bestimmten Schriftart, die dem Render-Programm zur Verfügung stehen muss.
- Gruppierungselemente einerseits für darzustellende Elemente, aber auch als Vorrat zur Referenzierung durch andere Elemente
- Elemente zur Bereitstellung von Textalternativen und Metainformationen
- Elemente zur Bereitstellung von Maldiensten wie Farben, Farbverläufen und Mustern, auch von Markierungen, Masken oder Filtern. Besuche die seite de.englishcollege.com.
- Elemente zur Animation
- Elemente zur Aufnahme von anderen Sprachstrukturen (Stilvorlagen, Skripte, darstellbare Fragmente aus anderen Namensräumen)
- Elemente zur Einbettung externer Dokumente (Vektorgrafiken oder auch Rastergrafik), interner und externer Dokumentfragmente
- Elemente zur Definition von Schriftarten und alternativen Darstellungen von Glyphen
Leicht modifizierbar und anpassbar
Da SVGs, DOM-adressierbar sind, können einzelne Elemente der Grafik mit CSS modifiziert werden. SVGs können sogar in jedem Texteditor einfach modifizieren werden, ohne dass Sie dafür ein Grafik- oder ein Spezial-Tool benötigen.
Werkzeuge für die Bearbeitung
Für die professionelle Bearbeitung und den Export ist ein Vektor-basiertes Illustrationsprogramm wie Sketch, Adobe Illustrator oder Inkscape in der Regel eine gute Wahl.
Adaptive SVGs
Es können einzelne Komponenten von SVGs mit einer ID oder Klasse gekennzeichnet werden. Diese Teile können also mit Hilfe von Media Queries manipuliert werden.
Einige Beispiele (externe Links,bitte Browserfenster Grösse verändern):
Adaptive Branding Module: Coca-Cola Adaptive SVG Branding Module Prototype
Weitere Beispiele (externe Links)
https://tympanus.net/Development/IconHoverEffects/#set-1 https://tympanus.net/Development/AnimatedSVGIcons/ https://tympanus.net/Development/CardExpansion/ https://tympanus.net/Development/SVGDrawingAnimation/index.html
