Niklas Köhler

Scalable VectorGraphics

InhaltsverzeichnisWas sind SVG?GrundaufbauSVG erstellenSVG in der PraxisVor- und Nachteile

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

SVG erstellen&

bearbeiten

Per Text-Editor

Sketch

Adobe Illustrator

Per Online Editor

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>

Geometrische Formen

Linien

Rechtecke

Kreise

Ellipse

Linienzug

Polygon

SVG in der Praxis

Gruppen und Pfade ausblenden

Beispiel

SVG Minipulation mittelsJavascript

Beispiel

Simpel animierte SVG

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>

Konturen animieren

Guten Tag

Eine SVG, mehrere Zustände

Beispiel

SVG Icons anstatt Iconfonts

Shit happens!

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.

Also? Worauf wartet Ihr?

Nutzt SVG!

Vielen Dank