Jak z Illustratoru hromadně exportovat SVG

  TIP |  Suprově vytuněná grafika, to je SVG! Vlastně ne tak docela. Ve skutečnosti je to grafický formát souboru, jehož plný název zní Scalable Vector Graphics nebo tak nějak. Prostě webová vektorová grafika, která celkem kašle na pixelové matice a místo nich si všechno vykresluje pomocí složitých matematických výpočtů křivek.

Ale to už všichni víte, protože jste zkušení dizajnéři (akorát si doplňujete znalosti ;). Ta pravá otázka zní, jak z Illustratoru šikovně a jednoduše vyexportovat pracně vytvořenou sadu ikonek. Přece to nebudeme dělat ručně, když máme ty počítače.

A taky že jo! Chytré hlavy z Iconic pro nás napsaly skript do Illustratoru, který to celkem hezky řeší.

Jak se to teda dělá?

1. Stáhneš si skipt SVG Exporter a rozbalíš ho do složky
   C:\Program Files\Adobe\Adobe lllustratorCC2014\Presets\[language]\Scripts\
2. Nakreslíš si ikonky. Užitečné je kreslit všechny ikonky do jednoho souboru, páč Illustrator umí kreslící plátna (Artboards). Je to přehledné a pomáhá to udržovat konzistenci tvorby.
3. Ikonky nahážeš zvlášť do skupin (nebo na separátní vrstvy, artboardy ... jak chceš) a dáš jim požadovaný název s příponou .svg, tedy např. monitor.svg. 
4. Spustíš skript z File > Scripts > SVG Exporter a zvolíš cílovou složku, do které se ti nasypou jednotlivé ikonky ve formátu SVG.

Skript přechroustá vše a nadělá ti SVG celkem z čehokoliv, co tam máš nakresleno. Aby to fungovalo, musíš každý exportovaný element správně pojmenovat (viz bod č. 3 výše). Konkrétně tedy bude generovat SVG z těchto elementů:

• vrstvy (layer)
• skupiny vrstev (group)
• složené cesty (compound path)
• cesty (path)
• vnořené vrstvy (nested layer)
• kreslicí plátna (artboard)

 

Obr. 1: Pojmenování vrstev odsouzených k exportu do SVG

 

Formát ikony skript ořízne na její ohraničovací rámeček (bounding box). 

TIP: Pokud chceš některou ikonku z jakýchkoliv důvodů vyjmout z exportu, stačí daný element/vrstvu/skupinu zamknout.

Spolupráce s CSS

Autoři skriptu uvádějí, že pro účely CSS je možné každou jednotlivou cestu/objekt uvnitř ikonky opatřit příslušným ID. Ke tvorbě unikátního identifikátoru se použije název cesty, který skript při přechroustávání umravní do nezávadné podoby (tj. vyhodí diakritiku a jiné parazitní znaky). Kdyby ID nestačilo, je k dispozici grunt task, který všechna ID převede na CLASSy.

A tak se, milé děti, hromadně exportují ikonky z Illustratoru do SVG formátu.

Easy peasy!