Joomla Gebruikersgroep

Amsterdam28/07/2014

Scaleble Vector Graphics

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

interactie met via DOM aan te sturen dmv CSS

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…

Al sinds 1999Maar juist nu interessant

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

Hoe maak je een SVG

InkscapeAdobe

IllustratorCorelDRAW

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>!

!

Demo met Illustrator en codepen

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