Vizualizácia dát pomocou HTML5 Canvas a SVG. Predstavujeme SVG grafiku vektorovú grafiku svg

Väčšina webových stránok obsahuje grafiku. Umožňuje vám farebne a prehľadne prezentovať informácie. V mnohých prípadoch je lepšie ukázať obrázok, ako dávať dlhý textový popis.
Existujú dva spôsoby umiestnenia grafiky na stránku:

• vkladanie jednotlivých obrázkov;
• vyplnenie pozadia obrázkom.

V každom prípade je grafika prevzatá zo súboru.

Grafický obrázok zo súboru grafického formátu sa vloží na stránku pomocou značky (z angličtiny, image - image) s uvedením adresy súboru ako argumentu pre atribút SRC:

Adresa súboru obrázka je buď adresa URL, alebo názov súboru, prípadne s cestou. Ak chcete napríklad zobraziť grafický súbor logotip.jpg, napíšte značku

Na zvýšenie bitovej rýchlosti grafického obrázka v značke môžete použiť atribút (voliteľný) LOWSRC, ktorý berie ako argument adresu grafického súboru. Môžete vytvoriť dva grafické súbory: jeden (napríklad logotip.jpg) obsahuje obrázok s vysokým rozlíšením a druhý (napríklad logotip.gif) obsahuje obrázok s nízkym rozlíšením. Potom značku

Informuje prehliadač, aby si najprv stiahol súbor logotip.gif a potom ho po prijatí nahradil súborom logotip.jpg.
Ďalším spôsobom, ako urýchliť načítanie grafiky, je veľkosť obdĺžnikovej oblasti, do ktorej bude grafika umiestnená, pomocou atribútov WIDTH (šírka) a HEIGHT (výška), meraných v pixeloch. Ak zadáte tieto atribúty, prehliadač najskôr pridelí priestor pre grafiku, pripraví rozloženie dokumentu, zobrazí text a až potom načíta grafiku. Všimnite si, že prehliadač zmenší alebo roztiahne obrázok, aby sa zmestil do rámčekov zadanej veľkosti. Príklad určenia veľkosti obrázka:

Grafika sa zvyčajne používa v spojení s textom, takže vzniká úloha zarovnania textu a grafiky. Táto úloha sa vykonáva pomocou atribútu ZAROVNAŤ tag pomocou rôznych argumentov. Napríklad môžeme chcieť, aby text obtekal obrázok vpravo alebo vľavo. Zvyčajne je obrázok vložený blízko textu, čo môže byť škaredé. Aby ste tomu zabránili, môžete okolo obrázka nastaviť prázdne okraje. Polia sa vytvárajú pomocou atribútov VSPACE pre horný a dolný okraj a NISPACE pre bočné okraje značky ... Argumenty pre tieto atribúty sú špecifikované ako čísla, ktoré určujú veľkosť polí v pixeloch. Ak chcete zrušiť tok textu okolo grafiky, použite značku
.
Nasledujúca značka nastavuje tok grafiky zo súboru logotip.jpg doprava (obrázok bude naľavo od textu):

Ak chcete umiestniť obrázok napravo od textu, potrebujete atribút ZAROVNAŤ priradiť argument SPRÁVNY:

Ak chcete nastaviť polia okolo obrázka, musíte napísať značku takto:

Tu čísla 20 a 10 určujú veľkosti polí.
Zoberme si príklad zdieľania grafiky a textov. Otvorte Poznámkový blok (textový editor Poznámkový blok) Windows. Napíšte do neho HTML kód pomocou vyššie uvedených značiek. Nižšie je uvedený program, ktorý zobrazuje text a grafiku. Ktorýkoľvek zo súborov, ktoré máte, môžete použiť ako grafický súbor. Toto používa súbor logotip.gif.

<Н1>Text sa obtáča okolo grafiky vpravo
Toto je príklad kombinácie textu a grafiky.
Text programu HTML je možné napísať v ľubovoľnom textovom editore. Používa textové značky.

Tento text sa zobrazí s novým odsekom. Na tento účel sme použili špeciálnu značku.

Skúste zmeniť veľkosť okna prehliadača. Všimnite si, ako sa mení rozloženie textu.

Ryža. 657. Text sa obtáča okolo obrázka vpravo

Poskytuje dostatok príležitostí na presné umiestnenie obrázkov (ako aj iných prvkov) na stránke tabuľky a štýlov... O týchto prvkoch HTML sa bude diskutovať neskôr. Môžete napríklad definovať tabuľku bez viditeľných rámov a umiestniť obrázky, texty a ďalšie prvky do buniek tejto tabuľky.

D3 je najužitočnejší, keď sa používa na vytváranie a manipuláciu s vizuálmi založenými na SVG. Kreslenie pomocou div"s a ďalšie prvky HTML sú možné, ale trochu neohrabané a vo všeobecnosti zobrazujú nezrovnalosti v rôznych prehliadačoch. Používanie SVG je spoľahlivejšie, vizuálne konzistentnejšie a rýchlejšie."

Editory vektorovej grafiky ako Illustrator je možné použiť na vytváranie súborov SVG, ale musíme sa naučiť, ako ich vytvárať pomocou kódu.

SVG prvok

Scalable Vector Graphics je textový obrazový formát. Každý obrázok SVG je definovaný pomocou kódu podobného kódu HTML. SVG kód môže byť zahrnutý priamo do HTML dokumentu. Každý webový prehliadač podporuje SVG, s jedinou výnimkou je Internet Explorer 8 a novší. SVG je založené na XML, takže si môžete všimnúť, že prvky, ktoré nemajú koncovú značku, by mali byť samozatváracie. Napríklad:

Predtým, ako budete môcť čokoľvek nakresliť, musíte vytvoriť prvok SVG. Predstavte si prvok SVG ako plátno, na ktorom sú nakreslené všetky vaše vizuály (ako také je SVG koncepčne podobné prvku plátna HTML). Minimálne je dobré nastaviť šírku a výšku pomocou atribútov. šírka a výška, resp. Ak ich nešpecifikujete, SVG sa roztiahne po celej ploche bloku.

Tu je prvok SVG vytvorený pomocou vyššie uvedeného kódu:

Nevidíš ho? Kliknite pravým tlačidlom myši na prázdne miesto vyššie a vyberte Zobraziť kód položky. Váš webový inšpektor by mal ukázať niečo podobné:

Všimnite si, že existuje prvok SVG, ktorý zaberá 500 pixelov horizontálne a 50 pixelov vertikálne.

Upozorňujeme tiež, že prehliadače považujú pixely za predvolenú jednotku merania. Rozmery sme zadali ako 500 a 50, nie 500px a 50px. Môžeme špecifikovať pixel explicitne alebo akúkoľvek inú mernú jednotku, napríklad: em, pt, v, cm a mm.

Jednoduché tvary

Existuje sada tvarov, ktoré môžete umiestniť do prvku SVG. Táto sada obsahuje: rect, kruh, elipsa, riadok, text a cesta.

Ak ste oboznámení s programovaním počítačovej grafiky, spomeniete si, že súradnicový systém založený na pixeloch zvyčajne začína v ľavom hornom rohu a má súradnice bodov (0,0). Zvýšiť NS vyskytujú sa zľava doprava, zvyšujú sa pri- zhora nadol.

0,0 100,20 200,40

rect nakreslí štvorec. Štvorec je daný štyrmi hodnotami: X, r- označte bod ľavého horného rohu; šírka, výška- uveďte šírku a výšku štvorca. Tento štvorec zaberá celý priestor nášho SVG:

kruh nakreslí kruh. Kruh je definovaný tromi rozmermi: cx, cy označujú bod nachádzajúci sa v strede opísanej kružnice, r nastavuje polomer kruhu. Tento kruh sa nachádza v strede nášho SVG, pretože atribút cx("stred-x") je 250. Príklad:

elipsa je nastavený podobne ako kruh, ale predpokladá sa, že polomer je špecifikovaný pozdĺž dvoch osí: pozdĺž NS a podľa pri... Namiesto NS použitie rx, namiesto r - ry.

riadok nakreslí čiaru. Použite x1 a y1 na nastavenie súradníc začiatku čiary a x2 a y2 na nastavenie súradníc konca. Atribút mŕtvica musí nastaviť farbu čiary, inak bude neviditeľná.

text vykreslí text. Použite X na označenie ľavého okraja a r na označenie vertikálnej polohy takzvanej základnej čiary.

ĽahunkéĽahunké

text zdedí štýly písma CSS nadradeného prvku, pokiaľ pre text nešpecifikujete vlastné štýly. Všimnite si, že formátovanie vyššie uvedeného textu je rovnaké ako text popísaný v tomto odseku. Štýly formátovania môžeme prepísať takto:

ĽahunkéĽahunké

Všimnite si tiež, že keď akýkoľvek vizuálny prvok narazí na hranicu prvku SVG, bude orezaný. Pri používaní buďte opatrní text aby vaše textové riadky neboli orezané. Môžete vidieť, čo sa stane s textom nastavením základnej čiary (t.j. pri) až 50, rovnako ako výška SVG:

ĽahunkéĽahunké

cesta kreslí niečo zložitejšie ako tvary opísané vyššie (napríklad silueta krajín na geomapách) a bude popísaná samostatne. Teraz budeme pracovať s jednoduchými tvarmi.

Štýlové prvky SVG

V predvolenom nastavení má každý prvok SVG čiernu výplň a žiadne orámovanie. Ak chcete viac, musíte na svoj prvok použiť štýly. Bežné vlastnosti SVG sú uvedené nižšie:

• vyplniť- naplniť. Hodnota farby. Rovnako ako v CSS je možné farbu zadať niekoľkými spôsobmi:
  • podľa názvu: oranžová;
  • hodnota v šestnástkovej sústave: # 3388aa, # 38a;
  • hodnota vo formáte RGB: rgb (10, 150, 20);
  • hodnota vo formáte RGBA: rgba (10, 150, 20, 0,5).
• mŕtvica- rám. Hodnota farby.
• šírka zdvihu- šírka rámu (zvyčajne v pixeloch).
• nepriehľadnosť- transparentnosť. Číselná hodnota v rozsahu od 0,0 (úplne priehľadná) do 1,0 (úplne viditeľná).

S text môžete použiť aj nasledujúce vlastnosti:

• font-family
• veľkosť písma

Existujú dva spôsoby, ako použiť štýly na prvky SVG: buď priamo štýl v rámci prvku ako jeho atribútov, alebo prostredníctvom pravidiel CSS.

Nižšie sú uvedené niektoré vlastnosti CSS nastavené priamo na prvku kruh:

Mohli by sme to urobiť iným spôsobom: nepíšte atribúty štýlu, ale špecifikujte triedu štýlu (rovnako ako bežný prvok HTML):

a potom pridajte vyplniť, mŕtvica a šírka zdvihu parametre v štýle CSS požadovanej triedy:

Tekvica (výplň: žltá; ťah: oranžový; šírka ťahu: 5;)

Druhý prístup má niekoľko zjavných výhod:

1. Triedu môžete deklarovať raz a použiť ju na mnoho prvkov.
2. CSS sa číta ľahšie ako atribúty v rámci prvkov.
3. Z týchto dôvodov je druhý prístup jednoduchší na údržbu a rýchlejšie sa aplikuje.

Používanie CSS na úpravu SVG však môže byť pre niektorých mätúce. vyplniť, mŕtvica, šírka zdvihu koniec koncov, nie vlastnosti CSS (najbližšie ekvivalenty CSS sú farba pozadia a hranica). Aby ste si zapamätali, ktoré pravidlá šablóny štýlov sú špecifikované pre prvky SVG, odporúčame ich zahrnúť svg do selektora CSS:

Svg .pumpkin (/ * ... * /)

Prekrytie a poradie ich kreslenia

V SVG neexistujú žiadne vrstvy ako také a žiadny koncept hĺbky. SVG nepodporuje vlastnosť CSS z-index týmto spôsobom môžu byť tvary usporiadané v dvojrozmernom priestore.

A napriek tomu, ak nakreslíte niekoľko tvarov, prekrývajú sa:

Poradie, v akom sú prvky uvedené v kóde, určuje ich hĺbku. Fialový štvorec je v kóde uvedený ako prvý, preto sa kreslí ako prvý. Ďalej sa cez fialovú nakreslí modrý štvorec, potom sa cez modrú a fialovú nakreslí zelený štvorec atď.

Myslite, že tvary SVG sú nakreslené na plátne. Farba, ktorá sa aplikuje neskôr ako ostatné, vyplní zvyšok farieb, pričom je „vpredu“.

Tento aspekt poradia kreslenia sa stáva dôležitým, keď máte viacero vizuálov, ktoré by nemali byť ničím zakryté. Môžete mať napríklad označenia osí alebo hodnôt osí, ktoré sa zobrazujú v bodovom grafe. Osi a štítky musia byť pridané do SVG na konci tak, aby sa objavili pred zvyškom prvkov a boli viditeľné.

Transparentnosť

Transparentnosť môže byť užitočná, keď sa vaše prvky vizualizácie prekrývajú, ale musia byť viditeľné všetky, alebo keď chcete niektoré prvky zvýrazniť, ale iné urobiť neviditeľnejšími.

Existujú dva spôsoby, ako použiť priehľadnosť: použiť farbu RGB s alfa kanálom alebo nastaviť vlastnosť nepriehľadnosťčíselná hodnota.

môžeš použiť rgba () všade tam, kde potrebujete zadať farbu, napríklad v atribútoch vyplniť a mŕtvica. rgba () očakáva, že mu dáte 3 hodnoty v rozsahu od 0 do 255 pre červenú, zelenú a modrú farbu, plus kanál alfa (priehľadnosť) v rozsahu od 0,0 do 1,0.

Všimnite si, že s metódou rgba (), použije sa transparentnosť vyplniť a mŕtvica bez ohľadu na atribúty. Výplň nasledujúcich kruhov je 75 % priehľadná a ich okraj je 25 %:

Ak chcete použiť priehľadnosť na celý prvok, musíte nastaviť atribút nepriehľadnosť... Nižšie sú plne viditeľné kruhy:

a toto sú tie isté kruhy s rôznou transparentnosťou:

Môžete použiť aj atribút nepriehľadnosť pre prvok, ktorého farby sú špecifikované vo formáte rgba ()... Keď to urobíte, priehľadnosť sa znásobí. Nižšie uvedené kruhy používajú rovnaké hodnoty farieb RGBA vyplniť a mŕtvica... Prvý prvok nemá nastavené žiadne atribúty nepriehľadnosť a ďalšie dve majú:

Všimnite si, že v treťom kruhu nepriehľadnosť sa rovná 0,2 alebo 20 %. Jeho fialová časť má však priehľadnosť 75 %. Takže fialová časť je priehľadná 0,2 x 0,75 = 0,15 alebo 15 %.

Vektorová grafika je široko používaná v tlačených materiáloch. Na stránke môžeme použiť aj vektorovú grafiku cez SVG alebo Scalable Vector Graphics. Oficiálna špecifikácia W3.org to popisuje takto:

Jazyk na popis 2D grafiky pomocou XML. SVG nám umožňuje používať tri typy grafických objektov: vektorové grafické tvary (napríklad cesty pozostávajúce z rovných a zakrivených čiar), obrázky a text.

Technológia je dostupná od roku 1999 a 16. augusta 2011 bola zaradená do zoznamu odporúčaní W3C. SVG sa však stále veľmi nepoužíva, napriek mnohým výhodám použitia vektorovej grafiky namiesto rastrovej grafiky.

Výhody škálovateľnej vektorovej grafiky

Pokiaľ ide o použitie grafiky na webových stránkach, škálovateľná vektorová grafika nám ponúka niekoľko výhod oproti rastrovej grafike, medzi ktoré patria:

Nezávislosť v rozlíšení

Rastrová grafika (alebo bitová mapa) závisí od rozlíšenia, pretože sa vytvára pomocou pixelov. Ak sa takýto grafický prvok zväčší, veľké štvorce sa okamžite stanú viditeľnými. Pri vektorovej grafike sa to nestane, pretože nezávisí od rozlíšenia, ale je postavená na matematických výpočtoch, čo nám umožňuje zväčšiť ju na ľubovoľnú veľkosť a nestratiť kvalitu.

Zníženie požiadaviek HTTP

Škálovateľnú vektorovú grafiku je možné vložiť priamo do dokumentu HTML pomocou značky svg, takže prehliadač nepotrebuje ďalšiu požiadavku na grafiku. Má tiež pozitívny vplyv na výkonnosť webových stránok.

Styling a scenár

Priama integrácia pomocou značky svg nám tiež umožní štylizovať grafiku pomocou CSS. Parametre objektu ako farba pozadia, nepriehľadnosť, okraje atď. môžeme meniť rovnakým spôsobom ako v HTML. S grafikou môžeme manipulovať aj pomocou javascriptu.

Možnosti animácií a úprav

Objekt SVG je možné animovať pomocou prvku animácie alebo prostredníctvom knižnice JS, ako je jQuery. Objekt SVG je možné upravovať aj pomocou ľubovoľného textového editora alebo grafického softvéru, ako je (zadarmo) alebo.

Menšia veľkosť súboru

SVG má menšie veľkosti súborov v porovnaní s rastrovou grafikou.

Ako kresliť jednoduché tvary pomocou SVG

Podľa špecifikácie môžeme pomocou SVG kresliť ako polygóny, kruhy, čiary alebo elipsy a aby prehliadač mohol generovať škálovateľnú vektorovú grafiku, všetky tieto grafické prvky musia byť umiestnené v značkách svg. Pozrime sa na príklady nižšie:

Linka

Aby sme mohli nakresliť čiaru pomocou SVG, môžeme použiť prvok "line". Tento prvok sa používa na nakreslenie jednej priamky, takže bude pozostávať iba z dvoch bodov: počiatočného a koncového bodu.

Ako vidíte vyššie, súradnica začiatočného bodu čiary je špecifikovaná v prvých dvoch atribútoch x1 a x2 a súradnica koncového bodu je špecifikovaná v atribútoch y1 a y2.

Existujú aj dva ďalšie atribúty, zdvih a šírka-ťahu, ktoré ovládajú farbu a šírku okraja. Na druhej strane môžeme tieto atribúty v štýle inline definovať aj takto:

Štýl = "šírka-ťahu: 1; zdvih: rgb (0,0,0);"
a dá nám to rovnaký výsledok.

*

Prerušená čiara

Tu je všetko veľmi blízko k "line", ale s prvkom "polyline" môžeme nakresliť niekoľko čiar namiesto jednej. Tu je príklad:

Element polyline má bodové atribúty, ktoré obsahujú všetky súradnice čiar.

*

Obdĺžnik

Obdĺžnik nakreslíme rovnako jednoducho, stačí použiť prvok „rect“. Potrebujeme len špecifikovať šírku a výšku:

*

Kruh

Kruh môžeme nakresliť aj prvkom „kruh“. V tomto príklade nakreslíme kruh s polomerom 100, ktorý je definovaný atribútom r:

Prvé dva atribúty, cx a cy, definujú stredovú súradnicu kruhu. Vo vyššie uvedenom príklade sme nastavili 102 pre súradnice x aj y. Ak tieto atribúty nie sú špecifikované, potom budú predvolene 0.

*

Elipsa

Elementom „elipsa“ môžeme kresliť elipsy. Tu všetko funguje v podstate rovnako ako pri kružnici, ale tentoraz môžeme samostatne ovládať polomer priamky x a polomer priamky y pomocou atribútov rx a ry.

*

Polygón

Pomocou prvku "polygon" môžeme kresliť mnohouholníky, tvary s viacerými uhlami a stranami ako trojuholník, osemuholník. Príklad:

*

Pomocou editora vektorovej grafiky

Ako vidíte, kreslenie jednoduchých tvarov pomocou SVG v HTML je celkom jednoduché. Ak však potrebujeme zložitejší objekt, potom nám tento spôsob už nebude fungovať.

Našťastie, ako sme uviedli vyššie, na túto prácu môžeme použiť vektorový grafický editor, ako je Adobe Illustrator alebo Inkscape. Ak ste oboznámení s týmto softvérom, môžete jednoducho kresliť objekty pomocou užívateľsky prívetivého rozhrania namiesto použitia kódu HTML.

Alebo môžete tiež vložiť samotný súbor svg pomocou jedného z nasledujúcich prvkov: embed, iframe, object.

Výsledok bude podobný.

V tomto príklade sme použili c.

*

Podpora prehliadača pre škálovateľnú vektorovú grafiku

Pokiaľ ide o podporu prehliadača, škálovateľná vektorová grafika je už dobre podporovaná, s výnimkou IE8 a starších. To sa však dá opraviť pomocou knižnice javascriptu tzv. Aby sme to uľahčili, použijeme nástroj na konverziu nášho kódu SVG do formátu podporovaného programom Raphael.

Najprv si stiahnite a zahrňte knižnicu Raphael.js do kódu HTML. Potom nahrajte súbor svg na stránku, skopírujte a prilepte vygenerovaný kód do nasledujúcej funkcie načítania:

Window.onload = funkcia () (
// Raphaelov kód ide sem
}
Do značky body vložte nasledujúci div s atribútom id rsr.

A tu sme skončili! Pozrite si príklad uvedený v odkaze nižšie.

Na záver

Takže toto sú základy SVG. Dúfame, že teraz tejto téme trochu rozumiete. Toto je jeden z najlepších spôsobov, ako optimalizovať výkon vašich stránok a zároveň poskytovať grafiku, ktorá sa dá jasne zobraziť aj na obrazovkách Retina.

Ako obvykle, ak ste zvedaví, pripravili sme pre vás malý výber doplnkových článkov.

* (Úvod do SVG)
* (SVG: nezávisí od rozlíšenia)
* (Prečo nepoužiť SVG?)

Ďakujeme za prečítanie a dúfame, že vám tento článok pomôže!

Pozor! Nemáte povolenie na zobrazenie skrytého textu.

HTML obrázky sa pridávajú na webové stránky pomocou značky ... Vďaka použitiu grafiky sú webové stránky vizuálne príťažlivejšie. Obrázky pomáhajú lepšie vyjadriť podstatu a obsah webového dokumentu.

Používanie značiek HTML

Vkladanie obrázkov do HTML dokumentu

1. Označte

Element predstavuje obrázok a jeho záložný obsah, ktorý sa pridáva pomocou atribútu alt. Vzhľadom k tomu, prvok je inline, odporúča sa umiestniť ho do prvku bloku, napr.

Alebo