D3 yra naudingiausias, kai naudojamas kuriant ir manipuliuojant SVG pagrįstu vaizdu. Piešimas naudojant div"s ir kiti HTML elementai yra įmanomi, bet šiek tiek sudėtingi, o įvairiose naršyklėse dažniausiai būna atvaizdavimo nenuoseklumų. SVG naudojimas yra patikimesnis, nuoseklesnis ir greitesnis.
Vektorinės grafikos redaktoriai, tokie kaip Illustrator, gali būti naudojami kuriant SVG failus, tačiau turime išmokti juos sukurti naudojant kodą.
SVG elementas
Scalable Vector Graphics yra teksto vaizdo formatas. Kiekvienas SVG vaizdas yra apibrėžtas naudojant HTML kodo žymėjimą. SVG kodas gali būti įtrauktas tiesiai į HTML dokumentą. Kiekviena žiniatinklio naršyklė palaiko SVG, vienintelė išimtis yra „Internet Explorer 8“ ir naujesnė versija. SVG yra pagrįstas XML, todėl galite pastebėti, kad elementai, kurie neturi uždarymo žymos, turėtų užsidaryti savaime. Pavyzdžiui:
Kad galėtumėte ką nors piešti, turite sukurti SVG elementą. Pagalvokite apie SVG elementą kaip apie drobę, ant kurios nupiešti visi vaizdai (tokiu būdu SVG konceptualiai panašus į HTML drobės elementą). Mažiausiai plotį ir aukštį verta nustatyti naudojant atributus plotis Ir aukščio, atitinkamai. Jei jų nenurodysite, SVG ištemps visą bloko plotą.
Štai SVG elementas, sukurtas naudojant aukščiau pateiktą kodą:
Nematai jo? Dešiniuoju pelės mygtuku spustelėkite tuščią vietą viršuje ir pasirinkite Peržiūrėti elemento kodą. Jūsų žiniatinklio inspektorius turėtų parodyti kažką panašaus į šį:
Atkreipkite dėmesį, kad yra SVG elementas, apimantis 500 pikselių horizontaliai ir 50 pikselių vertikaliai.
Taip pat atminkite, kad naršyklės pikselius laiko numatytuoju matavimo vienetu. Dydžius nurodėme kaip 500 ir 50, o ne 500 pikselių ir 50 pikselių. Galime aiškiai nurodyti px arba bet kurį kitą matavimo vienetą, pavyzdžiui: em, pt, in, cm, Ir mm.
Paprastos formos
Yra daugybė formų, kurias galite įdėti į SVG elementą. Į šį rinkinį įeina: ties, ratas, elipsė, linija, tekstą Ir kelias.
Jei esate susipažinę su kompiuterinės grafikos programavimu, prisiminsite, kad paprastai pikselių koordinačių sistema prasideda viršutiniame kairiajame kampe ir turi taškų koordinates (0,0). Padidinti X atsiranda iš kairės į dešinę, didėja adresu- iš viršaus į apačią.
0,0 100,20 200,40
ties piešia kvadratą. Kvadratas pateikiamas keturiomis reikšmėmis: x, y- nurodykite viršutinio kairiojo kampo tašką; plotis, aukščio- nurodykite kvadrato plotį ir aukštį. Šis kvadratas užima visą mūsų SVG erdvę:
ratas piešia apskritimą. Apskritimas apibrėžiamas trimis dydžiais: cx, cy nurodykite tašką, esantį apibrėžto apskritimo centre, r nurodo apskritimo spindulį. Šis apskritimas yra mūsų SVG centre, nes atributas cx("centras-x") yra 250. Pavyzdys:
elipsė nustatytas panašiai kaip ratas, bet daroma prielaida, kad spindulys nurodytas išilgai dviejų ašių: išilgai X ir pagal adresu. Vietoj X naudoti rx, vietoj y - ry.
linija nubrėžia liniją. Naudokite x1 Ir y1 nustatyti eilutės pradžios koordinates ir x2 Ir y2 nustatyti galines koordinates. Atributas insultas turi nustatyti linijos spalvą, kitaip ji bus nematoma.
tekstą piešia tekstą. Naudokite x nurodyti kairįjį kraštą ir y nurodyti vertikalią vadinamosios bazinės linijos padėtį.
tekstas paveldės pirminio elemento CSS šriftų stilius, nebent nustatysite savo teksto stilius. Atkreipkite dėmesį, kaip aukščiau esančio teksto formatavimas atitinka šioje pastraipoje aprašytą tekstą. Galime nepaisyti tokių formatavimo stilių:
Taip pat atminkite, kad kai kuris nors vaizdo elementas pasiekia SVG elemento kraštinę, jis bus nukirptas. Būkite atsargūs naudodami tekstą, kad nebūtų nukirpti teksto raiščiai. Galite pamatyti, kas atsitiks su tekstu, jei nustatysite bazinę liniją (t. y. adresu) lygus 50, toks pat kaip SVG aukštis:
kelias piešia ką nors sudėtingesnio nei anksčiau aprašytos formos (pavyzdžiui, šalių siluetas geožemėlapiuose) ir bus aprašytas atskirai. Dabar dirbsime su paprastomis formomis.
Stiliaus SVG elementai
Pagal numatytuosius nustatymus bet kuris SVG elementas užpildytas juodu ir be kraštinės. Jei norite ko nors daugiau, savo elementui turėsite pritaikyti stilius. Toliau pateikiamos bendros SVG savybės:
- užpildyti- užpildymas. Spalvos reikšmė. Kaip ir CSS, spalvą galima nurodyti keliais būdais:
- pagal pavadinimą: oranžinė;
- reikšmė šešioliktainėje skaičių sistemoje: #3388aa, #38a;
- reikšmė RGB formatu: rgb(10, 150, 20);
- reikšmė RGBA formatu: rgba(10, 150, 20, 0,5).
- insultas- rėmas. Spalvos reikšmė.
- smūgio plotis- rėmelio plotis (dažniausiai pikseliais).
- neskaidrumas- skaidrumas. Skaitinė reikšmė nuo 0,0 (visiškai skaidrus) iki 1,0 (visiškai matoma).
SU tekstą taip pat galite naudoti šias savybes:
- šrifto šeima
- šrifto dydis
Yra du būdai taikyti stilius SVG elementams: tiesiogiai nurodant stilius elemente kaip jo atributus arba naudojant CSS taisykles.
Toliau pateikiamos kai kurios CSS ypatybės, nustatytos tiesiai ant elemento ratas:
Galėtume tai padaryti kitaip: nenurodykite stiliaus atributų, bet nurodykite stiliaus klasę (kaip ir įprastas HTML elementas):
ir tada pridėkite užpildyti, insultas Ir smūgio plotis parametrus reikiamos klasės CSS stiliuose:
Moliūgas (įdaras: geltonas; potėpis: oranžinis; brūkšnio plotis: 5; )
Antrasis metodas turi keletą akivaizdžių pranašumų:
- Galite vieną kartą apibrėžti klasę ir pritaikyti ją daugeliui elementų.
- CSS kodą lengviau suprasti nei elementų atributus.
- Dėl šių priežasčių antrąjį metodą lengviau prižiūrėti ir greičiau įgyvendinti.
Tačiau CSS naudojimas SVG stiliui kai kuriems gali būti painus. užpildyti, insultas, smūgio plotis vis dar nėra CSS ypatybių (artimiausi CSS atitikmenys yra fono spalva Ir siena). Kad būtų lengviau atsiminti, kokios stiliaus lapo taisyklės nurodytos SVG elementams, verta įtraukti svg CSS parinkiklyje:
Svg . moliūgas ( /* ... */ )
Perdanga ir jų piešimo tvarka
SVG nėra sluoksnių ir gylio sampratos. SVG nepalaiko CSS nuosavybės z indeksas, todėl formas galima užsisakyti dvimatėje erdvėje.
Ir vis dėlto, jei piešiate kelias figūras, jos sutampa:
Elementų sąrašo kode tvarka lemia jų gylį. Violetinis kvadratas yra nurodytas pirmas kode, todėl pirmiausia nupieštas. Tada virš purpurinio nubrėžiamas mėlynas kvadratas, po to virš mėlynos ir violetinės – žalias kvadratas ir t.t.
Pagalvokite apie SVG formas taip, lyg jos būtų piešiamos ant drobės. Spalva, kuri taikoma paskutinė, padengia likusias spalvas ir baigiasi „priešais“.
Šis piešimo tvarkos aspektas tampa svarbus, kai turite kelis vaizdinius elementus, kurių niekas neturėtų užblokuoti. Pavyzdžiui, ašys arba verčių etiketės gali būti ant ašių, kurios rodomos taškinėje diagramoje. Ašys ir etiketės turėtų būti pridėtos prie SVG pabaigoje, kad būtų rodomos prieš kitus elementus ir būtų matomos.
Skaidrumas
Skaidrumas gali būti naudingas, kai vizualizacijos elementai persidengia, bet norite, kad jie visi būtų matomi, arba kai norite paryškinti kai kuriuos elementus, bet padaryti kitus mažiau pastebimus.
Yra du būdai, kaip pritaikyti skaidrumą: naudoti RGB spalvą su alfa kanalu arba nustatyti ypatybę neskaidrumas skaitinė reikšmė.
tu gali naudoti rgba () visur, kur reikia nurodyti spalvą, pavyzdžiui, atributuose užpildyti Ir insultas. rgba () tikisi, kad perduosite 3 vertes nuo 0 iki 255 raudonai, žaliai ir mėlynai, taip pat alfa kanalą nuo 0,0 iki 1,0.
Atkreipkite dėmesį, kad naudojant metodą rgba (), taikomas skaidrumas užpildyti Ir insultas atributai, nepaisant. Šių apskritimų užpildymas yra 75% skaidrus, o jų kraštinė yra 25% skaidrus:
Norėdami taikyti skaidrumą visam elementui, turite nustatyti atributą neskaidrumas. Žemiau yra visiškai matomi apskritimai:
ir tai yra tie patys apskritimai su skirtingu skaidrumu:
Taip pat galite naudoti atributą neskaidrumas elementui, kurio spalvos nurodytos formate rgba (). Kai tai padarysite, skaidrumas padidės. Žemiau esančiais apskritimais naudojamos tos pačios RGBA spalvų reikšmės užpildyti Ir insultas. Pirmasis elementas neturi atributų rinkinio neskaidrumas, o kiti du turi:
Atkreipkite dėmesį, kad trečiasis ratas neskaidrumas lygus 0,2 arba 20%. Tačiau jo violetinės dalies skaidrumas yra 75%. Taigi purpurinė dalis yra 0,2 * 0,75 = 0,15 arba 15% skaidri.
HTML vaizdaiįtraukta į tinklalapius naudojant žymą . Grafikos naudojimas daro tinklalapius vizualiai patrauklesnius. Vaizdai padeda geriau perteikti žiniatinklio dokumento esmę ir turinį.
HTML žymų naudojimas
Vaizdų įterpimas į HTML dokumentą
1. Žymė ![]()
Elementas reiškia vaizdą ir jo atsarginį turinį, kuris pridedamas naudojant alt atributą. Kadangi elementas
yra mažosiomis raidėmis, rekomenduojama jį įdėti į bloko elementą, pvz.
Arba
Žyma turi būtiną src atributą, kurio reikšmė yra absoliutus arba santykinis kelias į vaizdą:
Dėl žymės Galimi šie atributai:
| Atributas | Aprašymas, priimta vertė |
|---|---|
| alt | Alt atributas prideda alternatyvų tekstą prie vaizdo. Rodomas ten, kur vaizdas rodomas prieš jį įkeliant arba išjungus grafiką, taip pat rodomas kaip patarimas užvedus pelės žymeklį virš vaizdo. Sintaksė: alt="vaizdo aprašymas" . !} |
| kryžminė kilmė | Crossorigin atributas leidžia įkelti vaizdus iš išteklių kitame domene naudojant CORS užklausas. Vaizdai, įkelti į drobę naudojant CORS užklausas, gali būti naudojami pakartotinai. Leidžiamos reikšmės: anoniminis – kryžminės kilmės užklausa pateikiama naudojant HTTP antraštę ir jokie kredencialai neperduodami. Jei serveris nepateiks kredencialų serveriui, iš kurio prašoma turinio, vaizdas bus sugadintas ir jo naudojimas bus apribotas. use-credentials – kryžminės kilmės užklausa atliekama perduodant kredencialus. Sintaksė: crossorigin="anonymous" . |
| aukščio | Atributas height nurodo vaizdo aukštį. Galima nurodyti px arba %. Sintaksė: aukštis: 300 pikselių. |
| ismap | Atributas ismap rodo, kad paveikslėlis yra serveryje esančio žemėlapio vaizdo dalis (žemėlapio vaizdas yra vaizdas su spustelėjamomis sritimis). Spustelėjus žemėlapio vaizdą, koordinatės siunčiamos į serverį kaip URL užklausos eilutė. Atributas ismap leidžiamas tik tuo atveju, jei elementas Sintaksė: ismap. |
| longdesc | Išplėstinis vaizdo aprašo URL, papildantis atributą alt. Sintaksė: longdesc="http://www.example.com/description.txt" . |
| src | Atributas src nurodo kelią į vaizdą. Sintaksė: src="gėlė.jpg" . |
| dydžiai | Nustatomas vaizdo dydis, atsižvelgiant į rodymo parinktis. Veikia tik tada, kai nurodytas atributas srcset. Atributo reikšmė yra viena ar daugiau eilučių, atskirtų kableliais. |
| srcset | Sukuria vaizdo šaltinių, kurie bus pasirinkti pagal ekrano skiriamąją gebą, sąrašą. Gali būti naudojamas kartu su src atributu arba vietoj jo. Atributo reikšmė yra viena ar daugiau eilučių, atskirtų kableliais. 
|
| naudojimo žemėlapį | Atributas usemap nurodo vaizdą kaip vaizdo žemėlapį. Reikšmė turi prasidėti simboliu #. Reikšmė susieta su žymos pavadinimo arba ID atributo reikšme |
| plotis | Atributas plotis nurodo vaizdo plotį. Galima nurodyti px arba %. Sintaksė: plotis: 100 % . |
1.1. Vaizdo adresas
Vaizdo adresas gali būti nurodytas visą (absoliutus URL), pavyzdžiui:
url (http://anysite.ru/images/anyphoto.png)
Arba per santykinį kelią iš dokumentas arba šakninis katalogas Interneto svetainė:
url(../images/anyphoto.png) – santykinis kelias iš dokumento,
url(/images/anyphoto.png) – santykinis kelias iš šakninio katalogo.
Tai aiškinama taip:
../ - reiškia pakilti vienu lygiu į šakninį katalogą,
images/ - eikite į aplanką su vaizdais,
anyphoto.png – nurodo vaizdo failą.
1.2. Vaizdo matmenys
Nenustačius vaizdo matmenų, brėžinys puslapyje rodomas tikrojo dydžio. Vaizdo matmenis galite redaguoti naudodami pločio ir aukščio atributus. Jei nurodytas tik vienas iš atributų, antrasis bus apskaičiuojamas automatiškai, kad būtų išlaikytos nuotraukos proporcijos.
1.3. Grafinių failų formatai
JPEG formatu (Jungtinė fotografijos ekspertų grupė). JPEG vaizdai idealiai tinka nuotraukoms ir gali turėti milijonus skirtingų spalvų. Vaizdai suglaudinami geriau nei GIF, bet tekstas ir didelės vientisos spalvos sritys gali tapti dėmėmis.
GIF formatu (Grafikos mainų formatas). Idealiai tinka vaizdams, kuriuose yra vientisų spalvų sričių, pvz., logotipų, suspausti. GIF leidžia nustatyti, kad viena iš spalvų būtų skaidri, todėl tinklalapio fonas gali būti matomas per dalį vaizdo. GIF taip pat gali būti paprasta animacija. GIF vaizduose yra tik 256 atspalviai, todėl vaizdai atrodo dėmėti ir nerealių spalvų, kaip plakatai.
PNG formatu (Nešiojama tinklo grafika). Apima geriausias GIF ir JPEG formatų savybes. Turi 256 spalvas ir leidžia padaryti vieną iš spalvų skaidrią, suglaudinant vaizdus į mažesnį nei GIF failo dydį.
APNG formatu (Animuota nešiojama tinklo grafika). Vaizdo formatas, pagrįstas PNG formatu. Leidžia saugoti animaciją ir taip pat palaiko skaidrumą.
SVG formatu (Mastelio keitimo vektorinė grafika). SVG brėžinys susideda iš XML formatu aprašytų geometrinių formų rinkinio: linijos, elipsės, daugiakampio ir kt. Palaikoma tiek statinė, tiek animuota grafika. Funkcijų rinkinį sudaro įvairios transformacijos, alfa kaukės, filtrų efektai, galimybė naudoti šablonus. SVG vaizdų dydį galima keisti neprarandant kokybės.
BMP formatu (Bitmap paveikslėlis). Tai nesuspaustas (originalus) bitmap vaizdas, kurio šablonas yra stačiakampis pikselių tinklelis. Bitmap failą sudaro antraštė, paletė ir grafiniai duomenys. Antraštėje saugoma informacija apie grafinį vaizdą ir failą (pikselių gylis, aukštis, plotis ir spalvų skaičius). Paletė nurodoma tik tuose Bitmap failuose, kuriuose yra paletės vaizdai (8 ar mažiau bitų) ir kuriuos sudaro ne daugiau kaip 256 elementai. Grafiniai duomenys atspindi pačią nuotrauką. Šio formato spalvų gylis gali būti 1, 2, 4, 8, 16, 24, 32, 48 bitai pikselyje.
ICO formatas („Windows“ piktograma). Failo piktogramos saugojimo formatas „Microsoft Windows“. Be to, „Windows“ piktograma naudojama kaip piktograma interneto svetainėse. Tai tokio formato paveikslėlis, kuris naršyklėje rodomas šalia svetainės adreso arba žymės. Viename ICO faile yra viena ar daugiau piktogramų, kurių dydį ir spalvą galima nustatyti atskirai. Piktogramos dydis gali būti bet kokio dydžio, tačiau dažniausiai naudojamos kvadratinės piktogramos, kurių kraštinės yra 16, 32 ir 48 pikselių.
2. Žymė
Žyma
Žyma turi pavadinimo atributą, kuris nurodo žemėlapio pavadinimą. Žymos pavadinimo atributo reikšmė
Elementas
3. Žymė
Žyma aprašo tik vieną aktyvų regioną kaip kliento vaizdo žemėlapio dalį. Elementas neturi uždarymo žymos. Jei viena aktyvi sritis persidengia su kita, bus įdiegta pirmoji nuoroda iš sričių sąrašo.
| Atributas | Trumpas aprašymas |
|---|---|
| alt | Nustato alternatyvų tekstą aktyvioje žemėlapio srityje. |
| koordinatės | Nustato srities padėtį ekrane. Koordinatės pateikiamos ilgio vienetais ir atskirtos kableliais: Dėl ratas— apskritimo centro ir spindulio koordinatės; Dėl stačiakampis— viršutinio kairiojo ir apatinio dešiniojo kampų koordinatės; Dėl poligonas— daugiakampio viršūnių koordinates reikiama tvarka, loginiam figūros užbaigimui taip pat rekomenduojama nurodyti paskutines koordinates, lygias pirmajai. |
| parsisiųsti | Papildo atributą href ir nurodo naršyklei, kad išteklius reikia įkelti tuo metu, kai vartotojas spustelėja nuorodą, o ne, pavyzdžiui, pirmiausia jį atidaryti (pvz., PDF failą). Nurodydami atributo pavadinimą, mes suteikiame pavadinimą įkeltam objektui. Leidžiama naudoti atributą nenurodant jo reikšmės. |
| href | Nurodo nuorodos URL adresą. Galima nurodyti absoliutų arba santykinį nuorodos adresą. |
| hreflang | Nurodo susieto žiniatinklio dokumento kalbą. Naudojamas tik kartu su href atributu. Priimtos reikšmės yra santrumpa, kurią sudaro raidžių pora, nurodanti kalbos kodą. |
| žiniasklaida | Nustato, kokio tipo įrenginiams failas bus optimizuotas. Reikšmė gali būti bet kokia medijos užklausa. |
| rel | Išplečia atributą href su informacija apie ryšį tarp dabartinio ir susijusio dokumento. Priimtinos vertės: alternate – nuoroda į alternatyvią dokumento versiją (pavyzdžiui, spausdintą puslapio formą, vertimą ar veidrodį). autorius – nuoroda į dokumento autorių. žymė – nuolatinis URL, naudojamas žymėms. pagalba – nuoroda į pagalbą. licencija – nuoroda į šio žiniatinklio dokumento autorių teisių informaciją. kitas/ankstesnis – nurodo ryšį tarp atskirų URL. Dėl šio žymėjimo „Google“ gali nustatyti, kad šių puslapių turinys yra susijęs logine seka. nofollow – neleidžia paieškos varikliui sekti nuorodas tam tikrame puslapyje arba konkrečioje nuorodoje. noreferrer – nurodo, kad sekant nuorodą naršyklė neturėtų siųsti HTTP užklausos antraštės (Referrer), kuri įrašo informaciją apie tai, iš kurio puslapio atėjo svetainės lankytojas. prefetch – nurodo, kad tikslinis dokumentas turi būti talpykloje, t.y. Naršyklė fone atsisiunčia puslapio turinį į talpyklą. paieška – nurodo, kad tiksliniame dokumente yra paieškos įrankis. žyma – nurodo dabartinio dokumento raktinį žodį. |
| figūra | Nurodo aktyvios srities formą žemėlapyje ir jos koordinates. Gali turėti šias vertes: rect — stačiakampis aktyvus plotas; circle — apskritimo formos aktyvi sritis; poli — aktyvus plotas daugiakampio formos; numatytasis - aktyvi sritis užima visą vaizdo plotą. |
| taikinys | Nurodoma, kur dokumentas bus atsiųstas spustelėjus nuorodą. Priima šias vertes: _self — puslapis įkeliamas į esamą langą; _blank – puslapis atsidaro naujame naršyklės lange; _parent — puslapis įkeliamas į pirminį rėmelį; _top – puslapis įkeliamas pilname naršyklės lange. |
| tipo | Nurodo nuorodų failų MIME tipą, t.y. failo plėtinys. |
4. Vaizdo žemėlapio kūrimo pavyzdys
1) Pažymėkite originalų vaizdą į aktyvias norimos formos sritis. Plytų koordinates galima apskaičiuoti naudojant nuotraukų apdorojimo programą, pvz. Adobe Photoshop arba Dažyti.
Ryžiai. 1. Vaizdo žymėjimo pavyzdys žemėlapiui sukurti 2) Nustatykite kortelės pavadinimą pridėdami jį prie žymos
Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers">
!}
Ryžiai. 2. Vaizdo žemėlapio kūrimo pavyzdys, kai spustelite pelės žymeklį ant gėlės, pateksite į puslapį su aprašymu
Vektorinė grafika plačiai naudojama spaudoje. Bet mes taip pat galime jį naudoti svetainėms, kuriose naudojamas SVG ( Scalable Vector Graphic – keičiamo dydžio vektorinė grafika). Pagal W3.org specifikacija apibrėžia SVG kaip:
Kalba, skirta apibūdinti dvimatę grafiką XML formatu. SVG leidžia naudoti trijų tipų objektus: vektorinę grafiką (pvz., kelius, sudarytus iš tiesių linijų ir kreivių), vaizdus ir tekstą.
Nepaisant to, kad SVG nuo 2011 m. rugpjūčio mėn. įtrauktas į W3C rekomendacijas, žiniatinklio projektuose ši technologija praktiškai nenaudojama, nors turi nemažai pranašumų prieš rastrinius vaizdus. Šioje pamokų serijoje supažindinsime, kaip dirbti su SVG elementais tinklalapiuose.
SVG privalumai
Rezoliucijos nepriklausomumas
Rastriniai vaizdai priklauso nuo skiriamosios gebos. Keičiant dydį iki tam tikro mastelio, grafika įgauna nepriekaištingą išvaizdą. Naudojant vektorinę grafiką, ši situacija iš esmės neįmanoma, nes viskas yra pavaizduota matematinėmis išraiškomis, kurios automatiškai perskaičiuojamos pakeitus skalę, o kokybė išlaikoma bet kokiomis sąlygomis.
HTTP užklausų skaičiaus mažinimas
SVG galima įterpti tiesiai į HTML dokumentą naudojant svg žymą, todėl naršyklei nereikia pateikti jokių užklausų, kad būtų pateikta grafika. Šis metodas turi gerą poveikį svetainės įkėlimo charakteristikoms.
Stiliai ir scenarijai
Įdėjus svg žymą taip pat lengva formuoti grafikos stilių naudojant CSS. Galite keisti objekto savybes, tokias kaip fono spalva, skaidrumas, kraštinės ir pan. Grafika gali būti manipuliuojama panašiai naudojant JavaScript.
Lengva redaguoti ir animuoti
SVG objektus galima animuoti naudojant CSS arba JavaScript. SVG objektus taip pat galima modifikuoti naudojant teksto rengyklę.
Mažesnis failo dydis
SVG failo dydis yra mažesnis nei rastrinė grafika.
Pagrindinės SVG formos
Pagal specifikaciją galime nupiešti kelias pagrindines formas: liniją, poliliniją, stačiakampį, apskritimą, elipsę. Visi elementai turi būti įterpti į žymą . Pažvelkime į pagrindinius elementus išsamiai.
Linija
Norėdami rodyti eilutę SVG formatu, naudokite elementą
Atkarpos pradžią lemia atributai x1 ir y1 , o pabaigos tašką koordinatės atributuose x2 ir y2 .
Taip pat yra du kiti atributai (brūkšnio ir brūkšnio plotis), kurie naudojami atitinkamai apibrėžti linijos spalvą ir plotį.
Šis objektas yra panašus į
Elementas
Stačiakampis nubrėžiamas naudojant elementą
Norėdami parodyti apskritimą, naudojame elementą
Pirmieji du atributai cx ir cy apibrėžia centro koordinates. Aukščiau pateiktame pavyzdyje abiejų koordinačių reikšmę nustatėme į 102. Numatytoji reikšmė yra 0.
Norėdami parodyti elipsę, naudojame elementą
Elementas
Naudojant vektorinės grafikos rengyklę
Lengva išvesti paprastus SVG objektus į HTML. Tačiau didėjant objekto sudėtingumui dėl šios praktikos gali prireikti daug darbo.
Bet galite naudoti bet kurį vektorinės grafikos rengyklę (pvz. Adobe Illustrator arba „Inkscape“.) objektams kurti. Jei turite tokį įrankį, nupiešti juose reikiamus objektus yra daug lengviau nei koduoti grafiką HTML žymoje.
Galite kopijuoti vektorinės grafikos komandas iš failo į HTML dokumentą. Arba galite įterpti .svg failą naudodami vieną iš šių elementų: embed , iframe ir object .
Rezultatas bus toks pat.
Naršyklės palaikymas
SVG puikiai palaiko daugumą šiuolaikinių naršyklių, išskyrus 8 ir senesnę IE versiją. Tačiau problemą galima išspręsti naudojant „JavaScript“ biblioteką. Norėdami palengvinti savo darbą, galite naudoti ReadySetRaphael.com įrankį, kad konvertuotumėte SVG kodą į Raphael formatą.
Pirmiausia atsisiunčiame ir įtraukiame biblioteką į HTML dokumentą. Tada įkeliame .svg failą, nukopijuojame ir įklijuojame gautą kodą į funkciją po įkėlimo:
Į kūno žymą įdedame šį div elementą su identifikatoriumi rsr .
Ir viskas paruošta.
Kitame šios serijos vadove apžvelgsime, kaip sukurti SVG objektų stilių CSS.
Šis įrašas yra pirmasis iš straipsnių apie SVG (Scalable Vector Graphic) serijos, apimančios vektorinės grafikos pagrindus svetainėje.
Vektorinė grafika plačiai naudojama spaudoje. Tinklalapiams yra SVG, kuris pagal oficialią w3.org specifikaciją yra kalba, skirta apibūdinti dvimatę grafiką XML formatu. SVG apima trijų tipų objektus: figūras, vaizdus ir tekstą. SVG egzistuoja nuo 1999 m., o nuo 2011 m. rugpjūčio 16 d. jis įtrauktas į W3C rekomendacijas. Žiniatinklio kūrėjai labai neįvertina SVG, nors jis turi keletą svarbių pranašumų.
SVG privalumai
- Mastelio keitimas: Skirtingai nuo rastrinės grafikos, SVG nepraranda kokybės keičiant mastelį, todėl jį patogu naudoti tinklainės plėtrai.
- HTTP užklausų mažinimas: naudojant SVG, sumažėja skambučių į serverį skaičius ir atitinkamai padidėja svetainės įkėlimo greitis.
- Stilius ir scenarijus: naudodami CSS, galite pakeisti svetainės grafikos nustatymus, pvz., foną, skaidrumą ar kraštines.
- Animacija ir redagavimas: naudodami javascript galite animuoti SVG, taip pat redaguoti jį teksto ar grafikos rengyklėje (InkScape arba Adobe Illustrator).
- Mažas dydis: SVG objektai sveria daug mažiau nei rastriniai vaizdai.
Pagrindinės SVG formos
Pagal oficialią specifikaciją, naudodami SVG galite piešti paprastus objektus: stačiakampį, apskritimą, liniją, elipsę, poliliniją ar daugiakampį naudodami žymą svg.Paprasta eilutė naudojant žymą linija tik su dviem parametrais - pradžios taškais (x1 ir x2) ir pabaigos taškais (y1 ir y2):
Taip pat galite pridėti brūkšnio ir brūkšnio pločio atributų arba stilių, kad nustatytumėte spalvą ir plotį:
Style="stroke-width:1; stroke:rgb(0,0,0);"
nutrūkusi linija
Sintaksė panaši į ankstesnę, naudojama žyma poliline, atributas taškų nustato taškus:
Stačiakampis
Iškviečiama tiesiosios žymos, galite pridėti keletą atributų:
Apskritimas
Skambino pagal žymą ratas, pavyzdyje naudojant atributą r nustatyti spindulį, cx Ir cy nurodykite centro koordinates:
Elipsė
Skambino pagal žymą elipsė, veikia panašiai ratas, bet galite nurodyti du spindulius - rx Ir ry:
Poligonas
Skambino pagal žymą poligonas, daugiakampis gali turėti skirtingą kraštinių skaičių:
Naudojant redaktorius
Kaip matote iš pavyzdžių, pagrindinių SVG formų piešimas yra labai paprastas, tačiau objektai gali būti daug sudėtingesni. Norėdami tai padaryti, turite naudoti vektorinės grafikos rengykles, tokias kaip „Adobe Illustrator“ arba „Inkscape“, kuriose galite įrašyti failus SVG formatu ir redaguoti juos teksto rengyklėje. Galite įterpti SVG į puslapį naudodami embed, iframe ir objektą:
Pavyzdys yra „iPod“ vaizdas iš OpenClipArt.org.
Pagrindinės sąvokos ir naudojimas
Scalable Vector Graphics (SVG) formatas yra vektorinės grafikos standartų šeimos dalis. Vektorinė grafika skiriasi nuo rastrinės grafikos, kurioje kiekvieno pikselio spalvos apibrėžimas saugomas tam tikrame duomenų masyve. Šiandien internete dažniausiai naudojami JPEG, GIF ir PNG rastriniai formatai, kurių kiekvienas turi savų privalumų ir trūkumų.
Dažniausiai vartojamos santrumpos
- CSS: pakopiniai stiliaus lapai
- GIF: grafikos mainų formatas
- GUI: grafinė vartotojo sąsaja
- HTML: hiperteksto žymėjimo kalba
- JPEG: jungtinė fotografijos ekspertų grupė
- PNG: nešiojama tinklo grafika
- SVG: Scalable Vector Graphics
- XML: išplečiama žymėjimo kalba
SVG formatas turi keletą pranašumų, palyginti su bet kokiu rastriniu formatu:
- SVG grafika kuriama naudojant matematines formules, kurioms norint išsaugoti pradiniame faile reikia daug mažiau duomenų, nes nereikia saugoti kiekvieno atskiro pikselio duomenų.
- Vektoriniai vaizdai yra geresni. Bandant padidinti internete paskelbtų vaizdų mastelį, viršijantį jų pradinį dydį, vaizdai gali būti iškraipyti (arba pikseliais).
Taip yra todėl, kad pradiniai pikselių duomenys buvo sukurti tam tikram vaizdo dydžiui. Keisdamas dydį, vaizdo atvaizdavimo priemonė spėja, kokie duomenys turėtų būti naudojami naujiems pikseliams užpildyti. Vektoriniai vaizdai yra atsparesni mastelio keitimui; Keičiant vaizdo dydį, galima koreguoti atitinkamas matematines formules.
- Vektorinės grafikos šaltinio failo dydis paprastai yra mažesnis, todėl SVG grafika įkeliama greičiau nei jos rastrinės grafikos ir jai reikia mažiau duomenų.
- SVG vaizdus pateikia naršyklė ir juos galima pateikti programiškai. Jie gali keistis dinamiškai, todėl ypač tinka duomenų valdomoms programoms, pvz., diagramoms.
- Originalus SVG vaizdo failas yra tekstinis, todėl jis yra prieinamas ir patogus paieškos sistemoms.
Šiame straipsnyje sužinosite apie SVG formatų pranašumus ir kaip jie gali padėti kurti HTML5 svetaines.
SVG pagrindai
Kuriant SVG grafiką naudojamas visiškai kitoks procesas nei kuriant JPEG, GIF ar PNG failus. JPEG, GIF ir PNG failai dažniausiai kuriami naudojant kokią nors vaizdo redagavimo programą, pvz., Adobe Photoshop. SVG vaizdai paprastai kuriami naudojant tam tikrą XML pagrįstą kalbą. Yra grafinės vartotojo sąsajos, skirtos SVG grafikai redaguoti, kurios už jus sugeneruos XML kodą, esantį už vaizdo. Tačiau šiame straipsnyje daroma prielaida, kad dirbate tiesiogiai su XML. Informaciją apie SVG vaizdo redagavimo programas rasite skiltyje.
1 sąraše parodytas paprasto SVG XML failo, nubrėžiančio raudoną apskritimą su 2 pikselių juodu rėmeliu, pavyzdys.
Sąrašas 1. SVG XML failas
Aukščiau pateiktas kodas sukuria vaizdą, parodytą 1 paveiksle.
1 pav. Raudonas apskritimas su 2 pikselių juodu krašteliu
Pagrindinių geometrinių figūrų kūrimas
Dirbant su SVG grafika, XML žymės naudojamos geometrinėms figūroms kurti; šie XML elementai parodyti 1 lentelėje.
1 lentelė. XML elementai SVG grafikai kurti
linijos elementas
Linijos elementas yra paprasčiausias grafinis elementas. 2 sąraše parodyta, kaip sukurti horizontalią liniją.
Sąrašas 2. Horizontalios linijos kūrimas
2 sąraše parodytas kodas sukuria vaizdą, parodytą 2 paveiksle.
2 pav. Paprasta horizontali linija
SVG šakninė žyma turi pločio ir aukščio atributus, kurie apibrėžia nubrėžiamą sritį. Šie atributai veikia taip pat, kaip ir kitų HTML elementų aukščio ir pločio atributai. Šiuo atveju nustatoma, kad darbo zona užima visą turimą erdvę.
Be to, šiame pavyzdyje naudojama stiliaus žyma. SVG grafika palaiko stilių taikymą turiniui naudojant įvairius metodus. Šiame straipsnyje pateikiami stiliai, kad vaizdai būtų lengvai matomi arba kai piešiniui pateikti reikalingi tam tikri atributai, pvz., spalva ir linijos plotis. Daugiau informacijos apie stilių taikymą SVG grafikoje rasite skyriuje.
Galite sukurti linijos apibrėžimą nurodydami pradžios ir pabaigos koordinates X ir Y ašyse, atsižvelgiant į darbo sritį. Atributai x1 ir y1 reiškia pradžios koordinates, o atributai x2 ir y2 – linijos pabaigos koordinates. Norėdami pakeisti linijos brėžimo kryptį, tiesiog reikia pakeisti koordinates. Pavyzdžiui, pakeisdami ankstesnį pavyzdį, galite sukurti įstrižainę liniją, kaip parodyta 3 sąraše.
Sąrašas 3. Įstrižainės linijos sukūrimas
3 paveiksle parodyta 3 sąraše parodyto kodo išvestis.
3 pav. Įstrižainė linija
polilinijos elementas
Nutrūkusi linija yra brėžinys, sudarytas iš kelių linijų. 4 sąraše parodytas piešinio, kuris atrodo kaip laiptų pakopos, kūrimo pavyzdys.
4 sąraše parodytas kodas sukuria vaizdą, parodytą 4 paveiksle.
Polilinija sukuriama naudojant taškų atributą ir apibrėžiant X ir Y koordinačių poras, atskirtas kableliais. Pateiktame pavyzdyje pirmasis taškas apibrėžiamas kaip 0,40, kur 0 yra X koordinatė, o 40 yra Y koordinatė. Tačiau vieno taškų rinkinio nepakanka, kad vaizdas būtų rodomas ekrane, nes šis rinkinys nurodo tik SVG nustatyti pradinę padėtį. Jums reikia bent dviejų taškų rinkinių: pradžios taško ir pabaigos taško (pavyzdžiui, taškai = "0,40 40,40").
Kaip ir piešiant paprastas linijas, linijos neturi būti griežtai horizontalios ar vertikalios. Jei pakeisite ankstesnio pavyzdžio reikšmes, galite gauti netaisyklingų formų, sudarytų iš linijų, pvz., 5 sąraše.
Sąrašas 5. Nelyginės linijos kūrimas
5 sąraše esantis kodas sukuria vaizdą, parodytą 5 paveiksle.
5 pav. Dantyta linija
tiesus elementas
Norėdami sukurti stačiakampį, tereikia apibrėžti jo plotį ir aukštį, kaip parodyta 6 sąraše.
Sąrašas 6. Stačiakampio kūrimas
6 sąraše esantis kodas sukuria vaizdą, parodytą 6 paveiksle.
6 pav. Stačiakampis
Tiesiąja žyma taip pat galima sukurti kvadratą; kvadratas yra tiesiog tokio paties aukščio ir pločio stačiakampis.
apskritimo elementas
Apskritimas sukuriamas apibrėžiant apskritimo centro ir spindulio X ir Y koordinates, kaip parodyta 7 sąraše.
Sąrašas 7. Apskritimo kūrimas
Kodas 7 sąraše sukuria vaizdą, parodytą 7 paveiksle.
7 pav. Apskritimas
Atributai cx ir cy nustato apskritimo centro padėtį drobės atžvilgiu. Kadangi spindulys yra pusė apskritimo pločio, nustatydami jį atminkite, kad bendras vaizdo plotis bus du kartus didesnis už nurodytą reikšmę.
Elipsės elementas
Iš esmės elipsė yra apskritimas su dviem kode nurodytais spinduliais, kaip parodyta 8 sąraše.
Sąrašas 8. Elipsės kūrimas
8 sąraše esantis kodas sukuria vaizdą, parodytą 8 paveiksle.
8 pav. Elipsė
Šiuo atveju atributai cx ir cy taip pat apibrėžia centro koordinates drobės atžvilgiu. Tačiau naudojant elipsę, jūs nustatote vieną spindulį X ašiai ir antrą spindulį Y ašiai, naudodami atributus rx ir ry.
daugiakampio elementas
Daugiakampis yra geometrinė figūra, kurią sudaro bent trys kraštinės. 9 sąrašas sukuria paprastą trikampį.
Sąrašas 9. Trikampio kūrimas
9 sąraše esantis kodas sukuria vaizdą, parodytą 9 paveiksle.
9 pav. Trikampis
Panašiai kaip dirbant su polilinijos elementu, daugiakampiai sukuriami apibrėžiant X ir Y koordinačių poras naudojant taškų atributą.
Pridėję koordinačių poras išilgai X ir Y ašių, galite sukurti daugiakampius su bet kokiu kraštinių skaičiumi. Pavyzdžiui, pakeisdami kodą ankstesniame pavyzdyje, galite sukurti keturkampį daugiakampį, kaip parodyta 10 sąraše.
Sąrašas 10. Keturių pusių daugiakampio kūrimas
10 sąraše parodytas kodas sukuria vaizdą, parodytą 10 paveiksle.
10 pav. Keturių pusių daugiakampis
Naudodami daugiakampio žymą taip pat galite sukurti sudėtingų formų geometrines figūras. 11 sąraše sukuriamas žvaigždės piešinys.
Sąrašas 11. Žvaigždės kūrimas
Kodas, parodytas 11 sąraše, sukuria vaizdą, parodytą 11 paveiksle.
11 pav. Žvaigždės daugiakampis
kelio elementas
Kelio elementas yra sudėtingiausias iš visų piešimo elementų, leidžiantis kurti savavališkus brėžinius naudojant specialių komandų rinkinį. Kelio elementas palaiko 2 lentelėje nurodytas komandas.
2 lentelė. Kelio elemento palaikomos komandos
Šios komandos gali būti naudojamos didžiosiomis arba mažosiomis raidėmis. Jei komanda nurodyta didžiosiomis raidėmis, taikomas absoliutus padėties nustatymas. Jei naudojama komanda mažosiomis raidėmis, taikomas santykinis padėties nustatymas. Visų komandų naudojimo pavyzdžių teikimas nepatenka į šio straipsnio taikymo sritį. Tačiau toliau pateikiami keli pavyzdžiai, parodantys šių komandų naudojimo pagrindus.
Naudodami kelio elementą galite sukurti bet kokias paprastas geometrines figūras iš ankstesnių šiame straipsnyje pateiktų pavyzdžių. 12 sąraše naudojamas kelio elementas taisyklingam trikampiui sukurti.
Sąrašas 12. Trikampio kūrimas naudojant kelio elementą
12 sąraše parodytas kodas sukuria vaizdą, parodytą 12 paveiksle.
12 pav. Trikampis sukurtas naudojant kelio elementą
Komandų sąrašas apibrėžiamas naudojant atributą d. Šiame pavyzdyje piešimas prasideda taške, kurio koordinatės X 150 ir Y 0, apibrėžtos perėjimo į tašką komanda (M150 0). Tada naudokite komandą, kad nubrėžtumėte liniją iki taško (L75 200). tiesė nubrėžiama į tašką, kurio koordinatės X = 75 ir Y = 200. Po to kita linija nubrėžiama kita komanda, kuria nubrėžiama tiesė į tašką (L225 200). Galiausiai raštas uždaromas naudojant snap (Z) komandą. Su Z komanda nėra jokių koordinačių, nes norėdami uždaryti kelią, pagal apibrėžimą nubrėžiate liniją nuo dabartinės padėties iki brėžinio pradžios taško (šiuo atveju taško, kurio koordinatės X = 150, Y = 0).
Pateikto pavyzdžio tikslas buvo parodyti jums sąvoką; Jei jums tiesiog reikia sukurti įprastą trikampį, geriau naudoti daugiakampio žymą.
Tikroji kelio elemento galia yra jo gebėjimas kurti pasirinktines formas, kaip parodyta 13 sąraše. Šis pavyzdys paimtas iš World Wide Web Consortium (W3C) dokumento. Scalable Vector Graphics (SVG) 1.1 (2-asis leidimas)(žr. skyrių).
Sąrašas 13. Pasirinktinės formos kūrimas naudojant kelio elementą
Kodas, parodytas 13 sąraše, sukuria vaizdą, parodytą 13 paveiksle.
13 pav. Pasirinktinė forma, sukurta naudojant kelio elementą
Kelio elementas gali būti naudojamas kuriant sudėtingus dizainus, pvz., diagramas ir vingiuotas linijas. Atminkite, kad pateiktame pavyzdyje naudojami keli kelio elementai. Kurdami brėžinius neapsiribojate vienu piešimo elementu SVG šakninėje žymoje.
Filtrai ir gradientai
Be pagrindinių CSS stilių, kurie buvo naudojami daugelyje aukščiau pateiktų pavyzdžių, SVG grafika taip pat palaiko filtrų ir gradientų naudojimą. Šiame skyriuje sužinosite, kaip taikyti filtrus ir gradientus SVG vaizdams.
Filtrai
Filtrai gali būti naudojami specialiiesiems efektams pritaikyti SVG vaizdams. SVG palaiko šiuos filtrus.
- feBlend
- feColorMatrix
- feComponentTransfer
- feComposite
- feConvolveMatrix
- feDiffuseLighting
- feDisplacementMap
- feFlood
- feGaussianBlur
- feimage
- feMerge
- feMorfologija
- feOffsetas
- feSpecularLighting
- vaisingas
- karštligė
- feDistantLight
- fePointLight
- feSpotLight
14 sąraše sukuriamas šešėlio efektas, taikomas stačiakampiui.
Sąrašas 14. Stačiakampio šešėlių efekto sukūrimas
14 sąraše parodytas kodas sukuria vaizdą, parodytą 14 paveiksle.
14 pav. Stačiakampio šešėlio efektas
Filtrai apibrėžiami def elemento viduje (sutrumpinimas iš „apibrėžimo“). Šiame pavyzdyje filtrui priskiriamas identifikatorius (id) "f1". Pati filtro žyma turi atributų, skirtų apibrėžti X ir Y koordinates, taip pat filtro plotį ir aukštį. Filtro žymos viduje naudojate reikiamus filtro elementus ir nustatote jų savybes į norimas reikšmes.
Apibrėžę filtrą, susiejate jį su konkrečiu piešiniu naudodami filtro atributą, kaip parodyta . Nustatykite url reikšmę į id atributo reikšmę, priskirtą filtrui.
Gradientai
Gradientas reiškia laipsnišką perėjimą iš vienos spalvos į kitą. Yra du pagrindiniai gradientų tipai: linijinis ir radialinis. Taikomo gradiento tipas nustatomas pagal naudojamą elementą. Šie pavyzdžiai parodo, kaip elipsei taikyti tiesinius ir radialinius gradientus.
15 sąraše sukuriama elipsė su linijiniu gradientu.
Sąrašas 15. Elipsės su tiesiniu gradientu kūrimas
Kodas, parodytas 15 sąraše, sukuria vaizdą, parodytą 15 paveiksle.
15 pav. Elipsė su tiesiniu gradientu
16 sąraše sukuriama elipsė su radialiniu gradientu.
Sąrašas 16. Elipsės su radialiniu gradientu sukūrimas
16 sąraše parodytas kodas sukuria vaizdą, parodytą 16 paveiksle.
16 pav. Elipsė su radialiniu gradientu
Gradientai, kaip ir filtrai, apibrėžiami def elemente. Kiekvienam gradientui priskiriamas identifikatorius (id). Gradiento atributai (pvz., spalvos) nustatomi gradiento žymos viduje naudojant stop elementus. Norėdami paveikslėliui pritaikyti gradientą, užpildymo atributo url reikšmę nustatykite į norimo gradiento identifikatorių (id).
Tekstas ir SVG
Be pagrindinių geometrinių formų kūrimo, SVG taip pat gali būti naudojamas tekstui generuoti, kaip parodyta 17 sąraše.
Sąrašas 17. Teksto kūrimas naudojant SVG
Kodas, parodytas 17 sąraše, sukuria vaizdą, parodytą 17 paveiksle.
17 pav. Tekstas sukurtas naudojant SVG
Šis pavyzdys sukuria „I love SVG“ sakinį naudojant teksto elementą. Naudojant teksto elementą, tikrasis rodomas tekstas yra tarp pradžios ir pabaigos teksto elementų.
Galite rodyti tekstą skirtingomis ašimis ir net keliais. 18 sąraše tekstas rodomas lanko formos keliu.
Sąrašas 18. Teksto kūrimas lanko formos keliu
Kodas, parodytas 18 sąraše, sukuria vaizdą, parodytą 18 paveiksle.
18 pav. Tekstas išdėstytas išilgai lanko formos kelio
Šiame pavyzdyje prie SVG šakninės žymos pridedama papildoma XML vardų sritis xlink. Kelias, naudojamas tekstui išlenkti, sukuriamas def elemento viduje, todėl pats kelias brėžinyje nevaizduojamas. Rodomas tekstas yra įdėtas į elementą textPath, kuris naudoja xlink vardų sritį norėdamas nurodyti norimo kelio ID.
Kaip ir kitos SVG grafikos atveju, tekstui taip pat galite taikyti filtrus ir gradientus. 19 sąraše tekstui taikomas filtras ir gradientas.
Sąrašas 19. Teksto kūrimas su filtru ir gradientu
19 sąraše parodytas kodas sukuria vaizdą, parodytą 19 paveiksle.
19 pav. Tekstas su filtru ir gradientu
SVG XML kodo įtraukimas į tinklalapius
Sukūrus SVG XML, jį galima keliais būdais įtraukti į HTML puslapius. Pirmasis būdas yra tiesiogiai įterpti SVG XML kodą į HTML dokumentą, kaip parodyta 20 sąraše.
Sąrašas 20. Tiesioginis SVG XML įterpimas į HTML dokumentą
Šis būdas bene pats paprasčiausias, bet neskatina pakartotinio naudojimo. Atminkite, kad SVG XML galima išsaugoti kaip failą su plėtiniu .svg. Kai įrašote SVG grafiką kaip .svg failą, galite naudoti įterpimo, objekto ir iframe elementus, kad įtrauktumėte jį į tinklalapius. 21 sąraše rodomas SVG XML failo įdėjimo naudojant įdėjimo elementą kodas.
Sąrašas 21. SVG XML failo įtraukimas naudojant įdėjimo elementą
22 sąraše rodomas kodas, skirtas įtraukti SVG XML failą naudojant objekto elementą.
Sąrašas 22. SVG XML failo įtraukimas naudojant objekto elementą
23 sąraše rodomas SVG XML failo įtraukimo naudojant iframe elementą kodas.
Sąrašas 23. SVG XML failo įtraukimas naudojant iframe elementą
Naudodami vieną iš šių metodų galite įtraukti tą patį SVG grafinį vaizdą keliuose puslapiuose ir atnaujinti jį redaguodami originalų .svg failą.
Išvada
Šiame straipsnyje aprašomi grafikos kūrimo naudojant SVG formatą pagrindai. Sužinojote, kaip naudoti įtaisytuosius geometrijos elementus kurdami pagrindines geometrines figūras, pvz., liniją, stačiakampį, apskritimą ir pan. Taip pat sužinojote, kaip naudoti kelio elementą sudėtingiems projektams kurti, išduodant komandų seką, pvz., judėjimas į tašką. , linijos nubrėžimas iki taško ir lanko nubrėžimas į tašką. Šiame straipsnyje taip pat mokoma, kaip taikyti filtrus ir gradientus SVG grafikai, įskaitant grafiką su tekstu, ir kaip įtraukti SVG grafiką į HTML puslapius.
