Škálovateľná vektorová grafika v HTML5. Vkladanie grafických obrázkov Svg HTML Príklady

.

Tag má povinný atribút src , ktorého hodnota je absolútna alebo relatívna cesta k obrázku:

Pre Tag k dispozícii sú nasledujúce atribúty:

Tabuľka 1. Atribúty značiek

Atribút	Popis, akceptovaná hodnota
alt	Atribút alt pridá k obrázku alternatívny text. Zobrazuje sa na mieste, kde sa obrázok zobrazuje pred načítaním alebo keď je grafika zakázaná, a tiež sa zobrazuje ako popis, keď umiestnite kurzor myši na obrázok. Syntax: alt="(!JAZYK:popis obrázka" . !}
crossorigin	Atribút crossorigin vám umožňuje načítať obrázky zo zdrojov z inej domény pomocou požiadaviek CORS. Obrázky nahrané na plátno pomocou požiadaviek CORS možno znova použiť. Povolené hodnoty: anonymný – Požiadavka krížového pôvodu sa uskutočňuje pomocou hlavičky HTTP a neodovzdávajú sa žiadne poverenia. Ak server neposkytne prihlasovacie údaje serveru, z ktorého sa požaduje obsah, obraz bude poškodený a jeho použitie bude obmedzené. use-credentials – požiadavka na krížový pôvod sa odošle s odovzdanými povereniami. Syntax: crossorigin="anonym" .
výška	Atribút height určuje výšku obrázka. Môže byť špecifikované v px alebo % . Syntax: výška: 300px .
ismap	Atribút ismap označuje, že obrázok je súčasťou obrázku mapy umiestnenej na serveri (obrázok mapy je obrázok s oblasťami, na ktoré sa dá kliknúť). Keď kliknete na obrázok mapy, súradnice sa odošlú na server ako reťazec dopytu URL. Atribút ismap je povolený iba v prípade, že prvok je dieťaťom živlu s platným atribútom href. Syntax: ismap .
longdesc	Webová adresa rozšíreného popisu obrázka s vyplnením atribútu alt. Syntax: longdesc="http://www.example.com/description.txt" .
src	Atribút src určuje cestu k obrázku. Syntax: src="kvetina.jpg" .
veľkosti	Nastaví veľkosť snímky v závislosti od nastavení zobrazenia. Funguje iba vtedy, ak je nastavený atribút srcset. Hodnota atribútu je jeden alebo viac reťazcov oddelených čiarkami.
srcset	Vytvorí zoznam zdrojov obrazu, ktoré sa vyberú na základe rozlíšenia obrazovky. Môže byť použitý s alebo namiesto atribútu src. Hodnota atribútu je jeden alebo viac reťazcov oddelených čiarkou.
mapu použitia	Atribút usemap definuje obrázok ako obrázkovú mapu. Hodnota musí začínať znakom #. Hodnota je spojená s hodnotou atribútu name alebo id značky
šírka	Atribút width určuje šírku obrázka. Môže byť špecifikované v px alebo % . Syntax: šírka: 100 % .

1.1. Adresa obrázka

Adresu obrázka je možné zadať celú (absolútnu URL), napríklad:
url (http://anysite.ru/images/anyphoto.png)

Alebo cez relatívnu cestu z dokument alebo koreňový adresár miesto:
url(../images/anyphoto.png) — relatívna cesta z dokumentu,
url(/images/anyphoto.png) je relatívna cesta z koreňového adresára.

Interpretuje sa to takto:
../ - znamená prejsť o úroveň vyššie, do koreňového adresára,
obrázky/ - prejdite do priečinka s obrázkami,
anyphoto.png – ukazuje na súbor obrázka.

1.2. Rozmery obrázka

Bez nastavenia rozmerov obrázka sa kresba zobrazí na stránke v skutočnej veľkosti. Rozmery obrázka môžete upraviť pomocou atribútov width a height. Ak je nastavený iba jeden z atribútov, druhý sa vypočíta automaticky, aby sa zachovali proporcie obrázka.

1.3. Formáty grafických súborov

formát JPEG (Spoločná skupina fotografických expertov). Obrázky JPEG sú ideálne pre fotografie, môžu obsahovať milióny rôznych farieb. Obrázky sa komprimujú lepšie ako GIF, ale text a veľké plochy plných farieb môžu byť škvrny.

vo formáte GIF (Formát výmeny grafiky). Ideálne na kompresiu obrázkov, ktoré majú oblasti plnej farby, ako sú logá. GIF vám umožňujú nastaviť jednu z farieb na priehľadnú, vďaka čomu môže pozadie webovej stránky presvitať cez časť obrázka. GIFy môžu obsahovať aj jednoduché animácie. GIFy obsahujú iba 256 odtieňov, vďaka čomu obrázky vyzerajú fľakavo a nerealisticky, ako plagáty.

formát PNG (Prenosná sieťová grafika). Obsahuje najlepšie vlastnosti formátov GIF a JPEG. Obsahuje 256 farieb a umožňuje vám urobiť jednu z farieb priehľadnou a zároveň komprimovať obrázky do menšej veľkosti ako súbor GIF.

formát APNG (Animovaná prenosná sieťová grafika). Formát obrázka založený na formáte PNG. Umožňuje ukladať animácie a podporuje aj priehľadnosť.

formát SVG (Škálovateľná vektorová grafika). Výkres SVG pozostáva zo sady geometrických tvarov opísaných vo formáte XML: čiara, elipsa, mnohouholník atď. Podporovaná je statická aj animovaná grafika. Sada funkcií zahŕňa rôzne transformácie, alfa masky, efekty filtrov, možnosť používať šablóny. Veľkosť obrázkov SVG je možné zmeniť bez straty kvality.

formát BMP (Bitmapový obrázok). Predstavuje nekomprimovanú (pôvodnú) bitmapu, ktorej šablónou je obdĺžniková mriežka pixelov. Bitmapový súbor pozostáva z hlavičky, palety a grafických údajov. V hlavičke sú uložené informácie o grafickom obrázku a súbore (hĺbka pixelov, výška, šírka a počet farieb). Paleta je špecifikovaná iba v tých bitmapových súboroch, ktoré obsahujú paletované obrázky (8 bitov alebo menej) a pozostávajú z nie viac ako 256 prvkov. Grafické údaje predstavujú samotný obrázok. Farebná hĺbka v tomto formáte môže byť 1, 2, 4, 8, 16, 24, 32, 48 bitov na pixel.

Formát ICO (ikona systému Windows). Formát ukladania ikon súborov v systéme Microsoft Windows. Ikona systému Windows sa tiež používa ako ikona na webových lokalitách na internete. Je to obrázok tohto formátu, ktorý sa zobrazuje vedľa adresy stránky alebo záložky v prehliadači. Jeden ICO súbor obsahuje jednu alebo viac ikon, pričom veľkosť a farba každej z nich sa nastavuje samostatne. Veľkosť ikony môže byť ľubovoľná, ale najbežnejšie ikony sú štvorcové ikony so stranami 16, 32 a 48 pixelov.

2. Označte

Tag

Pre značku je k dispozícii atribút name, ktorý určuje názov mapy. Hodnota atribútu name pre značku

Prvok

3. Označte

Tag popisuje iba jeden hotspot v rámci obrázkovej mapy na strane klienta. Prvok nemá uzatváraciu značku. Ak sa jeden hotspot prekrýva s druhým, potom bude implementovaný prvý odkaz zo zoznamu hotspotov.

Tabuľka 2. Atribúty značiek

Atribút	Stručný opis
alt	Určuje alternatívny text pre aktívnu oblasť mapy.
súradnice	Určuje polohu oblasti na obrazovke. Súradnice sú uvedené v jednotkách dĺžky a oddelené čiarkami: pre kruh— súradnice stredu a polomer kružnice; pre obdĺžnik— súradnice ľavého horného a pravého dolného rohu; pre mnohouholník— súradnice vrcholov polygónu v správnom poradí, odporúča sa tiež uviesť posledné súradnice rovnaké ako prvé, pre logické dokončenie obrázku.
Stiahnuť ▼	Dopĺňa atribút href a informuje prehliadač, že zdroj by sa mal načítať v momente, keď používateľ klikne na odkaz, namiesto toho, aby ho napríklad vopred otvoril (ako súbor PDF). Pomenovaním atribútu teda pomenujeme načítaný objekt. Je povolené použiť atribút bez určenia jeho hodnoty.
href	Určuje adresu URL odkazu. Je možné zadať absolútnu alebo relatívnu adresu odkazu.
hreflang	Určuje jazyk súvisiaceho webového dokumentu. Používa sa iba v spojení s atribútom href. Akceptované hodnoty sú skratky pozostávajúce z dvojice písmen označujúcich kód jazyka.
médiá	Určuje, pre ktoré typy zariadení bude súbor optimalizovaný. Hodnota môže byť akýkoľvek mediálny dopyt.
rel	Doplní atribút href informáciami o vzťahu medzi aktuálnym dokumentom a prepojeným dokumentom. Akceptované hodnoty: alternatíva – odkaz na alternatívnu verziu dokumentu (napríklad stránku na tlač, preklad alebo zrkadlo). autor – odkaz na autora dokumentu. záložka je trvalá adresa URL používaná pre záložky. help — odkaz na pomoc. licencia – odkaz na informácie o autorských právach pre tento webový dokument. next/prev – označuje vzťah medzi jednotlivými URL. Prostredníctvom tohto označenia môže Google určiť, že obsah týchto stránok je prepojený v logickom poradí. nofollow - zakáže vyhľadávaču sledovať odkazy na tejto stránke alebo na konkrétnom odkaze. noreferrer – označuje, že pri sledovaní odkazu by prehliadač nemal odosielať hlavičku HTTP požiadavky (Referrer), ktorá obsahuje informáciu o tom, z ktorej stránky návštevník stránky prišiel. prefetch – označuje, že cieľový dokument by sa mal uložiť do vyrovnávacej pamäte, t.j. Prehliadač na pozadí načíta obsah stránky do svojej vyrovnávacej pamäte. vyhľadávanie Označuje, že cieľový dokument obsahuje vyhľadávací nástroj. tag – Určuje kľúčové slovo pre aktuálny dokument.
tvary	Určuje tvar aktívneho bodu na mape a jeho súradnice. Môže nadobudnúť nasledujúce hodnoty: rect je obdĺžniková aktívna oblasť; kruh - aktívna oblasť vo forme kruhu; poly - aktívna plocha vo forme mnohouholníka; predvolené — hotspot zaberá celú oblasť obrázka.
cieľ	Určuje, kde sa dokument načíta po kliknutí na prepojenie. Nadobudne nasledujúce hodnoty: _self - stránka sa načíta do aktuálneho okna; _blank - stránka sa otvorí v novom okne prehliadača; _parent - stránka sa načíta do nadradeného rámca; _top – Stránka sa načíta v úplnom okne prehliadača.
typu	Určuje typ MIME súborov odkazov, t.j. rozšírenie súboru.

4. Príklad vytvorenia obrázkovej mapy

1) Zdrojový obrázok označíme do aktívnych oblastí požadovaného tvaru. Súradnice oblasti je možné vypočítať pomocou programu na spracovanie fotografií, napr. Adobe Photoshop alebo Maľovať.

Ryža. 1. Príklad obrázkového označenia na vytvorenie mapy

2) Nastavte názov mapy pridaním k značke

Jpg" alt="(!JAZYK:foto_kvetov" width="680" height="383" usemap="#flowers"> !}
Ryža. 2. Ukážka tvorby obrázkovej mapy, keď kliknete na kvet, prejdete na stránku s popisom

Vektorová grafika je široko používaná v tlači. Ale pre webové stránky ho môžeme použiť aj s SVG ( Škálovateľná vektorová grafika – škálovateľná vektorová grafika). Podľa Špecifikácia W3.org definuje SVG ako:

Jazyk na popis dvojrozmernej grafiky v XML. SVG umožňuje použitie troch typov objektov: vektorové grafické tvary (napríklad cesty tvorené rovnými čiarami a krivkami), obrázky a text.

Aj keď od augusta 2011 je SVG súčasťou odporúčaní W3C, túto technológiu sa vo webových projektoch prakticky nepoužíva, hoci má oproti bitmapám množstvo výhod. V tejto sérii tutoriálov si predstavíme prácu s prvkami SVG na webových stránkach.

Výhody SVG

Nezávislosť v rozlíšení

Rastrové obrázky sú závislé od rozlíšenia. Pri zmene veľkosti na určité mierky sa grafika stáva neprezentovateľnou. OD vektorová grafika takáto situácia je v zásade nemožná, pretože všetko je reprezentované matematickými výrazmi, ktoré sa automaticky prepočítajú pri zmene mierky a kvalita je zachovaná za akýchkoľvek podmienok.

Zníženie počtu požiadaviek HTTP

SVG možno vložiť priamo do dokumentu HTML pomocou značky svg, takže prehliadač nemusí byť vyzvaný na zobrazenie grafiky. Tento prístup má dobrý vplyv na charakteristiky načítania webovej stránky.

Štýly a skripty

Vloženie so značkou svg tiež uľahčuje úpravu grafiky pomocou CSS. Môžete zmeniť vlastnosti objektu, ako je farba pozadia, priehľadnosť, okraje atď. Podobne možno s grafikou manipulovať pomocou JavaScriptu.

Jednoduchá úprava a animácia

Objekty SVG je možné animovať pomocou CSS alebo JavaScriptu. Môžete tiež upravovať objekty SVG pomocou textový editor.

Menšia veľkosť súboru

SVG má menšiu veľkosť súboru v porovnaní s rastrovou grafikou.

Základné tvary SVG

Podľa špecifikácie vieme nakresliť niekoľko základných tvarov: čiara, lomená čiara, obdĺžnik, kruh, elipsa. Všetky prvky musia byť vložené do značky . Zvážte základné prvky podrobne.

Linka

Element sa používa na nakreslenie čiary v SVG . Nakreslí segment, pre ktorý musia byť definované dva body: začiatok a koniec.

Začiatok segmentu je definovaný atribútmi x1 a y1 a koncový bod je definovaný súradnicami v atribútoch x2 a y2.

Existujú aj dva ďalšie atribúty (stroke a stroke-width), ktoré sa používajú na definovanie farby a šírky čiary.

Tento objekt je podobný , ale s prvkom Môžete nakresliť viacero čiar naraz.

Prvok Obsahuje atribút bodov, ktorý sa používa na určenie súradníc bodov.

Obdĺžnik vykreslený s prvkom . Musíme určiť šírku a výšku.

Ak chcete nakresliť kruh, použite prvok . V nasledujúcom príklade vytvoríme kruh s polomerom 100 , ktorý je definovaný v atribúte r:

Prvé dva atribúty cx a cy definujú súradnice stredu. Vo vyššie uvedenom príklade sme nastavili obe súradnice na 102. Predvolená hodnota je 0.

Ak chcete nakresliť elipsu, použite prvok . Funguje to rovnako ako kruh, ale polomery x a y môžeme špecificky nastaviť pomocou atribútov rx a ry:

Prvok Zobrazuje mnohostenné tvary, ako je trojuholník, šesťuholník atď. Napríklad:

Použitie editora pre vektorovú grafiku

Vykresľovanie jednoduchých objektov SVG do HTML je jednoduché. Keď sa však zložitosť objektu zvyšuje, táto prax môže viesť k veľkému množstvu práce, ktorú je potrebné vykonať.

Na vektorovú grafiku však môžete použiť ľubovoľný editor (napr. Adobe Illustrator alebo inkscape) na vytváranie objektov. Ak takýto nástroj vlastníte, je oveľa jednoduchšie do nich nakresliť potrebné objekty, ako kódovať grafiku do HTML tagu.

Príkazy pre vektorovú grafiku môžete kopírovať zo súboru do dokumentu HTML. Alebo môžete súbor .svg vložiť pomocou jedného z nasledujúcich prvkov: embed , iframe a object .

Výsledok bude rovnaký.

Podpora prehliadača

SVG má dobrá podpora vo väčšine moderné prehliadače s výnimkou IE verzie 8 a staršej. Úlohu však možno vyriešiť pomocou knižnice JavaScript. Na uľahčenie práce môžete použiť nástroj ReadySetRaphael.com na konverziu kódu SVG do formátu Raphael.

Najprv načítame a zahrnieme knižnicu do dokumentu HTML. Potom načítame súbor .svg, skopírujeme a po načítaní vložíme výsledný kód do funkcie:

Do značky body umiestnime nasledujúci prvok div s ID rsr .

A všetko je pripravené.

V ďalšom návode zo série sa pozrieme na to, ako štýlovať objekty SVG v CSS.

Vektorová grafika je široko používaná v tlačených materiáloch. Čo sa týka webovej stránky, aj tu môžeme využiť vektorovú grafiku prostredníctvom SVG alebo Scalable Vector Graphics (škálovateľná vektorová grafika). V oficiálnej špecifikácii W3.org je to opísané takto:

Jazyk na popis dvojrozmernej grafiky pomocou XML. SVG nám umožňuje použiť tri typy grafické objekty: Vektorové grafické tvary (napríklad cesty vytvorené z priamych 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 bitmapy.

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 je vytvorená 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ť ich na ľubovoľnú veľkosť a nestratiť kvalitu.

Zníženie požiadaviek HTTP

Škálovateľnú vektorovú grafiku možno 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 so značkou svg nám tiež umožní štýl grafiky, kedy Pomocník CSS. Vlastnosti objektu, ako je farba pozadia, nepriehľadnosť, okraje a podobne, môžeme meniť rovnakým spôsobom ako v HTML. Grafiku vieme ovládať aj cez javascript.

Schopnosť animovať a upravovať

Objekt SVG je možné animovať pomocou prvku animácie alebo pomocou 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šiu veľkosť súboru ako rastrová grafika.

Kreslenie jednoduchých tvarov pomocou SVG

Podľa špecifikácie môžeme pomocou SVG kresliť ako polygóny, kruhy, čiary alebo elipsy a aby prehliadač generoval škálovateľnú vektorovú grafiku, všetky tieto grafické prvky musia byť umiestnené v tagoch ​​„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: začiatku a konca.

Ako vidíte vyššie, súradnica poč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.

Sú tu aj ďalšie dva atribúty: zdvih a šírka-ťahu , ktoré sú zodpovedné za farbu a šírku okraja. Na druhej strane môžeme tieto atribúty definovať aj v inline štýle, a to takto:

Style="stroke-width:1; stroke:rgb(0,0,0);"
a dá nám to rovnaký výsledok.

*

prerušovaná čiara

Je to veľmi podobné ako „čiara“, ale pomocou prvku „polyline“ môžeme nakresliť viacero č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, len pomocou prvku „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ú nastavené, ich predvolená hodnota je 0.

*

Elipsa

Elementom „elipsa“ môžeme kresliť elipsy. Tu všetko funguje v podstate rovnakým spôsobom ako pri kružnici, ale tentoraz môžeme pomocou atribútov rx a ry ovládať polomer čiary x a polomer čiary y oddelene.

*

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 vyhovovať.

Našťastie, ako sme spomenuli 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 vložiť aj samotný súbor svg pomocou jedného z nasledujúcich prvkov: embed, iframe, object.

Výsledok bude podobný.

AT tento príklad používali sme s .

*

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

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

Ak chcete začať, stiahnite si 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=function() (
//sem je Raphaelov kód
}
Do značky body vložte nasledujúci div s atribútom id rsr.

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

Na záver

Takže to sú základy SVG. Dúfame, že teraz tejto téme trochu rozumiete. Toto je jeden z lepšie spôsoby 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: nespoliehajme sa na rozlíšenie)
* (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.