Scaleble Vector Graphics (SVG) Joomla User Group 28 07-14

10
Joomla Gebruikersgroep Amsterdam 28/07/2014

Transcript of Scaleble Vector Graphics (SVG) Joomla User Group 28 07-14

Page 1: Scaleble Vector Graphics (SVG) Joomla User Group 28 07-14

Joomla Gebruikersgroep

Amsterdam28/07/2014

Page 2: Scaleble Vector Graphics (SVG) Joomla User Group 28 07-14

Scaleble Vector Graphics

Page 3: Scaleble Vector Graphics (SVG) Joomla User Group 28 07-14

Sinds 1999 een aanbeveling van het W3C Extensible Markup Language (XML) bestands indeling

interactie met via DOM aan te sturen dmv CSS

Page 4: Scaleble Vector Graphics (SVG) Joomla User Group 28 07-14

SVG is een bestandsformaat bestaande uit vectoren. png, jpg, gif zijn pixel georiënteerd

!Het gebruiken van SVG afbeeldingen is net zo eenvoudig als het gebruikt van de bekende pixel georiënteerde bestandsformaten,

maar… er is meer veel meer…

Page 5: Scaleble Vector Graphics (SVG) Joomla User Group 28 07-14

Al sinds 1999Maar juist nu interessant

Page 6: Scaleble Vector Graphics (SVG) Joomla User Group 28 07-14

Waarom gebruiken

Kleine bestanden en goed te comprimeren !

Schaalt naar elk gewenst formaat zonder kwaliteit te verliezen.

Scherpe weergave op retina / hoge resolutie schermen !

Mogelijkheid tot interactie

Page 7: Scaleble Vector Graphics (SVG) Joomla User Group 28 07-14

Hoe maak je een SVG

InkscapeAdobe

IllustratorCorelDRAW

Page 8: Scaleble Vector Graphics (SVG) Joomla User Group 28 07-14

Hoe gebruik je een SVGAls <img> <img src="data:image/svg+xml;base64,[data]>!

!Als CSS .logo {! background: url(data:image/svg+xml;base64,[data]);!}!

!<object> <object type="image/svg+xml" data="data:image/svg+xml;base64,[data]>! fallback!</object>!

!

Page 9: Scaleble Vector Graphics (SVG) Joomla User Group 28 07-14

Demo met Illustrator en codepen

Page 10: Scaleble Vector Graphics (SVG) Joomla User Group 28 07-14

Links…naslag http://css-tricks.com/using-svg/ http://jandbeyond.org/program/sessions/embrace-the-vector.html http://nl.wikipedia.org/wiki/Scalable_Vector_Graphics !SVG Backgrounds http://www.svgeneration.com/ !Maken: http://www.inkscape.org/nl/ http://www.adobe.com http://www.corel.com/ !voorbeelden http://designmodo.com/demo/svg-infographic/ http://svg-wow.org/audio/animated-lyrics.svg