SlideShare ist ein Scribd-Unternehmen logo
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
Offenes und kostenloses Dateiformat
Durch das W3C im Web empfohlenes Format
Alternative zu Flash
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.dtd">
<svgxmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
viewBox="006464">
<!--InhaltderDatei-->
</svg>
Inline SVG
<svgxmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="006464">
<!--InhaltdesInlineElements-->
</svg>
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">
<animateTransformattributeName="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 SVG
Vertikale Ausrichtung
Seitenverhältnis muss angegeben werden
SVG müssen in den DOM gelegt werden
Fallbacks für ältere Browser
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 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.
Also? Worauf wartet Ihr?
Nutzt SVG!
Vielen Dank

Weitere ähnliche Inhalte

Ähnlich wie Scalable Vector Graphics (SVG)

Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Gregor Biswanger
 
FMK2016 - Marcel Moré - The Power of SVG
FMK2016 - Marcel Moré - The Power of SVGFMK2016 - Marcel Moré - The Power of SVG
FMK2016 - Marcel Moré - The Power of SVG
Verein FM Konferenz
 
Kleiner Blick auf CSS3
Kleiner Blick auf CSS3Kleiner Blick auf CSS3
Kleiner Blick auf CSS3
Jens Grochtdreis
 
HTML5
HTML5HTML5
Layout Frameworks im professionellen Webdesign
Layout Frameworks im professionellen WebdesignLayout Frameworks im professionellen Webdesign
Layout Frameworks im professionellen Webdesigndjesse
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
Nicolai Schwarz
 
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Sven Wolfermann
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
kkramhoeft
 
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzNutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzEric Eggert
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
Peter Rozek
 
Frontendtechnologien Fuer Ria V1.0
Frontendtechnologien Fuer Ria V1.0Frontendtechnologien Fuer Ria V1.0
Frontendtechnologien Fuer Ria V1.0
Oliver Belikan
 
Icons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experienceIcons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experience
Markus Greve
 
OpenTuesday: Jede Sekunde zählt - Webbeschleuniger Varnish im Einsatz
OpenTuesday: Jede Sekunde zählt - Webbeschleuniger Varnish im EinsatzOpenTuesday: Jede Sekunde zählt - Webbeschleuniger Varnish im Einsatz
OpenTuesday: Jede Sekunde zählt - Webbeschleuniger Varnish im Einsatz
Digicomp Academy AG
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
Karionis
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
Sven Wolfermann
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Benjamin Schmid
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
Peter Hecker
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
Alexander Schmidt
 
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Christian Janz
 
Rich Internet Applications
Rich Internet ApplicationsRich Internet Applications
Rich Internet Applications
Oliver Belikan
 

Ähnlich wie Scalable Vector Graphics (SVG) (20)

Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
 
FMK2016 - Marcel Moré - The Power of SVG
FMK2016 - Marcel Moré - The Power of SVGFMK2016 - Marcel Moré - The Power of SVG
FMK2016 - Marcel Moré - The Power of SVG
 
Kleiner Blick auf CSS3
Kleiner Blick auf CSS3Kleiner Blick auf CSS3
Kleiner Blick auf CSS3
 
HTML5
HTML5HTML5
HTML5
 
Layout Frameworks im professionellen Webdesign
Layout Frameworks im professionellen WebdesignLayout Frameworks im professionellen Webdesign
Layout Frameworks im professionellen Webdesign
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
 
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
 
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzNutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
 
Frontendtechnologien Fuer Ria V1.0
Frontendtechnologien Fuer Ria V1.0Frontendtechnologien Fuer Ria V1.0
Frontendtechnologien Fuer Ria V1.0
 
Icons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experienceIcons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experience
 
OpenTuesday: Jede Sekunde zählt - Webbeschleuniger Varnish im Einsatz
OpenTuesday: Jede Sekunde zählt - Webbeschleuniger Varnish im EinsatzOpenTuesday: Jede Sekunde zählt - Webbeschleuniger Varnish im Einsatz
OpenTuesday: Jede Sekunde zählt - Webbeschleuniger Varnish im Einsatz
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
 
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
 
Rich Internet Applications
Rich Internet ApplicationsRich Internet Applications
Rich Internet Applications
 

Scalable Vector Graphics (SVG)