Odkrywam grafikę wektorową

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?

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!


Komentarze

5 odpowiedzi na „Odkrywam grafikę wektorową”

  1. Awatar Alucard

    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.

  2. 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.

  3. […] blog.keepmind.eu 13:04 blog.keepmind.eu/…krywam-grafike-wektorowa…. Pokaż reakcje /* */ inne strony z tej witryny + obserwuj co […]

  4. 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

  5. No to genialną matrycę masz, bo ja nie dostrzegam większej różnicy :).

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *