Ako vytvoriť SVG so škálovateľným typom s možnosťou vyhľadávania

Typ SVG poskytuje rovnaké hodnotné funkcie, aké nájdete vo všetkých aspektoch grafiky SVG vytvorenej v aplikácii Adobe Illustrator CC : škálovateľnosť, upraviteľnosť v aplikácii Illustrator a natívna podpora vo všetkých prehliadačoch. Tieto funkcie samy osebe argumentujú za export vášho grafického obsahu, ktorý obsahuje písmo vo formáte SVG, keď je určený na digitálny vývoj.

Dokonca okrem výhod, ktoré získate pri používaní SVG pre grafiku vo všeobecnosti, sú k dispozícii niektoré špeciálne funkcie, keď túto grafiku napíšete.

Využite hodnotu škálovateľného a vyhľadávateľného typu

Ako ste si možno všimli, som nadšený z toho, že typ SVG, keď sa otvorí v okne prehliadača, je možné prehľadávať pomocou prehliadača. Tieto vyhľadávacie nástroje prehliadača zvyčajne fungujú iba s typom HTML.

A typ SVG nie je len vyhľadávateľný; používatelia môžu nájsť text na stránke, skopírovať a vložiť a vyhľadať obsah. Napríklad, ak návštevníka džúsového baru zaujíma, či kapustové kokteily obsahujú alebo nemajú citrónovú šťavu, môže tento text vyhľadať v súbore SVG, ako je znázornené tu.

Vyhľadávanie textu v grafike SVG v prehliadači Chrome.

Alebo ak si používateľ nie je istý, čo je to sakra kapusta, môže vybrať text a vyhľadať definíciu, ako je znázornené.

Výber typu grafiky SVG v prehliadači

Ak chcete vytočiť trochu späť, môžete exportovať grafiku Illustratora, ktorá obsahuje typ pre obrazovky ako PNG, GIF alebo JPEG. Nebudú však škálovateľné a nezachovajú si typ funkčnosti znázornený na predchádzajúcich dvoch obrázkoch.

Optimalizujte funkčnosť typu ukladaním súborov SVG

Čoskoro sa vrátim k tomu, kedy a ako uložiť súbory SVG a exportovať do SVG. Ale keď už sme pri téme typu SVG, musíte vedieť, že ak chcete, aby sa typ SVG správal demonštrovaným spôsobom, musíte svoju grafiku uložiť ako SVG. A musíte použiť špecifické nastavenia, aby typ fungoval tak, ako má, keď sa obrázok SVG prezerá v prehliadači.

Ak chcete uložiť typ v rámci obrázka ako typ SVG, postupujte takto:

1. Keď je vaša grafika pripravená na odovzdanie webovému vývojárovi, vyberte Súbor→Uložiť ako. Prejdite do priečinka, do ktorého chcete súbor uložiť, a zadajte názov súboru.

Udržujte názvy súborov kompatibilné s webom, čo znamená, že používajte malé písmená a čísla, nepoužívajte špeciálne znaky (okrem pomlčiek a podčiarkovníkov) a rozhodne nepoužívajte medzery.

Ak znova ukladáte súbor, ktorý ste už uložili, do iného formátu, môžete si ponechať názov súboru a umiestnenie a prejsť na krok 2.

2. V rozbaľovacej ponuke Formát v dialógovom okne Uložiť vyberte SVG a kliknite na Uložiť.

Otvorí sa dialógové okno Možnosti SVG.

3. Ponechajte profily SVG nastavené na SVG 1.1 (aktuálna verzia, podporovaná všetkými prehliadačmi.

Ostatné možnosti nie sú rozhodujúce pre to, čo tu robíme, ale stručne sú nasledovné:

• • Možnosť podmnožiny: Ponechajte podmnožinu nastavenú na Žiadne. Ostatné možnosti nie sú funkčné pre typ SVG pre web.
  • Možnosti umiestnenia obrázka: Tieto možnosti sú použiteľné iba vtedy, ak ste do súboru aplikácie Illustrator vložili alebo prepojili (alebo oboje) kresbu.
  • Možnosti CSS Properties: Možnosti CSS Properties popisujem ďalej v tejto kapitole, ale krátke vysvetlenie je, že sú určené potrebami vývojára, ktorému odovzdávate súbory. Keď ukladáte typ ako SVG, môžete použiť ktorúkoľvek z možností vlastností CSS.

4. V spodnej časti dialógového okna Rozšírené možnosti zrušte začiarknutie políčka Výstup menej prvkov a Použiť prvok pre text na ceste.

Upozorňujeme, že tieto možnosti sú predvolene vybraté . Táto časť vášho dialógového okna Možnosti SVG by mala vyzerať ako na nasledujúcom obrázku.

Uloženie grafiky SVG na zachovanie špeciálnych typov prvkov.

Zrušením výberu týchto možností sa môže mierne zväčšiť veľkosť súboru, ale ich zrušením zachováte vzhľad textu a vlastnosti, ktorými som sa chválil v tejto časti (možnosť vyhľadávania, kopírovanie a vkladanie, vyhľadávanie v prehliadači a ďalšie funkcie, v závislosti od prostredia prehliadania).

Predvolene je začiarknuté políčko Responzívne. Toto nastavenie nie je rozhodujúce pre zachovanie špeciálnych atribútov typu SVG. Tu, ako pri väčšine možností, váš výber závisí od potrieb vášho webového vývojára. Ak máte pochybnosti, ponechanie vybratej možnosti Responsive je široko použiteľná možnosť výstupu.

5. Kliknutím na OK v dialógovom okne Možnosti SVG uložte súbor ako vložiteľný SVG.

Niekoľko poznámok k typu SVG:

• V čase písania tohto článku prebieha podpora všetkých funkcií typu SVG. Základné funkcie, ktorými som sa tu prechádzal, fungujú v akomkoľvek prehliadači, ale podpora rôznych písiem môže vyžadovať určité vylepšenie kódu zo strany vášho partnera pre vývojárov webu.
• Zaujíma vás, či sa tieto skvelé funkcie výberu, úpravy a vyhľadávania textu SVG vzťahujú na text na krivke? Odpoveď je znázornená na nasledujúcom obrázku. Spoiler: Áno!

Výber textu na ceste v súbore SVG v prehliadači Safari

Pridajte útržky kódu do grafiky SVG

Illustrator nikdy nebude u nikoho najlepšie hodnoteným editorom kódu, ale obsahuje skvelú malú funkciu na priradenie kódu k prvkom súboru SVG. Poďme sa rýchlo pozrieť na to, ako pridať útržok kódu, keď chcete pridať odkaz na časť grafiky SVG. Nasledujúce kroky vás prevedú priradením jazyka JavaScript k objektu, vďaka ktorému bude objekt fungovať ako odkaz.

1. S vybratým objektom zobrazte panel interaktivity SVG.

Ak tento panel nie je aktívny, môžete ho zobraziť výberom položky Okno → Interaktivita SVG.

2. Ponechajte Udalosť nastavenú na predvolenú hodnotu Onclick.

Tento príkaz JavaScript vykonáva funkciu (uskutočniť, aby sa niečo stalo), keď používateľ klikne na vybraný objekt na webovej stránke.

3. V poli JavaScript použite túto syntax na definovanie cieľa odkazu:

window.open("[URL]");

Ak by ste napríklad odkazovali na stránku Wikipedia o kapuste, celý riadok kódu by bol taký, aký mám na obrázku:

window.open("https://en.wikipedia.org/wiki/Kale");

4. Uložte súbor Illustratoru ako súbor SVG.

Pripojenie úryvku JavaScriptu k súboru SVG na vytvorenie odkazu, na ktorý sa dá kliknúť v grafike.

Súbor je pripravený na odovzdanie vášmu webovému vývojárovi. (Alebo ak je to vaša ďalšia rola, môžete zmeniť klobúky a vyzdvihnúť súbor vo svojom obľúbenom editore kódu a integrovať ho do webového projektu).

Prípadne môžete uložený súbor SVG jednoducho vložiť na webovú stránku. Odkaz nebude elegantný (kým webový dizajnér nevyladí vygenerované CSS, nebude obsahovať napríklad typickú ikonu odkazu, keď naň umiestnite kurzor myši). Bude to však fungovať a určite bude použiteľné na prototypovanie a testovanie pred dokončením webovej stránky.

Na ukladanie súborov SVG sa nepokúšajte použiť techniku ​​rezov aplikácie Illustrator. Technológia rezov je založená na rastrovom obraze a nespája sa s vektorovým výstupom.