SVG grafický formát a kde se používá. Úvod do grafiky SVG Nakreslete diagram v prohlížeči html svg

Vektorová grafika je široce používána v tištěných médiích. Na web můžeme přidat i vektorovou grafiku SVG (Škálovatelná vektorová grafika). S odkazem na oficiální specifikaci na W3.org je SVG popsán jako jazyk pro popis dvourozměrné grafiky v XML. SVG umožňuje vytvářet vektorové grafické tvary (například obrys složený z přímých čar a křivek), obrázky a text.

Výhody SVG

SVG nabízí několik výhod oproti rastrové grafice, zde jsou některé z nich:

Škálovatelnost

Rastrový obrázek se skládá z pixelů a při změně měřítka ztrácí kvalitu, zatímco vektorová grafika si zachovává své proporce bez ohledu na měřítko.

Zrychlení požadavku HTTP

Soubor SVG lze vložit přímo do dokumentu HTML pomocí značky svg, takže prohlížeč nemusí žádat. Vede to k lepší výkon a menší zatížení webu.

Stylizace a scénáře

Vložení značky svg přímo do dokumentu HTML nám také umožňuje snadno nastavit grafické styly pomocí . Můžeme změnit vlastnosti objektu, jako je barva pozadí, průhlednost okraje atd. Kromě toho můžeme také manipulovat s grafikou pomocí .

Obrázky lze animovat a upravovat

Objekt SVG lze animovat pomocí animace prvků pomocí css nebo JavaScriptu (JQuery). Objekt SVG lze upravovat pomocí libovolného textového editoru nebo editoru vektorové grafiky, jako je Inkscape nebo Adobe Illustrator.

Menší velikost souboru

SVG má menší velikost souboru ve srovnání s rastrovým obrázkem.

Vytváření jednoduchých tvarů pomocí SVG

Dle specifikace můžeme vytvořit některé základní tvary jako např obdélníky, kružnice, čáry, elipsy, křivky a mnohoúhelníky pomocí SVG a aby prohlížeč zobrazil grafiku SVG, musí být všechny tyto grafické prvky vloženy do tagu štítek. Podívejme se na níže uvedené příklady:

Čára

Na Nakresli čáru v SVG můžete použít prvek . Tento prvek se používá k nakreslení jedné čáry, takže se bude skládat pouze ze dvou bodů, Start A konec.

< /svg>

Jak vidíte výše, počáteční bod čáry je vyjádřen pomocí prvních dvou atributů x1 a x2 a koncový bod souřadnice čáry je vyjádřen pomocí y1 a y2 .

Existují také dva další atributy, tah a šířka-tahu, které se používají k definování barvy a šířky okraje. Kromě toho můžeme také definovat tyto atributy v inline stylu:

Style="stroke-width:1; stroke:rgb(0,0,0);"

ona nakonec udělá to samé.

přerušovaná čára

Tento prvek je podobný , ale s pomocí Pro prvek můžeme místo jedné nakreslit několik čar. Zde je příklad:

"0,0 50,0 150,100 250,100 300,150" fill="rgb(249,249,249)" stroke-width ="1" stroke="rgb(0,0,0)" /> < /svg>

Obdélník

Kreslení obdélníku je s tím také snadné živel. Potřebujeme zadat pouze šířku a výšku takto:

< /svg>

Kruh

Můžeme také nakreslit kruh s živel. V následujícím příkladu vytvoříme kružnici o poloměru 100 definovanou pomocí atributu r:

< /svg>

První dva atributy, cx a cy, definují souřadnice středu kruhu. Ve výše uvedeném příkladu jsme vytvořili 102 jako souřadnice x i y, pokud tyto atributy nezadáte, bude 0 považována za výchozí hodnotu.

Elipsa

Pomocí značky můžeme nakreslit elipsu . Princip vytváření je stejný jako u kruhu, ale tentokrát můžeme ovládat radius x a y čáry a také atributy rx a ry;

< /svg>

Polygon

Použití prvku Můžeme vytvořit vícestranné tvary, jako je trojúhelník, šestiúhelník a dokonce i obdélník. Zde je příklad:

"70.444,218.89 15.444,118.89 70.444,18.89 180.444,18.89 235.444,118.89 180.444,218.89" fill="rgb(234,234,234)" stroke-width ="1" stroke="rgb(0,0,0)" /> < /svg>

Použití vektorového grafického editoru

Jak vidíte, použití jednoduchých objektů SVG v dokumentu HTML je docela snadné. Když se však objekt stane složitějším, tato metoda již není ideální.

Naštěstí, jak jsme zmínili výše, můžeme použít například vektorový grafický editor Adobe Illustrator nebo Inkscape .

Pokud pracujete s Inkscape, můžete uložit své vektorové soubory ve formátu SVG a poté je otevřít v editoru textového kódu. Zkopírujte všechny kódy a vložte je do dokumentu HTML.

Soubory .svg můžete vkládat například pomocí značek embed , iframe a object;

Výsledek bude nakonec stejný.

*V tomto příkladu používáme obrázek

Dnes budeme hovořit o SVG, o jakém formátu se jedná, s čím se používá a zda se vyplatí jej používat. Přestože formát není nijak zvlášť nový, svou oblibu si získal díky své implementaci. Všechno nejnovější verze prohlížeče již podporu pro tento formát získaly.

Proč je tak oblíbený? A čím se přesně liší od ostatních? Dnes na tyto otázky odpovíme a také vám řekneme, co potřebujete vědět, abyste mohli začít pracovat s těmito typy souborů.

Co je SVG?

SVG – Scalable Vector Graphics – je vektorový formát pro webové vývojáře. Tenhle typ formát se stal tak populárním díky skutečnosti, že jeho obrázky lze zobrazovat ve vysokém rozlišení bez ztráty kvality, protože SVG je vektorový formát.

Impuls pro vývoj tohoto jazykového značení dalo jako první konsorcium Celosvětová Síť(World Wide Web Consortium), která byla v roce 1999 známější jako W3C. W3C dalo koncept SVG - značkovací jazyk pro vytváření dvourozměrných grafická rozhraní a obrázky.

Použití v praxi

Proč je SVG tak populární a proč jej začíná používat stále více designérů? Je to velmi jednoduché, funguje to jak má.

SVG je ve srovnání s jinými formáty lehký. Tento formát jednoduše neuvěřitelné příležitosti. Příznaky, symboly, prvky rozhraní. A to je jen malý výčet toho, jak se dá využít. Největší výhodou použití je, že se jedná o vektorový formát, to znamená, že jej lze použít na jakémkoli displeji – ať už mají jakékoli rozlišení, bude se zobrazovat všude stejně.

Soubory SVG se velmi snadno spravují, protože jejich soubory jsou uloženy jako statický obrázek. Na svůj web můžete přidat interaktivitu vytvořením velmi jednoduchých, ale krásných animací pomocí SVG.

Několik příkladů, kde se dá použít:

Loga
Obrázek na pozadí
Použijte jako tlačítko
Karty
Schémata nebo výkresy

SVG se zpravidla nejčastěji používá při tvorbě responzivních webů, animací a dalších dynamických efektů.

Výhody použití SVG

Proč bychom tedy měli opustit obvyklé JPG nebo GIF ve prospěch SVG? Existuje několik důvodů, proč byste jej měli stále používat ve svém projektu.

SVG je vektorový formát, a proto se vyplatí jej používat pro responzivní weby, kde velikost obrázků závisí na rozlišení displeje uživatele a SVG bezchybně vyhovuje.
Obrázky SVG používají XML k definování svých vlastností, a proto mají schopnost být ještě více komprimovány.
S obrázky SVG se velmi snadno manipuluje a to otevírá ještě více možností pro designéry, kteří mohou měnit barvy, přidávat stíny, filtry, rozostření a mnoho dalších efektů.
SVG je docela snadné pochopit
SVG pracuje s otevřenými webovými standardy
K vytvoření SVG můžete použít běžný editor textového kódu. To vám dává určitou svobodu ve vašem jednání, vše závisí na vašich potřebách a úrovni odborných znalostí v této oblasti.

Nevýhody používání SVG

Pravděpodobně jste šokováni, kolik výhod má SVG. A možná si mysleli, že to nemá žádné nevýhody. Ale ne, určitě jich pár je a tady jsou některé z nich:

Neexistuje žádná podpora pro starší prohlížeče, jako je Explorer 8 a nižší.
SVG nelze použít na fotografiích, protože je to vektorový formát a používá se k vytváření různých tvarů a čar.

Co bude dál?

Budoucnost SVG právě začíná. Jako přijímaný formát obrázků (a standard) pro mobily bude SVG nadále nabírat na síle.

Tento příspěvek je prvním ze série článků o SVG (Scalable Vector Graphic), které pokrývají základy vektorové grafiky na webu.

Vektorová grafika je široce používána v tisku. Pro weby existuje SVG, což podle oficiální specifikace na w3.org je jazyk pro popis dvourozměrné grafiky v XML. SVG obsahuje tři typy objektů: tvary, obrázky a text. SVG existuje od roku 1999 a od 16. srpna 2011 je součástí doporučení W3C. SVG je webovými vývojáři velmi podceňováno, i když má několik důležitých výhod.

Výhody SVG

Škálování: Na rozdíl od rastrové grafiky neztrácí SVG při škálování kvalitu, takže je vhodné jej použít pro vývoj sítnice.
Snížení požadavků HTTP: při použití SVG se sníží počet volání na server a odpovídajícím způsobem se zvýší rychlost načítání stránek.
Stylování a skriptování: Pomocí CSS můžete změnit nastavení grafiky na webu, jako je pozadí, průhlednost nebo okraje.
Animace a úpravy: pomocí javascriptu můžete animovat SVG, stejně jako upravovat v textu popř grafický editor(InkScape nebo Adobe Illustrator).
Malá velikost: Objekty SVG váží mnohem méně než rastrové obrázky.

Základní tvary SVG

Podle oficiální specifikace můžete pomocí SVG kreslit jednoduché objekty: obdélník, kruh, čára, elipsa, křivka nebo mnohoúhelník pomocí značky svg.

Jednoduchá linie pomocí značky čára pouze se dvěma parametry - počáteční body (x1 a x2) a koncové body (y1 a y2):

Můžete také přidat atributy nebo styly tahu a šířky tahu a nastavit barvu a šířku:

Style="stroke-width:1; stroke:rgb(0,0,0);"

přerušovaná čára

Syntaxe je podobná předchozí, používá se značka lomená čára, atribut body nastavuje body:

Obdélník

Volané pomocí značky rect můžete přidat některé atributy:

Kruh

Voláno podle značky kruh, v příkladu s použitím atributu r nastavit poloměr, cx A cy uveďte souřadnice středu:

Elipsa

Voláno podle značky elipsa, funguje podobně kruh, ale můžete zadat dva poloměry - rx A ry:

Polygon

Voláno podle značky polygon, mnohoúhelník může mít různý počet stran:

Použití editorů

Jak můžete vidět z příkladů, kreslení základních tvarů SVG je velmi jednoduché, ale objekty mohou být mnohem složitější. K těm je potřeba použít vektorové grafické editory, jako je Adobe Illustrator nebo Inkscape, kde můžete ukládat soubory ve formátu SVG a následně je upravovat v textovém editoru. SVG můžete do stránky vložit pomocí embed, iframe a object:

Příkladem je obrázek iPodu z OpenClipArt.org.

SVG (Scalable Vector Graphics) je standard vektorové grafiky vyvinutý konsorciem W3C.

SVG je značkovací jazyk pro popis dvourozměrných grafických aplikací a obrázků a je podmnožinou XML jazyka Extensible Markup Language. Patří sem také řada souvisejících grafických skriptů.

SVG podporuje každý moderní prohlížeče pro PC a mobilní telefony. Některé funkce, jako jsou animace SMIL a písma SVG, nejsou tak rozšířené.

Poslední verze celé specifikace je SVG 1.1.

SVG 2 je ve vývoji. Přidá nové, snadno použitelné funkce pro SVG a také pracuje na těsnější integraci s HTML, CSS a DOM.

Výhody SVG

Grafika SVG se vytváří pomocí matematických vzorců, které lze upravit při změně velikosti obrázku. Tím pádem vektorové obrázky měřítko lépe než rastrové.
Velikost vektorového obrázku je obvykle menší než srovnatelné obrázky ve formátech JPEG, GIF nebo PNG.
SVG grafika má textový formát, které lze upravovat v poznámkovém bloku nebo kreslit v grafických vektorových editorech Adobe Illustrator, CorelDRAW.
Skripty a animace SVG umožňují vytvářet dynamickou a interaktivní grafiku.
Text v grafice SVG je text, nikoli obrázek, takže je indexován vyhledávači.
K obrázku SVG můžete přidat více odkazů.
Externí tabulky můžete připojit k formátu SVG CSS styly, globální styly uvnitř kontejneru nebo přidejte interní styly pomocí atributu style na značkách shape a path.

Vložení SVG do webové stránky

Existuje několik způsobů, jak vložit obrázek SVG na webovou stránku. Prvním z nich je jednoduché vložení SVG kódu do stránky (s velkým obrázkem se HTML kód stránky stane obrovským a špatně čitelným). U jiných metod musíte nejprve uložit kód SVG do souboru s příponou .svg.

Zde jsou způsoby, jak vložit obrázek SVG na webovou stránku:

přímé vkládání kódu do HTML dokumentu v kontejneru ;
použití souboru SVG jako obrázku na pozadí;
připojení souboru SVG k dokumentu HTML pomocí značek img, vložit, objekt A iframe;
připojení souboru SVG k dokumentu PHP pomocí funkce zahrnout.

1. Přímé vložení kódu SVG do webového dokumentu

2. Použití souboru SVG jako obrázku na pozadí

3. Připojení souboru SVG pomocí značky img

4. Připojení souboru SVG pomocí tagu embed

5. Vložení souboru SVG pomocí tagu object

6. Připojení souboru SVG pomocí značky iframe

7. Vložení souboru SVG pomocí funkce include

Složitá trajektorie

Určeno značkou . Je to nejuniverzálnější z prvků SVG. Umožňuje vytvářet libovolné tvary. Tvar postavy je určen atributy d, jehož hodnota je sada speciálních příkazů. Tyto příkazy mohou být psány jak velkými, tak malými písmeny. Velká písmena znamenají, že je použito absolutní umístění, zatímco malá písmena označují relativní umístění.

Příkazy, které určují trajektorii a směr složené čáry

M, m	výchozí bod Mx, y
L, l	Přímý segment Lx, y
H, h	Vodorovná čára Hx, y nebo hx
V, v	Svislá čára Vx, y nebo vy
A,a	Oblouk elipsy Arx,ry-osa x-rotace velký oblouk-vlajka,sweep-flag x,y rx, ry– poloměry oblouku elipsy; rotace osy x– úhel natočení oblouku vzhledem k ose X; velký oblouk-vlajka– jestliže (=1), pak se postaví větší část oblouku, jestliže (=0) – menší část; sweep-flag– jestliže (=1), pak je oblouk postaven ve směru hodinových ručiček, jestliže (=0) – proti směru hodinových ručiček; x, y– souřadnice koncový bod oblouky.
C, c	Kubická Bezierova křivka Cx1,y1x2,y2x,y x1, y1– souřadnice prvního kontrolního bodu; x2, y2 x, y
S, s	Hladká kubická Bézierova křivka Sx2,y2 x,y x2, y2– souřadnice druhého kontrolního bodu; x, y První kontrolní bod je zrcadlovým obrazem druhého kontrolního bodu.
Q, q	Kvadratická Bezierova křivka Qx1,y1x,y x1, y1– souřadnice kontrolního bodu; x, y– souřadnice koncového bodu křivky.
T,t	Hladká kvadratická Bezierova křivka Qx1,y1x,y x, y– souřadnice koncového bodu křivky. Kontrolní bod tohoto příkazu je zrcadlovým obrazem kontrolního bodu předchozího příkazu.
Z, z	Uzavírání cesty

Příklad

VÝSLEDEK:

SVG je obrázkový formát pro vektorovou grafiku. Doslova nejde o nic jiného než o škálovatelnou vektorovou grafiku. To znamená, že přesně s tím pracujete v Adobe Illustratoru. Použití SVG při vývoji webu je poměrně snadné, ale existují některé funkce, které stojí za zvážení.

K čemu se používá SVG?

Malá velikost souboru, který se dobře komprimuje
Škálování na libovolnou velikost bez ztráty kvality
Na retina displejích vypadá skvěle
Plná kontrola designu v interaktivitě a filtrech

Pojďme si něco nakreslit pro nadcházející práci v Adobe Illustratoru. Vezměme si ptáka Kiwi:

Upozorňujeme, že plátno je oříznuto přesně podél okraje obrazu. Plátno SVG je konstruováno naprosto identicky jako PNG nebo JPG. Soubor můžete uložit přímo z Adobe Illustratoru jako soubor SVG.

Jakmile soubor uložíte, objeví se další dialogové okno s možnostmi SVG. Abych byl upřímný, o všech nastaveních uvedených v tomto okně toho moc nevím. Existuje specifikace pro SVG profily, takže pokud máte zájem, můžete si ji přečíst. Zjistil jsem, že SVG 1.1 funguje skvěle.

Skvělé je, že můžete buď kliknout na OK a uložit soubor, nebo kliknout na tlačítko „SVG Code...“ a otevře se textový editor s kódem SVG.

Obě metody mohou být užitečné.

Použití SVG jako značky img

V Illustratoru se ukázalo, že naše plátno je 612px ✕ 502px.

Jak velký bude obrázek na stránce, je jen na vás. Velikost obrázku můžete změnit definováním vlastností šířky a výšky, přesně stejným způsobem jako u PNG nebo JPG. Zde je příklad:

Podívejte se na toto pero!

Jak vytvořit SVG v různých prohlížečích

Při používání SVG tímto způsobem si musíte být vědomi podpory různých prohlížečů. SVG funguje v podstatě všude kromě IE8 a nižších, stejně jako Android 2.3 a nižší.

Pokud potřebujete používat SVG, ale zároveň potřebujete podporu z výše uvedených prohlížečů, existuje několik možností, jak problém vyřešit. K vyřešení tohoto problému jsem použil několik technik v různých projektech.

Jedním ze způsobů, jak zkontrolovat podporu SVG, je Modernizr, pomocí kterého změníte cestu src:

If (!Modernizr.svg) ( $(".logo img").attr("src", "images/logo.png"); )

David Bushell přišel s velmi snadným alternativní způsob ale obsahuje javascript v označení:

Pomoci může i služba SVGeezy. Jak budeme pokračovat v tomto článku, podíváme se na mnoho různých zálohovací metody pro podporu SVG.

Použití SVG jako obrázku na pozadí

Podobně jako u značky img lze SVG použít jako obrázek na pozadí:

Logo Kiwi Corp ( display: block; text-odsazení: -9999px; šířka: 100px; výška: 82px; background: url(kiwi.svg); background-size: 100px 82px; )

Všimněte si, že nastavujeme velikost pozadí tak, aby byla přesně stejná jako velikost prvku. To se musí udělat, protože jinak bychom viděli malou nejlepší část původní obrázek. Tato čísla zohledňují původní proporce obrazu. Jako hodnoty můžete také použít velikost pozadí klíčová slova, například obsahovat, takže obrázek zcela zabírá celý prvek.

Použití SVG jako obrázku na pozadí ovlivňuje podporu prohlížeče, ale obecně je vše stejné jako při použití značky img.

Modernizr nám zde může pomoci ještě více efektivní způsob než v případě img. Jde o to, jestli vyměníš obrázek na pozadí s podporovaným formátem, pak bude proveden pouze jeden HTTP požadavek místo dvou, jako je tomu u img. Modernizr přidá název třídy „no-svg“. HTML tag pokud prohlížeč nepodporuje SVG:

Main-header ( background: url(logo.svg) no-repeat left horní; background-size: include; ) .no-svg .main-header ( background-image: url(logo.png); )

Pokud máte potíže s použitím výše uvedených dvou způsobů použití SVG, níže jsou další způsoby, jak rozmístit vektorovou grafiku.

Pomocí „inline“ SVG

Výše bylo zmíněno, že při ukládání obrázku ve formátu SVG můžete pomocí editoru Illustrator získat správný kód SVG (soubor můžete také otevřít pomocí textový editor a zkopírujte tento kód). Tento kód můžete zkopírovat do svého HTML a SVG se vykreslí úplně stejně jako pomocí img.

To může být užitečné, protože obrázek obrázku přichází spolu s kódem v dokumentu a nevyžaduje požadavek HTTP. Jinými slovy, výhody jsou stejné jako při použití datových URI. Existují však i nevýhody. Vložením rovného SVG kódu začne dokument vypadat jako velký, nafouklý kus svinstva.

Existuje také možnost vložit SVG na straně serveru:

SVG optimalizace

Adobe Illustrator ve výchozím nastavení neprovádí optimalizační akce na výsledném obrazu SVG. Poskytuje DOCTYPE a poznámky, a to všechno je do značné míry odpad. SVG je ve výchozím nastavení docela lehké, ale proč ho ještě nezmenšit? Peter Collingridge poskytl online nástroj optimalizovat SVG Optimiser. Pomocí této služby můžete nahrávat starý soubor a získejte optimalizovaný nový.

Pokud chcete více hardcore - žádný problém, zde je nástroj pro optimalizaci SVG pomocí javascriptového nástroje Node JS na straně serveru https://github.com/svg/svgo

SVG styl

Podívejte se, jak je SVG podobné HTML? Je to proto, že oba jsou data XML. V našem návrhu jsou dva prvky, které tvoří základ, jsou to elipsa a cesta. Přes HTML kód jim můžeme snadno specifikovat třídy.

Nyní můžeme tyto prvky ovládat pomocí vlastního SVG CSS. Toto CSS nemusí být přímo vložené do SVG, lze jej umístit naprosto kamkoli. Vezměte prosím na vědomí, že prvky SVG mají speciální sadu stylů, které jsou vytvořeny speciálně pro práci s vektorovou grafikou. Například není použita obvyklá barva pozadí, ale výplň. I když některé běžné styly také fungují, například:hover.

Kiwi ( fill: #94d31b; ) .kiwi:hover ( fill: #ace63c; )

SVG má zábavné filtry. Například rozmazání:

...

V případě potřeby to pak můžete použít v css:

Ground:hover ( filter: url(#pictureFilter); )

Co se stalo:

Podívejte se na toto pero!

Podpora „inline“ SVG v prohlížečích

Seznam prohlížečů, které podporují tento režim SVG displeje si můžete prohlédnout zde http://caniuse.com/#feat=svg-html5. Opět chybí podpora v IE8 a Androidu 2.3.

Jedna ze záložních možností pro tento typ SVG:

...

Poté znovu použijeme Modernizr:

Logo-fallback ( display: none; /* Ujistěte se, že má stejnou velikost jako SVG zabírá */ ) .no-svg .logo-fallback ( background-image: url(logo.png); )

Použití SVG jako objektu

Pokud vám použití „inline“ SVG nevyhovuje (mějte na paměti, že tato možnost má své nevýhody, jako je nedostatek mezipaměti), můžete SVG svázat s objektem a poté jej změnit pomocí css:

Pro podporu napříč prohlížeči používáme Modernizr:

No-svg .logo ( šířka: 200px; výška: 164px; obrázek na pozadí: url(kiwi.png); )

Tato možnost funguje skvěle s ukládáním do mezipaměti a má největší podporu prohlížeče ze všech výše uvedených. Ale jednat s pomocí CSS pro takový objekt budete muset psát styly přímo do souboru SVG.

...

Použití dat URI je způsob, jak snížit váhu SVG. Mobilefish.com poskytuje pro tento účel online optimalizační nástroj. Stačí vložit obsah vašeho SVG souboru a vyplnit formulář, poté se výsledek zobrazí v textovém poli, které lze zkopírovat. Vypadá to takto:

Tento kód můžete použít kdekoli! Například:

Logo ( pozadí: url(data:image/svg+xml;base64,); )

A mimochodem, pokud máte inline styl v SVG, který je před base64, bude fungovat, pokud jej použijete jako objekt!