Zawsze pracowałem w {{Grafika_rastrowa|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 {{Grafika_wektorowa|wektorom}}, pomniejszam, powiększam, skaluję… a obraz jest ciągle taki sam. Co prawda przerabianie {{Pixmapa|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 {{Grafika_wektorowa|grafiką wektorową}}, a {{Grafika_rastrowa|grafiką rastrową}} zrobiłem mały {{emotikon}}. Grafikę wykonałem w programie {{Inkscape}} (darmowy program na licencji {{GNU GPL}} do tworzenia {{Grafika_wektorowa|grafiki wektorowej}}). Co sprawia, że {{Inkscape}} jest bardziej godny uwagi od pozostałych? Jest darmowy i jest na {{Linux|Linuksa}}, {{Windows|Windowsa}} i {{MacOS|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 {{Grafika_wektorowa|grafikę wektorową}}, a {{PNG}} {{Grafika_rastrowa|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 {{Grafika_rastrowa|rastrem}}, a {{Grafika_wektorowa|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?

Dwukrotne powiększenie
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.

Pięciokrotne powiększenie
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!
Najzwyklejsza w świecie transformata La place’a i kilka prostych macierzy…
Czym tu się podniecać ?
Coś czuję że Twój zawód, bądź kierunek studiów daleko rozmijają się z sztuką informatyczną…
Na infie miałbyś to na 1 roku.
A jeżeli chodzi o magię cyferek i ciągów kodu, uzyskasz je nawet rysując prostą kreskę w „paincie” i zaglądając do jądra asemblera.
Owszem poniekąd masz słuszność. Mój obecny zawód rozmija się z informatyką. Nie studiuję, a jestem na 2-gim semestrze szkoły policealnej na informatyce i dopiero zaczynam z wektorami.
Pingback: blog.keepmind.eu: [link] | flaker.pl
Ja tam na 100% widzę różnicę! :D Przynajmniej moja matryca ją pokazuję: *.svg jest lekko ciemniejszy niż *.png.
No i przedmówca mówi, że ciąg kodu znajdzie się w assemblerze. Tylko tam wszystko jest tym kodem. :P
No to genialną matrycę masz, bo ja nie dostrzegam większej różnicy :).