Pažvelkite į „Scalable Vector Graphics“ (SVG)
Vektorinė grafika plačiai naudojama spausdinimo terpėje. Svetainėje taip pat galime pridėti vektorinę grafiką su SVG arba Scalable Vector Graphic. Nurodydamas W3.org oficialią specifikaciją, SVG apibūdinamas kaip:
Dviejų dimensijų grafikos XML aprašymo kalba. SVG leidžia naudoti trijų tipų ßgrafinius objektus: vektorines grafines formas (pvz., Kelius, susidedančius iš tiesių linijų ir kreivių), vaizdus ir tekstą.
Jis iš tikrųjų buvo nuo 1999 m. Ir nuo 2011 m. Rugpjūčio 16 d. Jis tapo W3C rekomendacija. Vis dėlto SVG vis dar yra nepakankamai panaudota, o naudojant „Vector“, o ne „Bitmap“, yra daug privalumų, kad pateiktumėte grafiką ar vaizdą svetainėje.
SVG privalumai
Naudodamas grafiką tinklalapiuose, SVG siūlo keletą privalumų, palyginti su „Bitmap“, iš kurių kai kurios apima:
Rezoliucija Nepriklausoma
Bitmap / rastrinis grafikas priklauso nuo rezoliucijos - jis yra pastatytas ant pikselių. Pateikta grafika atrodė pixelated, kai ji bus pakeista tam tikru mastelio mastu. Tai neįvyksta vektoriaus grafikai, kuri yra savaime nepriklausoma skiriamoji geba, nes grafika išreiškiama matematine lygtimi keisti bet kokiu mastelio lygiu, išlaikant kokybę, net Retina Display.
HTTP užklausos sumažinimas
SVG galima įterpti tiesiai į HTML dokumentą svg žyma, todėl naršyklėje nereikia pateikti užklausos, kad būtų galima pateikti grafiką. Tai taip pat lemia geresnį svetainės našumo našumą.
Stilius ir scenarijus
Įterpimas tiesiogiai su svg Žyma taip pat leis mums lengvai suformuoti grafiką per CSS. Mes galime pakeisti objekto ypatybes pvz., fono spalva, skaidrumas, sienos ir pan. Taip pat galime manipuliuoti grafika naudojant „JavaScript“.
Gali būti animuotas ir redaguojamas
SVG objektas gali būti animuotas, kai jis naudoja animacijos elementą arba „JavaScript“ biblioteką, pvz., „JQuery“. SVG objektas taip pat gali būti redaguojamas bet kuriuo teksto kodo redaktoriumi arba grafine programine įranga, pvz., „Inkscape“ (kuri yra nemokama) arba „Adobe Illustrator“.
Mažesnis failo dydis
SVG yra mažesnis failo dydis, palyginti su „Bitmap“, kuris turi panašų grafinį vaizdą.
Pagrindinių formų piešimas SVG
Pagal specifikaciją, mes galime padaryti tam tikras pagrindines formas, pvz stačiakampis, apskritimas, linija, elipsė, linija ir daugiakampis su SVG ir norint, kad naršyklė pateiktų SVG grafiką, visi tie grafiniai elementai turi būti įterpti žyma. Daugiau informacijos rasite toliau pateiktuose pavyzdžiuose:
Linija
Piešti linija SVG mes galime naudoti
Kaip matote aukščiau, linijos pradžios taško koordinatė išreiškiama pirmuosius du atributus x1 ir x2, o linijos pabaigos taško koordinatė yra išreikšta y1 ir y2.
Taip pat yra du kiti atributai insultas ir smūgio plotis kurios naudojamos atitinkamai apibrėžti sienos spalvą ir sienos plotį. Arba taip pat galime apibrėžti šiuos atributus pagal inline stilių, pavyzdžiui:
galų gale jis tiesiog daro tą patį.
- Peržiūrėti demonstraciją “Linija”
Polyline
Tai beveik panaši į
taškų atributai, kurie saugo visas linijas sudarančias koordinates.
- Peržiūrėti demonstraciją “Polyline”
Stačiakampis
Taip pat paprasta suformuoti stačiakampį
- Peržiūrėti demonstraciją “Stačiakampis”
Ratas
Taip pat galime piešti ratą su 100 spindulys, apibrėžtas r atributas:
Pirmieji du atributai, cx ir cy apibrėžia apskritimo centrinę koordinates. Pirmiau pateiktame pavyzdyje mes nustatėme 102 tiek x ir y koordinuoti, jei šie atributai nenurodyti, 0 bus laikoma numatytąją vertę.
- Peržiūrėti demonstraciją “Ratas”
Ellipse
Galime padaryti elipsę x linijos spindulys ir y linijos spindulys su rx ir ry atributas;
- Peržiūrėti demonstraciją “Ellipse”
Poligonas
Su
- Peržiūrėti demonstraciją “Poligonas”
Naudojant Vector Graphic Editor
Kaip matote, paprastų objektų piešimas SVG HTML yra gana paprasta. Tačiau, kai objektas tampa sudėtingesnis, ši praktika nebėra ideali ir suteiks jums galvos skausmą.
Laimei, kaip jau minėjome, galime naudoti vektorinį grafinį redaktorių „Adobe Illustrator“ arba „Inkscape“ atlikti darbą. Jei esate susipažinę su šiomis programomis, tikrai yra daug lengviau piešti objektus su savo GUI, o ne koduoti grafiką sau HTML žyma.
Jei dirbate su „Inkscape“, galite išsaugoti savo vektoriaus grafiką kaip paprastą SVG ir atidaryti jį teksto kodų redaktoriuje. Dabar faile turėtumėte rasti SVG kodus. Nukopijuokite visus kodus ir įklijuokite juos į HTML dokumentą.
Taip pat galite įdėti .svg failą per vieną iš šių elementų; įdėkite, iframe ir objektą, pavyzdžiui;
Galiausiai rezultatai bus tokie patys.
Šiame pavyzdyje naudoju šį „Apple iPod“ iš „OpenClipArt.org“.
- Peržiūrėti demonstraciją “„iPod“”
Naršyklės palaikymas
Kalbant apie naršyklės palaikymą, SVG buvo gerai palaikomas visose pagrindinėse naršyklėse, išskyrus IE8 ir anksčiau. Tačiau šį klausimą galima išspręsti naudojant šią „JavaScript“ biblioteką „Raphael.js“. Kad būtų lengviau, mes naudosime šį įrankį „ReadySetRaphael.com“ konvertuoti SVG kodą į „Raphael“ palaikomą formatą. Štai kaip.
Pirmiausia, atsisiųskite ir įtraukite Raphael.js biblioteka į HTML dokumentą. Tada įkelkite .svg failą į svetainę, nukopijuokite ir įklijuokite sugeneruotą kodą į šią apkrovą funkcija;
window.onload = funkcija () // Raphael kodas eina čia
Viduje kūnas žymą, įdėkite šiuos div su rsr id atributas;
Štai taip, baigsite. Patikrinkite pavyzdį iš toliau pateiktos nuorodos.
- Peržiūrėti demonstraciją “Rafaelis”
Galutinės mintys
Taigi tai yra SVG pagrindai. Tikimės, kad dabar jūs teisingai suprasite šį klausimą. Tai geriausias būdas optimizuoti savo svetainę bet kokiam ekrano skiriamumui, net ir tinklainės ekrane.
Kaip visada, jei esate drąsus žmogus, čia pateikiame dar keletą nuorodų ir diskusijų, kad giliau įsitrauktume į šią temą.
- Įvadas į SVG - W3 mokyklas
- Rezoliucija nepriklausoma nuo SVG - Smashing Magazine
- Kodėl nesinaudojate SVG? - „NetTuts“
Dėkojame už skaitymą ir tikimės, kad jums patiko šis pranešimas.
- Peržiūrėti demonstraciją
- Atsisiųsti šaltinį
