Scaleble Vector Graphics (SVG) Joomla User Group 28 07-14
-
Upload
dennis-buis -
Category
Design
-
view
417 -
download
0
Transcript of Scaleble Vector Graphics (SVG) Joomla User Group 28 07-14
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