Scalable Vector Graphics · Rastergraphics Opgebouwd uit een raster van beeldpunten (pixels) met...
Transcript of Scalable Vector Graphics · Rastergraphics Opgebouwd uit een raster van beeldpunten (pixels) met...
![Page 1: Scalable Vector Graphics · Rastergraphics Opgebouwd uit een raster van beeldpunten (pixels) met kleurwaarden Elk beeldpunt bestaat uit een combinatie van 3 waarden (rood, groen,](https://reader036.fdocument.pub/reader036/viewer/2022070212/6106549ee8b1bb0703642974/html5/thumbnails/1.jpg)
Scalable Vector Graphics● Presentatie: Tijmen Stam● Inhoud:
− Wat zijn Vector Graphics− Ondersteuning− Voor/Nadelen− Voorbeelden− Demonstratie
![Page 2: Scalable Vector Graphics · Rastergraphics Opgebouwd uit een raster van beeldpunten (pixels) met kleurwaarden Elk beeldpunt bestaat uit een combinatie van 3 waarden (rood, groen,](https://reader036.fdocument.pub/reader036/viewer/2022070212/6106549ee8b1bb0703642974/html5/thumbnails/2.jpg)
Rastergraphics● Opgebouwd uit een raster van beeldpunten
(pixels) met kleurwaarden● Elk beeldpunt bestaat uit een combinatie van 3
waarden (rood, groen, blauw), van 0-255● Vele formaten: BMP, JPEG, PNG, MPEG (video)● Ook wel “bitmap” genoemd
![Page 3: Scalable Vector Graphics · Rastergraphics Opgebouwd uit een raster van beeldpunten (pixels) met kleurwaarden Elk beeldpunt bestaat uit een combinatie van 3 waarden (rood, groen,](https://reader036.fdocument.pub/reader036/viewer/2022070212/6106549ee8b1bb0703642974/html5/thumbnails/3.jpg)
Vectorgraphics● Een leeg “canvas”, met objecten daarop● Objecten bestaan uit definitie van hoekpunten,
lijn- en vulkleur.● Minder formaten: Adobe Illustrator, AutoCAD,
SVG, Flash (Video)
![Page 4: Scalable Vector Graphics · Rastergraphics Opgebouwd uit een raster van beeldpunten (pixels) met kleurwaarden Elk beeldpunt bestaat uit een combinatie van 3 waarden (rood, groen,](https://reader036.fdocument.pub/reader036/viewer/2022070212/6106549ee8b1bb0703642974/html5/thumbnails/4.jpg)
SVG: Scalable Vector Graphics● Gedragen door W3C● Gebaseerd op XML● Makkelijk leesbaar voor mens en machine● Animaties, scripting, links mogelijk (niet met
Mediawiki)
![Page 5: Scalable Vector Graphics · Rastergraphics Opgebouwd uit een raster van beeldpunten (pixels) met kleurwaarden Elk beeldpunt bestaat uit een combinatie van 3 waarden (rood, groen,](https://reader036.fdocument.pub/reader036/viewer/2022070212/6106549ee8b1bb0703642974/html5/thumbnails/5.jpg)
Definitie vierkant
Rastergraphics: Vectorgraphics:
X=1, Y=1, hoogte=8, breedte=8, kleur=rood
![Page 6: Scalable Vector Graphics · Rastergraphics Opgebouwd uit een raster van beeldpunten (pixels) met kleurwaarden Elk beeldpunt bestaat uit een combinatie van 3 waarden (rood, groen,](https://reader036.fdocument.pub/reader036/viewer/2022070212/6106549ee8b1bb0703642974/html5/thumbnails/6.jpg)
Definitie vierkantRastergraphics:
(151 bytes)
‰PNGIHDR�2Ͻ sBIT | dˆ tEXtSoftware www.inkscape.org›
î< )IDAT •cüÿÿ? 1€…�����‘
¿êÿÿ ™ˆ2Ž��ad*d$6À JÁ ¸Î<
IEND®B`‚
Vectorgraphics:
(92 bytes)
<svg width="10" height="10"><rect width="8" height="8“x="1" y="1" style="fill:red" />
</svg>
![Page 7: Scalable Vector Graphics · Rastergraphics Opgebouwd uit een raster van beeldpunten (pixels) met kleurwaarden Elk beeldpunt bestaat uit een combinatie van 3 waarden (rood, groen,](https://reader036.fdocument.pub/reader036/viewer/2022070212/6106549ee8b1bb0703642974/html5/thumbnails/7.jpg)
Schaalbaar● Links vector, rects raster
![Page 8: Scalable Vector Graphics · Rastergraphics Opgebouwd uit een raster van beeldpunten (pixels) met kleurwaarden Elk beeldpunt bestaat uit een combinatie van 3 waarden (rood, groen,](https://reader036.fdocument.pub/reader036/viewer/2022070212/6106549ee8b1bb0703642974/html5/thumbnails/8.jpg)
Ondersteuning (creatie)● Verscheidene programma's: Adobe Illustrator,
CorelDraw, Inkscape● Inkscape: Opensource, gericht op SVG● inkscape.org
![Page 9: Scalable Vector Graphics · Rastergraphics Opgebouwd uit een raster van beeldpunten (pixels) met kleurwaarden Elk beeldpunt bestaat uit een combinatie van 3 waarden (rood, groen,](https://reader036.fdocument.pub/reader036/viewer/2022070212/6106549ee8b1bb0703642974/html5/thumbnails/9.jpg)
Inkscape● Meestgebruikte SVG-functies● Alleen statische afbeeldingen, geen
scripts/animaties● Goed toegankelijk voor beginners
− Intuitieve interface− Duidelijke tutorials
● Krachtig genoeg voor gevorderden− Uitbreidbaar met “effects”
● Interpoleren● Paint by Numbers
![Page 10: Scalable Vector Graphics · Rastergraphics Opgebouwd uit een raster van beeldpunten (pixels) met kleurwaarden Elk beeldpunt bestaat uit een combinatie van 3 waarden (rood, groen,](https://reader036.fdocument.pub/reader036/viewer/2022070212/6106549ee8b1bb0703642974/html5/thumbnails/10.jpg)
Ondersteuning (presentatie)● Sommige browsers direct of via plug-in● Via conversie naar PNG (via SVG-programma)● Mediawiki: Automatische conversie naar PNG
![Page 11: Scalable Vector Graphics · Rastergraphics Opgebouwd uit een raster van beeldpunten (pixels) met kleurwaarden Elk beeldpunt bestaat uit een combinatie van 3 waarden (rood, groen,](https://reader036.fdocument.pub/reader036/viewer/2022070212/6106549ee8b1bb0703642974/html5/thumbnails/11.jpg)
Raster vs Vector
Vector RasterGrootte Klein (meestal) Groot (meestal)Leesbaar Ja NeeOndersteuning Slecht (wiki: Goed) GoedSchaalbaar Ja BeperktDetail mogelijk Minder Goed
![Page 12: Scalable Vector Graphics · Rastergraphics Opgebouwd uit een raster van beeldpunten (pixels) met kleurwaarden Elk beeldpunt bestaat uit een combinatie van 3 waarden (rood, groen,](https://reader036.fdocument.pub/reader036/viewer/2022070212/6106549ee8b1bb0703642974/html5/thumbnails/12.jpg)
Voordelen● Schaalbaarheid
− Geen kwaliteitsverlies bij extreme schaling− Geen hoge resoluties nodig
● Bestandsgrootte− Bij meeste toepassingen kleiner dan resulterende
PNG (of JPG)● Aanpasbaarheid
− Bij wijzigen / vertalen geen kwaliteitsverlies− XML bestand, desnoods handmatig te bewerken
![Page 13: Scalable Vector Graphics · Rastergraphics Opgebouwd uit een raster van beeldpunten (pixels) met kleurwaarden Elk beeldpunt bestaat uit een combinatie van 3 waarden (rood, groen,](https://reader036.fdocument.pub/reader036/viewer/2022070212/6106549ee8b1bb0703642974/html5/thumbnails/13.jpg)
Nadelen (1)● Vlaggen
− Kwaliteit gedetailleerde vlaggen soms minder dan “PNG”, maar SVG toch doorgedrukt
− PNG-versie is exact na te maken, maar enkel met zeer grote artistieke inspanning
− SVG wordt soms “uit principe” gebruikt waar PNG een beter resultaat levert.
![Page 14: Scalable Vector Graphics · Rastergraphics Opgebouwd uit een raster van beeldpunten (pixels) met kleurwaarden Elk beeldpunt bestaat uit een combinatie van 3 waarden (rood, groen,](https://reader036.fdocument.pub/reader036/viewer/2022070212/6106549ee8b1bb0703642974/html5/thumbnails/14.jpg)
Vlag Equador:PNG
![Page 15: Scalable Vector Graphics · Rastergraphics Opgebouwd uit een raster van beeldpunten (pixels) met kleurwaarden Elk beeldpunt bestaat uit een combinatie van 3 waarden (rood, groen,](https://reader036.fdocument.pub/reader036/viewer/2022070212/6106549ee8b1bb0703642974/html5/thumbnails/15.jpg)
Vlag Equador:SVG
![Page 16: Scalable Vector Graphics · Rastergraphics Opgebouwd uit een raster van beeldpunten (pixels) met kleurwaarden Elk beeldpunt bestaat uit een combinatie van 3 waarden (rood, groen,](https://reader036.fdocument.pub/reader036/viewer/2022070212/6106549ee8b1bb0703642974/html5/thumbnails/16.jpg)
Nadelen (1)● Vlaggen
− Kwaliteit gedetailleerde vlaggen soms minder dan “PNG”, maar SVG toch doorgedrukt
− PNG-versie is exact na te maken, maar enkel met zeer grote artistieke inspanning
− SVG wordt soms “uit principe” gebruikt waar PNG een beter resultaat levert.
![Page 17: Scalable Vector Graphics · Rastergraphics Opgebouwd uit een raster van beeldpunten (pixels) met kleurwaarden Elk beeldpunt bestaat uit een combinatie van 3 waarden (rood, groen,](https://reader036.fdocument.pub/reader036/viewer/2022070212/6106549ee8b1bb0703642974/html5/thumbnails/17.jpg)
Nadelen (2)● Bij kleine schaling geeft handmatig getunede
PNG beter beeld● Vlag VS:
− 7 banen in werkelijkheid− 5 vage banen getoond− In png: gefinetuned naar 5 scherpe banen: fout
maar herkenbaar
![Page 18: Scalable Vector Graphics · Rastergraphics Opgebouwd uit een raster van beeldpunten (pixels) met kleurwaarden Elk beeldpunt bestaat uit een combinatie van 3 waarden (rood, groen,](https://reader036.fdocument.pub/reader036/viewer/2022070212/6106549ee8b1bb0703642974/html5/thumbnails/18.jpg)
Nadelen (3)● Lijnen schalen niet mee (ook niet bij JPG of
PNG)
![Page 19: Scalable Vector Graphics · Rastergraphics Opgebouwd uit een raster van beeldpunten (pixels) met kleurwaarden Elk beeldpunt bestaat uit een combinatie van 3 waarden (rood, groen,](https://reader036.fdocument.pub/reader036/viewer/2022070212/6106549ee8b1bb0703642974/html5/thumbnails/19.jpg)
Toepasbaarheid SVG
Niet:● Foto's (JPG)● Screenshots (PNG)
Wel:● Diagrammen● Lijntekeningen● Grafieken● Kaarten● ...
![Page 20: Scalable Vector Graphics · Rastergraphics Opgebouwd uit een raster van beeldpunten (pixels) met kleurwaarden Elk beeldpunt bestaat uit een combinatie van 3 waarden (rood, groen,](https://reader036.fdocument.pub/reader036/viewer/2022070212/6106549ee8b1bb0703642974/html5/thumbnails/20.jpg)
Toepasbaarheid SVG
Niet: Wel:
![Page 21: Scalable Vector Graphics · Rastergraphics Opgebouwd uit een raster van beeldpunten (pixels) met kleurwaarden Elk beeldpunt bestaat uit een combinatie van 3 waarden (rood, groen,](https://reader036.fdocument.pub/reader036/viewer/2022070212/6106549ee8b1bb0703642974/html5/thumbnails/21.jpg)
Enkele voorbeelden● Wielrentruien● Epauletten
Veel werk voor de eerste, volgende aanpassingen zeer weinig werk
![Page 22: Scalable Vector Graphics · Rastergraphics Opgebouwd uit een raster van beeldpunten (pixels) met kleurwaarden Elk beeldpunt bestaat uit een combinatie van 3 waarden (rood, groen,](https://reader036.fdocument.pub/reader036/viewer/2022070212/6106549ee8b1bb0703642974/html5/thumbnails/22.jpg)
Toekomst SVG & MediaWiki● Geparameteriseerde afbeeldingen
− Bij provinciekaartjes: een afbeelding, via parameter te kiezen uit alle provincies
Limburg
Westvlaanderen
Nu: 5 afbeeldingen
Straks: kies gewenste vorm
Voordeel: maar 1 bestand aanpassen
![Page 23: Scalable Vector Graphics · Rastergraphics Opgebouwd uit een raster van beeldpunten (pixels) met kleurwaarden Elk beeldpunt bestaat uit een combinatie van 3 waarden (rood, groen,](https://reader036.fdocument.pub/reader036/viewer/2022070212/6106549ee8b1bb0703642974/html5/thumbnails/23.jpg)
Toekomst SVG & MediaWiki● Internationalisatie
− In een SVG-bestand meerdere talen− Automatisch juiste taal afhankelijk van welke wiki
Commons
en: nl:
![Page 24: Scalable Vector Graphics · Rastergraphics Opgebouwd uit een raster van beeldpunten (pixels) met kleurwaarden Elk beeldpunt bestaat uit een combinatie van 3 waarden (rood, groen,](https://reader036.fdocument.pub/reader036/viewer/2022070212/6106549ee8b1bb0703642974/html5/thumbnails/24.jpg)
Demonstratie● Interface Inkscape● Conversie: Kaart van Uruguay: PNG -> SVG● Demonstratie Basiskaart● Werking van XML-editor
![Page 25: Scalable Vector Graphics · Rastergraphics Opgebouwd uit een raster van beeldpunten (pixels) met kleurwaarden Elk beeldpunt bestaat uit een combinatie van 3 waarden (rood, groen,](https://reader036.fdocument.pub/reader036/viewer/2022070212/6106549ee8b1bb0703642974/html5/thumbnails/25.jpg)
Scalable Vector Graphics
Algemene vragen???
(Specifieke vragen tijdens pauze)
Contact: User:IIVQ op wikipedia-nl