SVG ikona môže zostať ostrá na malom telefóne aj veľkom monitore, no iba vtedy, keď je správne pripravený zdroj. Zbytočné body, chýbajúce písmo alebo nesprávna kresliaca plocha dokážu z jednoduchého symbolu vytvoriť veľký a nespoľahlivý súbor.
Začnite jednotným systémom
Najprv určte základný rozmer, napríklad 24 × 24 bodov, bezpečný okraj a povolené hrúbky čiar. Ikony nekreslite každú v inom meradle a potom ich iba nezmenšujte. Dve ikony s rovnakým vonkajším rozmerom môžu pôsobiť odlišne, ak jedna využíva celú plochu a druhá má veľké vnútorné medzery.
Geometria
Zarovnajte kľúčové body na spoločnú mriežku, odstráňte neviditeľné objekty a zjednodušte prebytočné kotviace body.
Optická rovnováha
Kruhy a šikmé tvary môžu potrebovať jemný presah, aby pri rovnakej veľkosti nepôsobili menšie než štvorce.
Kresliaca plocha určuje výrez
Pri exporte viacerých ikon zapnite použitie kresliacich plôch. Bez tejto voľby môže výsledný výrez vychádzať zo spoločných hraníc všetkých objektov alebo zachytiť nechcený prvok mimo plochy. Každú kresliacu plochu pomenujte stabilným názvom, napríklad „kosik“, „hladat“ alebo „profil“, pretože tieto názvy sa často stanú názvami súborov.
Pozor na ťahy: Ikonu skúšajte aj v skutočnej cieľovej veľkosti. Čiara, ktorá vyzerá dobre pri veľkom priblížení, môže po zmenšení pôsobiť mäkko alebo sa opticky stratiť. Pri kritických symboloch zvážte prevod ťahov na obrysy až v odovzdávacej kópii.
Nastavenia SVG bez hádania
- Zvoľte spôsob štýlov. Vnútorné štýly zdieľajú pravidlá medzi objektmi; vložené štýly zapisujú vlastnosti ku každému prvku. Voľbu dohodnite s vývojárom.
- Rozhodnite o písmach. Pre samostatnú ikonu je prevod textu na obrysy najspoľahlivejší. Zachovaný text závisí od dostupnosti písma.
- Vložte obrázky. Ak SVG obsahuje rastrový prvok, vloženie zabráni strate externého súboru, ale zväčší výsledok.
- Nastavte presnosť. Viac desatinných miest zachová presnejšiu geometriu, no zväčší kód. Pri jednoduchých ikonách testujte nižšiu hodnotu.
- Minimalizujte až na konci. Minimalizácia odstráni medzery a nepotrebné skupiny, ale sťaží ručné čítanie kódu. Zdrojový súbor AI vždy uchovajte.
Responzívny export nie je automatická záruka
Voľba responzívneho SVG vynechá pevné rozmery a umožní prispôsobenie v prehliadači. Stále však treba správne zobrazenie riadiť na webovej stránke. Overte pomer strán, farbu pozadia a správanie pri extrémne malej veľkosti. Ak má vývojár meniť farbu cez štýly stránky, vopred sa dohodnite na štruktúre výplní a pomenovaní tried.
Komplexné efekty, masky, filtre a prechody môžu zvyšovať veľkosť alebo sa správať odlišne v rôznych prostrediach. Pri ikonách uprednostnite jednoduché tvary. Ak potrebujete tieň, porovnajte SVG efekt s vizuálne podobnou jednoduchšou alternatívou. Skontrolujte aj kontrast a zrozumiteľnosť symbolu bez farby, pretože význam nemá závisieť iba od jedného farebného odlíšenia.
Kontrola odovzdania
Otvorte export v dvoch moderných prehliadačoch a vložte ho na svetlé aj tmavé pozadie. Skontrolujte 16, 24, 32 a 64 obrazových bodov. Súbor nesmie obsahovať skryté vrstvy, nepoužité obrázky ani náhodné názvy. Vývojárovi odovzdajte SVG, náhľadovú tabuľu a pôvodný súbor AI.
- Ikony používajú spoločnú mriežku a okraje.
- Každá kresliaca plocha má stabilný názov.
- Písma a externé obrázky nemôžu vypadnúť.
- Výstup je overený v cieľových veľkostiach.
Dobrý SVG súbor je jednoduchý a predvídateľný
Čistý zdroj, jednotná geometria a kontrolovaný export vytvoria ikony, ktoré sa načítajú rýchlo a zostanú ostré v každom rozmere.