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