Průvodce praktickým začátečníkem k SVG
Přestože formát není nijak zvlášť nový, obrázky SVG jsou v designu webových stránek stále populárnější. Všechny hlavní webové prohlížeče podporují formát a SVG mění způsob, jakým přemýšlíme, a vykreslují obrázky pro web.
Proč jsou tak populární? A co přesně se liší na souboru SVG? Dnes máme odpovědi a vše, co potřebujete vědět, abyste mohli začít s tímto typem souboru. (Jako malý bonus jsou všechny obrázky v tomto příspěvku k dispozici ve formátu SVG společnosti Creative Market.)
Prozkoumejte prvky Envato
Co je to SVG?
Škálovatelná vektorová grafika (SVG) je vektorový obrazový formát vyvinutý pro web. (Další informace o vektorových versus rastrových formátech se můžete dozvědět v předchozím článku Design Shack.)
Formát se zvýšil na popularitě díky displejům s vysokým rozlišením, kde uživatelé mohou vidět každý pixel (pokud existují). Protože SVG je vektorový formát, obraz se vykresluje stejným způsobem - a v dokonalých detailech - bez ohledu na velikost.
Značkovací jazyk byl poprvé vyvinut konsorciem World Wide Web Consortium, které je běžně známé jako W3C, v roce 1999. W3C definuje SVG jako „značkovací jazyk pro popis dvourozměrných grafických aplikací a obrázků a sadu souvisejících grafických skriptových rozhraní . “ Je podporován všemi moderními prohlížeči, takže se nemusíte starat o to, zda se soubory SVG vykreslí správně nebo ne - a funguje bez ohledu na typ zařízení.
Praktické aplikace
Co dělá SVG tak populárním a proč ho používá více návrhářů? Jednoduše, protože to funguje.
Soubory SVG jsou malé a škálovatelné. I když je formát nejvhodnější pro tvary, má řadu praktických aplikací. Značková loga, ikony, prvky uživatelského rozhraní a spousta dalších designových bitů mohou fungovat ve formátu SVG. Největším bonusem je, že se jedná o vektory. Takže obraz SVG lze použít téměř v jakékoli velikosti. (Některé z nejmenších souborů mohou být pouze tak velké.)
Soubory SVG lze snadno manipulovat a také ovládat. SVG lze nejen uložit jako statický obrázek, ale můžete také přidat interaktivitu a filtry, aby byl obrázek ještě zábavnější. (Soubory SVG lze animovat a barvit.)
Zde je několik praktických aplikací pro použití SVG:
- Loga nebo obrázky
- Jako obrázek na pozadí
- Jako objekt, například tlačítko
- Mapování
- Grafy nebo výkresy
Obecně platí, že SVG je nejvhodnější pro obrázky, které se mohou vyvíjet nebo měnit v průběhu času nebo podle typu zařízení nebo zahrnují animaci nebo jiné dynamické efekty. Použijte formát pro vizuální prvky, jako jsou loga, náčrtky, tvary, grafika a grafy nebo jiné jednoduché obrázky.
Výhody používání SVG
Tak proč byste se přestěhovali od důvěryhodného JPG nebo GIF k SVG? Existuje mnoho důvodů, proč by tento formát mohl být pro vaše projekty tím nejlepším. (A existuje dokonce možnost použít SVG i pro tisk.)
- SVG je vektorový formát. To samo o sobě je důležité, když uvažujete o responzivním designu, kde se velikost obrazu často mění v závislosti na zařízení. SVG je dostatečně malý na to, aby jeden soubor zvládl veškerou práci a na větších obrazovkách nedochází ke ztrátě kvality.
- Obrázky a chování SVG jsou definovány pomocí XML, což znamená, že je možné prohledávat, indexovat, skriptovat a komprimovat.
- S obrázkem SVG můžete dělat téměř cokoli, co můžete dělat s jakýmkoli jiným obrázkem, jako je například zahrnutí různých technik designu. Je snadné přidat filtry, režimy prolnutí, efekty bur, barvy, ořezávání a maskování, vržené stíny a téměř jakoukoli jinou techniku, kterou se vám líbí.
- Soubory SVG jsou přístupné.
- SVG pracuje s otevřenými webovými standardy.
- SVG můžete vytvořit pomocí textového kódu nebo pomocí nakresleného obrázku. To umožňuje určitou svobodu v závislosti na vašich potřebách a úrovni odbornosti v různých oblastech.
- Velikosti souborů jsou malé a lze je minifikovat. To znamená, že grafika, která by mohla být velká jinak, není, což zvyšuje dobu načítání. (Vždy bonus.)
Nevýhody použití SVG
Pravděpodobně se prodáváte na SVG po přečtení všech výhod, že? Je však třeba zvážit i několik negativ.
- Starší prohlížeče - například Internet Explorer 8 nebo nižší - nepodporují SVG. Pravděpodobně můžete najít obejít (nebo se vám to nemusí starat), ale měli byste vědět, že by mohli existovat někteří uživatelé, kteří vaše obrázky nevidí.
- SVG nepracuje pro složité obrázky, jako jsou fotografie. Je to formát určený pouze pro tvary a linie.
Co bude dál pro SVG?
Budoucnost SVG se teprve začíná. Jako přijatý mobilní obrazový formát (a standardní) bude používání a vývoj SVG jen dále růst.
Podle W3C „SVG 2 je v současné době ve vývoji a přidá do SVG nové funkce pro snadné použití, stejně jako užší integraci s HTML, CSS a DOM a zastaralé funkce, které nepodporují všechny prohlížeče.“
Ostatní doplňky jsou také házeny kolem. Společnosti tiskového hardwaru hledají způsoby, jak lépe využít SVG pro tiskové procesy, a má podporu předních výrobců v oboru, jako jsou Adobe a Canon. Použití v mapování a GIS se také rozšiřuje, což umožňuje lepší možnosti mapování a přiblížení.
Když o tom opravdu začnete přemýšlet, existuje téměř nekonečná příležitost, jak používat a implementovat SVG do projektů na webu a v tištěném designu. (To je jedna z krás vektorového formátu.)
Zdroje SVG
Nyní, když jste trochu nadšeni SVG a vidíte proč a jak to může být užitečné pro vaše projekty, máme seznam zdrojů, které vám pomohou začít.
- Export SVG pro web pomocí aplikace Adobe Illustrator
- Vložit SVG přímo do HTML stránek
- Uvedení do chodu s videokamerou SVG
- Profily SVG
- Triky CSS: Použití SVG
Závěr
Používáte SVG pro své projekty? Pokud ne, jste připraveni provést změnu?
SVG roste v popularitě téměř denně a protože se jedná o nástroj s otevřeným zdrojovým kódem, tyto změny a zálohy se vám okamžitě přečtou. Nejste vázáni na jednoho dodavatele nebo produkt a můžete vytvářet obrázky, které jsou zcela kompatibilní na moderním webu.
Fotografie S laskavým svolením Creative Market .
