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
Top Related