Bitmapové obrazové formáty pro web – GIF, JPEG, WBMP a PNG – popisují obraz pomocí mřížky obrazových bodů. Výsledné soubory bývají velké, omezené na jedno (často nízké) rozlišení a vyžadují velkou rychlost připojení na web. SVG je naopak vektorový formát, který popisuje obrazy jako tvary, cesty, text a efekty filtrů. Výsledné soubory jsou kompaktní a poskytují vysoce kvalitní grafiky na webu, v tisku a dokonce i v kapesních zařízeních s omezenými prostředky. Uživatelé mohou zvětšit zobrazení obrazu SVG na obrazovce bez zhoršení ostrosti, detailů nebo přesnosti. Navíc SVG poskytuje výbornou podporu pro text a barvy, což zajistí, že uživatelé uvidí obrazy tak, jak se zobrazují na kreslicí ploše v aplikaci Illustrator.
Formát SVG je zcela založen na XML a nabízí mnohé výhody jak vývojářům, tak i uživatelům. S SVG můžete použít XML a JavaScript k vytváření webových grafik, které reagují na akce uživatele různými rafinovanými efekty, jako je zvýraznění, tipy nástrojů, zvuk a animace.
Kresbu můžete uložit ve
Výsledný soubor SVG bude ovlivněn nastavením kresby v aplikaci Illustrator. Pamatujte si následující pravidla:
Použijte vrstvy k přidání struktury k souboru SVG. Když uložíte kresbu ve formátu SVG, každá vrstva se převede na element skupiny (<g>). (Například z vrstvy s názvem Tlacitko1 se v souboru SVG stane <g id="Tlacitko1_ver3.0">.) Z vnořených vrstev se stanou vnořené skupiny SVG. Skryté vrstvy se zachovají a vlastnost „display“ stylu SVG bude mít hodnotu „none“.
Pokud chcete, aby se objekty na různých vrstvách zdály být průhledné, nastavte krytí jednotlivých objektů, ne celých vrstev. Pokud změníte krytí na úrovni vrstvy, ve výsledném souboru SVG se nezobrazí průhlednost tak, jak vypadá v aplikaci Illustrator.
Rastrová data nelze v prohlížeči SVG Viewer zvětšovat a zmenšovat a nelze je upravovat tak, jako ostatní elementy SVG. Pokud je to možné, vyhněte se vytváření kreseb, které budou v souboru SVG rastrované. Mřížky přechodů a objekty, které používají efekty Rastrovat, Umělecké, Rozostření, Tahy štětce, Deformovat, Seskupení, Zostření, Skica, Stylizace, Textura a Video, se rastrují, když se uloží ve formátu SVG. Podobně grafické styly, které obsahují tyto efekty, také způsobí rastrování. Použijte efekty SVG, chcete-li přidat grafické efekty, které nezpůsobí rastrování.
Abyste zlepšili rychlost SVG, používejte symboly a zjednodušte cesty ve své kresbě. Také se vyhněte používání stop štětců, které produkují množství dat cest, jako jsou stopy Uhel, Popel a Ozdobné pero, pokud má rychlost vysokou prioritu.
K přidání webových odkazů do souboru SVG použijte řezy, obrazové mapy a skripty.
Skriptovací jazyk, jako je JavaScript, poskytuje souboru SVG neomezenou funkčnost. Pohyby ukazatele a akce z klávesnice mohou vyvolat skriptované funkce, například efekty přechodu (rolloverů). Skripty mohou také použít objektový model dokumentu DOM (Document Object Model) k přístupu k souboru SVG a jeho změna – například vkládání a odstraňování elementů SVG.
Efekty SVG můžete použít k přidání grafických vlastností, jako jsou vržené stíny, do své kresby. Efekty SVG se liší od svých bitmapových protějšků tím, že jsou založené na XML a jsou nezávislé na rozlišení. Efekt SVG není ve skutečnosti nic více než řada vlastností XML, které popisují různé matematické operace. Výsledné efekty se vykreslí s cílovým objektem, ne se zdrojovou grafikou.
Illustrator obsahuje výchozí sadu efektů SVG. Efekty můžete použít s jejich výchozími vlastnostmi, můžete upravit kód XML, a tím vytvořit vlastní efekty, nebo si můžete napsat nové efekty SVG.
Poznámka:
Chcete-li upravit výchozí filtry SVG v aplikaci Illustrator, použijte textový editor a upravte soubor Adobe SVG Filters.svg ve složce Documents and Settings/<složka uživatele>/Application Data/Adobe/Adobe Illustrator <číslo verze> Settings/<umístění>. Můžete upravit definice stávajících filtrů, odstranit definice filtrů a přidat nové definice filtrů.
-
Chcete-li efekt aplikovat se standardním nastavením, vyberte efekt z dolní části podnabídky Efekt > Filtry SVG.
Chcete-li efekt aplikovat s vlastní nastavením, zvolte Efekt > Filtry SVG > Aplikovat filtr SVG. V dialogovém okně vyberte efekt a klikněte na tlačítko Upravit filtr SVG.
. Upravte výchozí kód a klikněte na OK.Chcete-li vytvořit a aplikovat nový efekt, zvolte Efekt > Filtry SVG > Aplikovat filtr SVG. V dialogovém okně klikněte na tlačítko Nový filtr SVG
, zadejte nový kód a klikněte na tlačítko OK.Když aplikujete efekt filtru SVG, Illustrator zobrazí na kreslicí ploše rastrovanou verzi efektu. Rozlišení tohoto náhledového obrazu můžete nastavit změnou nastavení rozlišení rastrování dokumentu.
Poznámka: Efekt SVG musí být poslední efekt, když má objekt více efektů; jinými slovy musí se v panelu Vzhled objevit zcela dole (hned nad položkou Průhlednost). Pokud za efektem SVG následuje nějaký jiný efekt, bude výstup SVG obsahovat rastrový objekt.
Panel Interaktivita SVG (Okno > Interaktivita SVG) se používá k přidání interaktivních prvků do kresby, která se bude exportovat pro prohlížení ve webovém prohlížeči. Například vytvořením události, která spouští příkaz JavaScriptu, můžete rychle vytvořit pohyb na stránce webu, když uživatel provede akci, jako je například pohyb kurzoru myši přes objekt. V panelu Interaktivita SVG také můžete prohlížet všechny události a soubory JavaScriptu spojené se současným souborem.
- Chcete-li odstranit jednu událost, vyberte ji a klikněte na tlačítko Odstranit nebo z nabídky panelu zvolte Odstranit událost.
- Chcete-li odstranit všechny události, v nabídce panelu vyberte možnost Odstranit všechny události.
-
V panelu Interaktivita SVG vyberte událost. (Viz Události SVG.)
onfocusout
Spustí akci, když element přestane být vybraný pro vstup (často když se vstup přesměruje do jiného elementu).
onload
Spustí akci poté, co se zcela dokončí analýza dokumentu SVG v prohlížeči. Tuto událost použijte pro vyvolání jednorázových inicializačních funkcí.
K dispozici je nová volba exportu SVG (Soubor > Export > SVG). Nový pracovní postup umožňuje generovat standardizované, pro web optimalizované soubory SVG určené pro projekty návrhů webů nebo obrazovek.
K dostupným možnostem patří:
- Stylování. Vyberte, jak chcete výsledný kód zapsat do souboru SVG. Zvolte, zda chcete styly implementovat jako interní CSS, inline styl nebo atributy prezentace.
- Písmo. Vyberte, jak mají být v souboru SVG představována písma. Obrysy zachovávají definici cesty
, a jsou nejkompatibilnější. - Obrazy: Vyberte, jestli se mají obrazy ukládat jako vložené do dokumentu nebo jako navázané soubory nacházející se vně dokumentu.
- ID objektů: Vyberte, jak se mají do objektů v souboru SVG přiřazovat typy ID (názvy). Vyberte Názvy vrstev, Minimální nebo Jedinečné. Tato volba určuje, jak budou zpracovány duplicitní názvy objektů a jak budou objekty pojmenovány v exportovaném CSS.
- Desetinné: Vyberte, kolik informací o přesnosti umístění objektů se má zachovat. Vyšší hodnota v poli Desetinné zvýší přesnost rozvržení objektů a tím zvýší vizuální věrnost vykresleného SVG. Zvýšením hodnoty v poli Desetinné se ale také zvýší velikost výsledného exportovaného souboru SVG.
- Minifikovat: Optimalizuje velikost souboru SVG odebráním prázdných skupin a prázdných mezer. Tato volba ale také snižuje čitelnost výsledného kódu SVG.
- Responzivní. Zapnutím této volby zajistíte, aby se vytvořený soubor SVG přizpůsobil velikosti okna prohlížeče. Nejsou zapsány žádné absolutní hodnoty velikosti.
- Zobrazit kód: Otevře exportovaný obsah ve výchozím textovém editoru.
- Zobrazit v
prohlížeči (ikona): Zobrazí obrázek ve výchozím webovém prohlížeči.