Scalable Vector Graphics (SVG)
Transcript of Scalable Vector Graphics (SVG)
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.