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!