Jak vytvářet SVG se škálovatelným, prohledávatelným typem

Typ SVG poskytuje stejné cenné funkce, jaké lze nalézt ve všech aspektech grafiky SVG vytvořené v Adobe Illustrator CC : škálovatelnost, upravitelnost v Illustratoru a nativní podpora ve všech prohlížečích. Tyto funkce samy o sobě argumentují pro export vašeho grafického obsahu, který obsahuje písmo ve formátu SVG, když je určen pro digitální vývoj.

Kromě výhod, které získáte při používání SVG pro grafiku obecně, jsou k dispozici některé speciální funkce, když tuto grafiku zadáte.

Využijte hodnotu škálovatelného a prohledávatelného typu

Jak jste si možná všimli, jsem nadšený z toho, že typ SVG, když je otevřen v okně prohlížeče, je prohledávatelný pomocí prohlížeče. Tyto vyhledávací nástroje prohlížeče obvykle pracují pouze s typem HTML.

A typ SVG nelze pouze prohledávat; uživatelé mohou najít text na stránce, kopírovat a vkládat a vyhledávat obsah. Pokud se například návštěvník džusového baru zajímá o to, zda kapustové koktejly obsahují citronovou šťávu, nebo ne, může tento text vyhledat v souboru SVG, jak je znázorněno zde.

Hledání textu v grafice SVG v prohlížeči Chrome.

Nebo když na to přijde, pokud si uživatel není jistý, co je to sakra kapusta, může vybrat text a vyhledat definici, jak je znázorněno.

Výběr typu v grafice SVG v prohlížeči

Chcete-li se vrátit o něco zpět, můžete exportovat grafiku Illustratoru, která obsahuje písmo pro obrazovky jako PNG, GIF nebo JPEG. Nebudou však škálovatelné a nezachovají typ funkčnosti znázorněný na předchozích dvou obrázcích.

Optimalizujte funkčnost typu ukládáním SVG

Krátce se vrátím k tomu, kdy a jak ukládat soubory SVG a exportovat do SVG. Ale když už jsme u tématu typu SVG, musíte vědět, že aby se typ SVG choval tak, jak je ukázáno, musíte svou grafiku uložit jako SVG. A musíte použít specifická nastavení, aby se typ choval tak, jak má, když je obrázek SVG zobrazen v prohlížeči.

Chcete-li uložit typ v obrázku jako typ SVG, postupujte takto:

1. S grafikou připravenou k předání webovému vývojáři zvolte Soubor→Uložit jako. Přejděte do složky, kam chcete soubor uložit, a zadejte název souboru.

Udržujte názvy souborů web kompatibilní, což znamená, že používejte malá písmena a čísla, nepoužívejte speciální znaky (kromě pomlčky a podtržítka) a rozhodně nepoužívejte mezery.

Pokud znovu ukládáte soubor, který jste již uložili, do jiného formátu, můžete si ponechat název souboru a umístění a přejít ke kroku 2.

2. V rozevíracím seznamu Formát v dialogovém okně Uložit zvolte SVG a klikněte na Uložit.

Otevře se dialogové okno Možnosti SVG.

3. Ponechte profily SVG nastavené na SVG 1.1 (aktuální verze, podporovaná všemi prohlížeči.

Ostatní možnosti nejsou kritické pro to, co zde děláme, ale stručně jsou následující:

• • Možnost podmnožiny: Ponechte podmnožinu nastavenou na Žádné. Ostatní možnosti nejsou pro typ SVG pro web funkční.
  • Volby umístění obrazu: Tyto volby jsou použitelné pouze v případě, že jste do souboru aplikace Illustrator vložili nebo propojili (nebo obojí) kresbu.
  • Možnosti CSS Properties: Možnosti CSS Properties popisuji dále v této kapitole, ale stručné vysvětlení je, že jsou určeny potřebami vývojáře, kterému předáváte soubory. Když ukládáte typ jako SVG, můžete použít kteroukoli z možností CSS Properties.

4. V dolní části dialogového okna Upřesnit možnosti zrušte zaškrtnutí políčka Výstup méně prvků a Použít prvek pro text na cestě.

Všimněte si, že tyto možnosti jsou vybrány ve výchozím nastavení. Tato část vašeho dialogového okna Možnosti SVG by měla vypadat jako na následujícím obrázku.

Uložení grafiky SVG pro zachování speciálních typových prvků.

Zrušením výběru těchto možností můžete mírně zvětšit velikost souboru, ale jejich zrušením zachováte vzhled textu a vlastnosti, kterými jsem se v této části chlubil (možnost vyhledávání, kopírování a vkládání, vyhledávání v prohlížeči a další funkce, v závislosti na prostředí procházení).

Ve výchozím nastavení je zaškrtnuto políčko Reagovat. Toto nastavení není rozhodující pro zachování speciálních atributů typu SVG. Zde, stejně jako u většiny možností, závisí váš výběr na potřebách vašeho webového vývojáře. V případě pochybností je ponechání vybrané možnosti Responsive široce použitelnou možností výstupu.

5. Klepnutím na OK v dialogovém okně Možnosti SVG uložte soubor jako vložitelný SVG.

Několik poznámek k typu SVG:

• V době psaní tohoto článku probíhá podpora všech funkcí typu SVG. Základní funkce, kterými jsem zde prošel, fungují v jakémkoli prohlížeči, ale podpora různých písem může vyžadovat určité úpravy kódu vaším partnerem pro vývojáře webu.
• Zajímá vás, zda se tyto skvělé funkce výběru, úprav a vyhledávání textu SVG vztahují na text na křivce? Odpověď ukazuje následující obrázek. Spoiler: Ano!

Výběr textu na cestě v souboru SVG v prohlížeči Safari

Přidejte úryvky kódu do grafiky SVG

Illustrator nikdy nebude u nikoho nejlépe hodnoceným editorem kódu, ale obsahuje skvělou malou funkci pro přidružení kódu k prvkům souboru SVG. Pojďme se rychle podívat na to, jak přidat úryvek kódu, když chcete přidat odkaz na část grafiky SVG. Níže uvedené kroky provedou přiřazení JavaScriptu k objektu, díky kterému bude tento objekt fungovat jako odkaz.

1. S vybraným objektem zobrazte panel Interaktivita SVG.

Pokud tento panel není aktivní, můžete jej zobrazit výběrem položky Okno→Interaktivita SVG.

2. Ponechte Událost nastavenou na výchozí hodnotu Onclick.

Tento příkaz JavaScriptu provádí funkci (něco se stane), když uživatel klepne na vybraný objekt na webové stránce.

3. V poli JavaScript použijte tuto syntaxi k definování cíle odkazu:

window.open("[URL]");

Pokud byste tedy například odkazovali na stránku Wikipedie na kale, celý řádek kódu by byl to, co mám na obrázku:

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

4. Uložte soubor Illustratoru jako soubor SVG.

Připojením úryvku JavaScriptu k souboru SVG za účelem vytvoření odkazu v grafice, na který lze kliknout.

Soubor je připraven k předání vašemu webovému vývojáři. (Nebo pokud je to vaše další role, můžete změnit klobouky a vyzvednout soubor ve svém oblíbeném editoru kódu a integrovat jej do webového projektu).

Případně můžete uložený soubor SVG jednoduše vložit na webovou stránku. Odkaz nebude elegantní (dokud webový designér neupraví vygenerované CSS, nebude například obsahovat typickou ikonu odkazu při najetí myší). Ale bude to fungovat a určitě to bude použitelné pro prototypování a testování, než bude webová stránka dokončena.

Nepokoušejte se pro ukládání souborů SVG používat techniku ​​řezů aplikace Illustrator. Technologie řezů je založena na rastru a neslučuje se s vektorovým výstupem.