SVG logórajzolás

Nem mondom, remek szombati foglalatosság volt Chek eredeti logója alapján elkészíteni a Heti Meteor új website logóját SVG-ben. Én is most már abba a csoportba tartozom, akik, ha tehetik, SVG-ből építik a logókat, ikonográfiát és bizony CSS-ból színeznek, baromi klassz és szemantikus is az egész. A PNG-s élet már a múlté! Retinában 2x-et exportálni? Ikonfontok? MUHAHA!

A HM logófabrikálást leginkább XP gyűjtésnek fogtam fel, de az biztos, hogy rengeteget tanultam közben. Eleve két hete még fogalmam sem volt arról, hogy mi az az “Artboard”, meg arról sem, hogy azon belül hogyan van a koordinátarendszer és hogyan kell optikai pixelekre igazítani a dolgokat. Mindez már a múlté, kikóseroltam magamnak azt a workflow-t és tudást, amivel már neki tudok lendülni akár valamilyen éles projektnek is.

A legnagyobb szopás az volt, hogy egy névjegykártya (!) PDF-ből elkészítsem a pixel gridre igazított logót. Ez annyira apró és pepecs munka, hogy tényleg csak azért csináltam végig, mert ebből website-ot akarok kiélesíteni egy meg nem nevezett időpontban. Az összes rohadt anchor pontot kézzel igazítottam a gridre, vagy rajzoltam be (gyorsabb), de hazudnék, ha azt állítanám, hogy gyorsan ment, mert kb. háromszor kezdtem újra az egészet, mire kitaláltam, hogy kell hozzányúlni az anyaghoz.

A pixel gridre igazításnak más előnyei is vannak: mivel a koordinátáknak nincs tört részük, sokkal kompaktabb lesz az SVG állomány is végül. Arról nem is beszélve, hogy a teljeset újraépítve az ember sok felesleges dolgot tud összekombinálni, illetve kivágni, a layer csoportokat elnevezve pedig tényleg egy szemantikus objektum lesz a vége.

A végeredmény rétegei nálam így néztek ki:

A következő ábrán látszik, hogy miket csináltam. Felül az eredeti, alul az újrarajzolt árnyék:

Az “O” betű szélein az árnyékot, az “R” jobb alsó szárán az árnyékot és ugyanitt a hasán levő görbéket javítottam, illetve a betűben levő csíkot is kikövérítettem picit – no, nem nagyon, 6 optikai pixel egységesen. A felső ábrán látszik, hogy az “O” betű közepét nem négy anchorból rakja össze, hanem össze-vissza, mindenféle vegyes felvágottból keletkezik valami, ami nagyjából hasonlít az eredetire. Az alsó részen a tisztázott változat – minimális, pixel gridre igazított pontokból kirakva. A pixel gridből egy részlet:

A végeredmény logó mindösszesen egy 6 kilobyte-os szövegfájl az eredeti 20 kb-ossal szemben. A csillagok például ennyiből definiálhatók:

<g id="CSILLAGOK">
<polygon fill="#BD4A3E" points="824,171 832,144 811,129 837,127 847,103 857,127 883,129 860,144 870,171 847,156"/>
<polygon fill="#BD4A3E" points="570,171 578,144 557,129 583,127 593,103 603,127 629,129 606,144 616,171 593,156"/>
<polygon fill="#BD4A3E" points="318,171 326,144 305,129 331,127 341,103 351,127 377,129 354,144 364,171 341,156"/>
</g>

Ezek a számok nem mások, mint egész számú koordináták az 1140×560 logikai pixeles artboardon. Az SVG renderer nem csinál mást, mint berajzolja a pontokat, összeköti őket és kiszínezi a megadott színnel – hopp, csillag!

Akit érdekel, itt megtekintheti az eredeti, PDF-ből kibányászott szűz SVG logót, itt pedig a végeredmény, letisztázottat, amit majd fel fogunk használni a weblapon is. Az sem véletlen, hogy az egyik piciben jelenik meg, ott nincs rendesen beállítva az artboard, a másiknál viszont logikai pixelekre van pozícionálva minden. (Aki Illustratorben akarja megnyitni, jobban teszi, ha előbb egy üres dokumentumot erre az artboard méretre állít, különben nem lesz pixel griden az egész. Természetesen a Sketch-nek nincsenek ilyen problémái.)

Szemfülesek azt is érszrevehetik, hogy a “HETI” árnyéka más, mint az eredeti, hiába, azt is újraraktam layer effektekből, aztán kézzel behúztam magasabbra a türkiz rész szárait. Súlyos nördizmus volt az egész, viszont nem tudom, ti hogy vagytok ezzel, de én imádom tekergetni, forgatni a görbéket, míg összeáll egy koherens egységgé az egész.