Internal presentation for Scalable Vector Graphics (SVG)

1. Niklas Köhler
Scalable Vector
Graphics

2. Inhaltsverzeichnis
Was sind SVG?
Grundaufbau
SVG erstellen
SVG in der Praxis
Vor- und Nachteile

3. Was sind SVG?
Dateiformat für zweidimensionale, vektorbasierte
Grafiken (Scalable Vector Graphics)
Basieren auf XML
Offenes und kostenloses Dateiformat
Durch das W3C im Web empfohlenes Format
Alternative zu Flash

4. SVG erstellen
&
bearbeiten

5. Per Text-Editor

6. Sketch

7. Adobe Illustrator

8. Per Online Editor

9. Grundaufbau
<?xmlversion="1.0"?>
<!DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svgxmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
viewBox="006464">
<!--InhaltderDatei-->
</svg>

10. Inline SVG
<svgxmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="006464">
<!--InhaltdesInlineElements-->
</svg>

11. Geometrische Formen

12. Linien

13. Rechtecke

14. Kreise

15. Ellipse

16. Linienzug

17. Polygon

18. SVG in der Praxis

19. Gruppen und Pfade ausblenden
Beispiel

20. SVG Minipulation mittels
Javascript
Beispiel

21. Simpel animierte SVG

22. AnimateTransform im Detail
<svgwidth="200"height="200">
<rectx="50"y="50"height="100"width="100"style="fill:#0092DD">
<animateTransformattributeName="transform"begin="0s"dur="10s"type="rotate"
</rect>
</svg>

23. Konturen animieren
Guten Tag

24. Eine SVG, mehrere Zustände
Beispiel

25. SVG Icons anstatt Iconfonts
Shit happens!

26. Probleme mit inline SVG
Vertikale Ausrichtung
Seitenverhältnis muss angegeben werden
SVG müssen in den DOM gelegt werden
Fallbacks für ältere Browser

27. Nachteile von SVG
Ältere Browser benötigen Fallback-Grafiken
Noch kein einheitlicher Workflow für Sprites

28. Vorteile von SVG
Wird von den gängigen Browsern unterstützt (91,64%
global)
Für alle Displaytypen geeignet
Geringer Speicherbedarf / Keine Qualiätsverluste
Keine Plugins benötigt
Sind per CSS3 animierbar
Sind per Javascript manipulierbar
Per CSS selektier- und stylebar
Verfügen über Filter wie Schlagschatten, Weichzeichner
etc.

29. Also? Worauf wartet Ihr?

30. Nutzt SVG!

31. Vielen Dank