Zawsze pracowałem w grafice rastrowej i uważałem ją za pewnego rodzaju szczyt. Zawsze jednak naradzał się problem jeśli chciało się powiększyć mały obrazek, bo zamiast powiększenia otrzymywaliśmy przepiękny efekt „pikselizacji” (fachowo: widzimy rastry, a każdy raster to 3 bajty). Jaki świat staje się piękniejszy dzięki wektorom, pomniejszam, powiększam, skaluję… a obraz jest ciągle taki sam. Co prawda przerabianie bitmapy na wektor nie jest idealnym rozwiązaniem, ale przy tworzeniu dużych grafik z małych zdjęć nie widzę lepszego rozwiązania. Potem pozostają nam jedynie (aż?) zmiany kosmetyczne typu poprawienie kolorów, ostrości etc.
By pokazać na przykładzie różnice między grafiką wektorową, a grafiką rastrową zrobiłem mały emotikon. Grafikę wykonałem w programie Inkscape (darmowy program na licencji GNU GPL do tworzenia grafiki wektorowej). Co sprawia, że Inkscape jest bardziej godny uwagi od pozostałych? Jest darmowy i jest na Linuksa, Windowsa i Maka! Nie ukrywam iż sama nauka i różnice pomiędzy „tworzeniem” grafik w rastrze i wektorze do tej pory sprawia mi nie lada problem. Przede wszystkim potrzeba czasu, by wszystko do siebie dopasować. W rastrze, po prostu można przyciąć, tutaj… tworzenie ścieżek, dopasowywanie, ale za to efekt przy małych grafikach jest identyczny, jak w przypadku tych olbrzymów z bilboardów reklamowych.
Byłem, jestem, będę – taki sam
← tak oto wygląda stworzony przeze mnie na szybko (he, około 30-40 minut to robiłem męcząc się ze ścieżkami), z racji na małe problemy z akceptacją co niektórych rozszerzeń w WordPress’ie byłem zmuszony zapisać grafikę w PNG, jednakże nie bójta się, dalej wszystko pokażę, jak należy. Podpis SVG oznacza grafikę wektorową, a PNG grafikę rastrową.
Ok, skupmy się na myśli przewodniej wpisu. Przy oryginalnych rozmiarach, zachowując przeźroczystość tła, różnicy nie widać między rastrem, a wektorem – serio, na tym etapie nie dostrzega się jakiejś różnicy znaczącej, a przynajmniej ja jej nie dostrzegam w ogóle. Oczywiście można spekulować nad jakością zapisanego pliku, jak i samym rozszerzeniu, ja jednak starałem się tutaj zachować jak najlepsze odwzorcowanie z oryginałem zapisanym w SVG.
Nadmieniłem już, że w oryginalnym powiększeniu (100%) nie jesteśmy praktycznie w stanie dostrzec jakiejkolwiek różnicy miedzy grafikami. Co stanie się jednak, jeśli powiększymy grafiki, powiedzmy… dwukrotnie?
I jak? Dostrzegacie różnicę? I kto powiedział, że matematyka jest głupia? Obliczenia matematyczne w tym przypadku są genialne! Ostatnie powiększenie, które chcę Wam pokazać, to 500%, na tym zakończę rozwód.
Wielkie mi halo
Niektórym może się wydawać, że to wcale nie jest przydatne, ale mylą się. Jak już wspomniałem wcześniej – robimy małą grafikę i powiększamy ją, powiększamy, powiększamy… i tak w kółko nie tracąc praktycznie na jakości grafiki. Zawdzięczamy to obliczeniom matematycznym, lecz wszystko ma swoje granice. Grafiki zapisane w (przykładowo) SVG zajmują o wiele więcej miejsca niż te same grafiki w PNG. Jednakże coś kosztem czegoś. Niestety.
Dla ciekawskich, którzy chcieliby sprawdzić przykład na własnej skórze, zachęcam do pobrania programu Inkscape i popróbowaniu samemu. Jeśli zapiszecie już swoją grafikę (nawet zwykłą prostą) to otwórzcie sobie potem ten plik w notatniku, zobaczycie „kod niczym stronę www„. Dla przykładu zrobiłem gwiazdkę o wymiarach 16x16px, a oto co zobaczyłem w notatniku:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="16px"
height="16px"
id="svg4648"
version="1.1"
inkscape:version="0.47 r22583"
sodipodi:docname="Nowy dokument 10">
<defs
id="defs4650">
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 8 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="16 : 8 : 1"
inkscape:persp3d-origin="8 : 5.3333333 : 1"
id="perspective4656" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="20.767084"
inkscape:cx="11.41629"
inkscape:cy="7.8922923"
inkscape:current-layer="layer1"
showgrid="true"
inkscape:grid-bbox="true"
inkscape:document-units="px"
inkscape:window-width="1366"
inkscape:window-height="706"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata4653">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1"
inkscape:label="Layer 1"
inkscape:groupmode="layer">
<path
sodipodi:type="star"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path4658"
sodipodi:sides="10"
sodipodi:cx="1.4445937"
sodipodi:cy="2.3245125"
sodipodi:r1="9.0512505"
sodipodi:r2="4.5256252"
sodipodi:arg1="0.35877067"
sodipodi:arg2="0.67292994"
inkscape:flatsided="false"
inkscape:rounded="0"
inkscape:randomized="0"
d="M 9.9195436,5.5026187 4.9836274,5.1452436 6.4329282,9.877105 2.649748,6.6867237 1.0409386,11.366758 -0.14445946,6.5619874 -4.1968685,9.40258 -2.3317026,4.8186797 -7.2798288,4.7348211 -3.0765289,2.1226849 -7.0303562,-0.85359373 -2.0944401,-0.49621862 -3.5437409,-5.22808 0.23943937,-2.0376988 1.8482487,-6.7177327 3.0336468,-1.9129625 7.0860558,-4.753555 5.2208899,-0.16965477 10.169016,-0.08579615 5.9657162,2.52634 9.9195436,5.5026187 z"
transform="matrix(0.91696614,0,0,0.88473602,6.6753565,5.9434201)" />
</g>
</svg>
Piękne, czyż nie?! :) Jeśli nie wierzycie, że to jest gwiazdka, skopiujcie powyższy kod do notatnika i zapiszcie pod nazwą: gwiazdka.svg.
Enjoy!
Dodaj komentarz