scalable vector graphics (svg)
TRANSCRIPT
Was sind SVG?Dateiformat für zweidimensionale, vektorbasierteGrafiken (Scalable Vector Graphics)Basieren auf XMLOffenes und kostenloses DateiformatDurch das W3C im Web empfohlenes FormatAlternative zu Flash
Grundaufbau <?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"> <!--Inhalt der Datei --> </svg>
Inline SVG <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64"> <!--Inhalt des Inline Elements --> </svg>
Gruppen und Pfade ausblenden
Beispiel
AnimateTransform im Detail
<svg width="200" height="200"> <rect x="50" y="50" height="100" width="100" style="fill: #0092DD"> <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" </rect></svg>
Probleme mit inline SVGVertikale AusrichtungSeitenverhältnis muss angegeben werdenSVG müssen in den DOM gelegt werdenFallbacks für ältere Browser
Nachteile von SVGÄltere Browser benötigen Fallback-GrafikenNoch kein einheitlicher Workflow für Sprites
Vorteile von SVGWird von den gängigen Browsern unterstützt (91,64%global)Für alle Displaytypen geeignetGeringer Speicherbedarf / Keine QualiätsverlusteKeine Plugins benötigtSind per CSS3 animierbarSind per Javascript manipulierbarPer CSS selektier- und stylebarVerfügen über Filter wie Schlagschatten, Weichzeichneretc.