Niklas Köhler
Scalable Vector
Graphics
Inhaltsverzeichnis
Was sind SVG?
Grundaufbau
SVG erstellen
SVG in der Praxis
Vor- und Nachteile
Was sind SVG?
Dateiformat für zweidimensionale, vektorbasierte
Grafiken (Scalable Vector Graphics)
Basieren auf XML
Offene...
SVG erstellen
&
bearbeiten
Per Text-Editor
Sketch
Adobe Illustrator
Per Online Editor
Grundaufbau
<?xmlversion="1.0"?>
<!DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.d...
Inline SVG
<svgxmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="006464">
<!--InhaltdesInlineElements--...
Geometrische Formen
Linien
Rechtecke
Kreise
Ellipse
Linienzug
Polygon
SVG in der Praxis
Gruppen und Pfade ausblenden
Beispiel
SVG Minipulation mittels
Javascript
Beispiel
Simpel animierte SVG
AnimateTransform im Detail
<svgwidth="200"height="200">
<rectx="50"y="50"height="100"width="100"style="fill:#0092DD">
<ani...
Konturen animieren
Guten Tag
Eine SVG, mehrere Zustände
Beispiel
SVG Icons anstatt Iconfonts
Shit happens!
Probleme mit inline SVG
Vertikale Ausrichtung
Seitenverhältnis muss angegeben werden
SVG müssen in den DOM gelegt werden
F...
Nachteile von SVG
Ältere Browser benötigen Fallback-Grafiken
Noch kein einheitlicher Workflow für Sprites
Vorteile von SVG
Wird von den gängigen Browsern unterstützt (91,64%
global)
Für alle Displaytypen geeignet
Geringer Speich...
Also? Worauf wartet Ihr?
Nutzt SVG!
Vielen Dank
Nächste SlideShare
Wird geladen in …5
×

Scalable Vector Graphics (SVG)

418 Aufrufe

Veröffentlicht am

Internal presentation for Scalable Vector Graphics (SVG)

Veröffentlicht in: Bildung
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
418
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
38
Aktionen
Geteilt
0
Downloads
1
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Scalable Vector Graphics (SVG)

  1. 1. Niklas Köhler Scalable Vector Graphics
  2. 2. Inhaltsverzeichnis Was sind SVG? Grundaufbau SVG erstellen SVG in der Praxis Vor- und Nachteile
  3. 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. 4. SVG erstellen & bearbeiten
  5. 5. Per Text-Editor
  6. 6. Sketch
  7. 7. Adobe Illustrator
  8. 8. Per Online Editor
  9. 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. 10. Inline SVG <svgxmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="006464"> <!--InhaltdesInlineElements--> </svg>
  11. 11. Geometrische Formen
  12. 12. Linien
  13. 13. Rechtecke
  14. 14. Kreise
  15. 15. Ellipse
  16. 16. Linienzug
  17. 17. Polygon
  18. 18. SVG in der Praxis
  19. 19. Gruppen und Pfade ausblenden Beispiel
  20. 20. SVG Minipulation mittels Javascript Beispiel
  21. 21. Simpel animierte SVG
  22. 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. 23. Konturen animieren Guten Tag
  24. 24. Eine SVG, mehrere Zustände Beispiel
  25. 25. SVG Icons anstatt Iconfonts Shit happens!
  26. 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. 27. Nachteile von SVG Ältere Browser benötigen Fallback-Grafiken Noch kein einheitlicher Workflow für Sprites
  28. 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. 29. Also? Worauf wartet Ihr?
  30. 30. Nutzt SVG!
  31. 31. Vielen Dank

×