scaleble vector graphics (svg) joomla user group 28 07-14
TRANSCRIPT
![Page 1: Scaleble Vector Graphics (SVG) Joomla User Group 28 07-14](https://reader033.vdocuments.mx/reader033/viewer/2022052606/58ef91851a28ab94318b458f/html5/thumbnails/1.jpg)
Joomla Gebruikersgroep
Amsterdam28/07/2014
![Page 2: Scaleble Vector Graphics (SVG) Joomla User Group 28 07-14](https://reader033.vdocuments.mx/reader033/viewer/2022052606/58ef91851a28ab94318b458f/html5/thumbnails/2.jpg)
Scaleble Vector Graphics
![Page 3: Scaleble Vector Graphics (SVG) Joomla User Group 28 07-14](https://reader033.vdocuments.mx/reader033/viewer/2022052606/58ef91851a28ab94318b458f/html5/thumbnails/3.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052606/58ef91851a28ab94318b458f/html5/thumbnails/4.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052606/58ef91851a28ab94318b458f/html5/thumbnails/5.jpg)
Al sinds 1999Maar juist nu interessant
![Page 6: Scaleble Vector Graphics (SVG) Joomla User Group 28 07-14](https://reader033.vdocuments.mx/reader033/viewer/2022052606/58ef91851a28ab94318b458f/html5/thumbnails/6.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052606/58ef91851a28ab94318b458f/html5/thumbnails/7.jpg)
Hoe maak je een SVG
InkscapeAdobe
IllustratorCorelDRAW
![Page 8: Scaleble Vector Graphics (SVG) Joomla User Group 28 07-14](https://reader033.vdocuments.mx/reader033/viewer/2022052606/58ef91851a28ab94318b458f/html5/thumbnails/8.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052606/58ef91851a28ab94318b458f/html5/thumbnails/9.jpg)
Demo met Illustrator en codepen
![Page 10: Scaleble Vector Graphics (SVG) Joomla User Group 28 07-14](https://reader033.vdocuments.mx/reader033/viewer/2022052606/58ef91851a28ab94318b458f/html5/thumbnails/10.jpg)
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