Grafika vektoriale e shkallëzueshme (SVG) - Hulumtim. Grafika vektoriale të shkallëzueshme në HTML5 Shtimi i kodit SVG XML në faqet e internetit

.

Etiketë ka një atribut të kërkuar src, vlera e të cilit është rruga absolute ose relative drejt imazhit:

Për tag Atributet e mëposhtme janë në dispozicion:

Tabela 1. Atributet e etiketës

atribut	Përshkrimi, vlera e pranuar
alt	Atributi alt shton tekst alternativ në një imazh. Shfaqet aty ku shfaqet imazhi përpara se të ngarkohet ose kur grafika çaktivizohet, dhe shfaqet gjithashtu si një këshillë mjeti kur rri pezull miun mbi imazh. Sintaksa: alt="përshkrimi i imazhit" . !}
origjinë të kryqëzuar	Atributi crossorigin ju lejon të ngarkoni imazhe nga burimet në një domen tjetër duke përdorur kërkesat CORS. Imazhet e ngarkuara në kanavacë duke përdorur kërkesat CORS mund të ripërdoren. Vlerat e lejuara: anonime - Kërkesa me origjinë të kryqëzuar bëhet duke përdorur një titull HTTP dhe nuk transmetohen kredenciale. Nëse serveri nuk i jep kredencialet serverit nga i cili kërkohet përmbajtja, imazhi do të korruptohet dhe përdorimi i tij do të jetë i kufizuar. use-credentials — Kërkesa me origjinë të kryqëzuar kryhet duke kaluar kredencialet. Sintaksa: crossorigin="anonim" .
lartësia	Atributi height specifikon lartësinë e imazhit. Mund të specifikohet në px ose %. Sintaksa: lartësia: 300 px.
ismap	Atributi ismap tregon se fotografia është pjesë e një imazhi harte të vendosur në server (një imazh harte është një imazh me zona të klikueshme). Kur klikoni në një imazh të hartës, koordinatat dërgohen në server si një varg pyetjesh URL. Atributi ismap lejohet vetëm nëse elementi është pasardhës i elementit me një atribut të vlefshëm href. Sintaksa: ismap.
përshkrim i gjatë	Një URL e zgjeruar e përshkrimit të imazhit që plotëson atributin alt. Sintaksa: longdesc="http://www.example.com/description.txt" .
src	Atributi src specifikon rrugën drejt imazhit. Sintaksa: src="flower.jpg" .
madhësive	Cakton madhësinë e imazhit në varësi të opsioneve të ekranit. Funksionon vetëm kur specifikohet atributi srcset. Vlera e atributit është një ose më shumë vargje, të ndara me presje.
srcset	Krijon një listë të burimeve të imazhit që do të zgjidhen bazuar në rezolucionin e ekranit. Mund të përdoret së bashku me ose në vend të atributit src. Vlera e atributit është një ose më shumë vargje, të ndara me presje.
harta e përdorimit	Atributi usemap specifikon imazhin si një hartë imazhi. Vlera duhet të fillojë me simbolin #. Vlera lidhet me vlerën e emrit të etiketës ose atributit id
gjerësia	Atributi width specifikon gjerësinë e imazhit. Mund të specifikohet në px ose %. Sintaksa: gjerësia: 100% .

1.1. Adresa e imazhit

Adresa e imazhit mund të specifikohet plotësisht (URL absolute), për shembull:
url (http://anysite.ru/images/anyphoto.png)

Ose nëpërmjet një rruge relative nga dokument ose direktoria rrënjësore website:
url(../images/anyphoto.png) - rruga relative nga dokumenti,
url(/images/anyphoto.png) - shteg relative nga direktoria rrënjësore.

Kjo interpretohet si më poshtë:
../ - do të thotë të ngjitesh një nivel, në direktorinë rrënjë,
imazhe/ - shkoni te dosja me imazhe,
anyphoto.png - tregon një skedar imazhi.

1.2. Dimensionet e imazhit

Pa vendosur përmasat e imazhit, vizatimi shfaqet në faqe në madhësinë e tij aktuale. Ju mund të modifikoni dimensionet e figurës duke përdorur atributet e gjerësisë dhe lartësisë. Nëse specifikohet vetëm një nga atributet, i dyti do të llogaritet automatikisht për të ruajtur përmasat e figurës.

1.3. Formatet e skedarëve grafikë

Formati JPEG (Grupi i Përbashkët i Ekspertëve të Fotografisë). Imazhet JPEG janë ideale për fotografi dhe mund të përmbajnë miliona ngjyra të ndryshme. Imazhet kompresohen më mirë se GIF, por teksti dhe zona të mëdha me ngjyra të forta mund të bëhen me njolla.

Formati GIF (Formati i shkëmbimit të grafikëve). Ideale për kompresimin e imazheve që kanë zona me ngjyra të forta, të tilla si logot. GIF-të ju lejojnë të vendosni një nga ngjyrat të jetë transparente, duke lejuar që sfondi i një faqe në internet të shfaqet përmes një pjese të imazhit. GIF-të mund të përfshijnë gjithashtu animacion të thjeshtë. Imazhet GIF përmbajnë vetëm 256 nuanca, gjë që i bën imazhet të duken me njolla dhe me ngjyra joreale, si postera.

Formati PNG (Grafika portative e rrjetit). Përfshin veçoritë më të mira të formateve GIF dhe JPEG. Përmban 256 ngjyra dhe bën të mundur bërjen e një prej ngjyrave transparente, ndërkohë që ngjesh imazhet në një madhësi më të vogël se një skedar GIF.

Formati APNG (Grafika e rrjetit portative të animuar). Një format imazhi i bazuar në formatin PNG. Ju lejon të ruani animacion dhe gjithashtu mbështet transparencën.

Formati SVG (Grafika vektoriale e shkallëzuar). Një vizatim SVG përbëhet nga një grup formash gjeometrike të përshkruara në formatin XML: vijë, elips, shumëkëndësh, etj. Të dyja grafika statike dhe e animuar janë të mbështetura. Grupi i funksioneve përfshin transformime të ndryshme, maska ​​alfa, efekte filtri dhe aftësinë për të përdorur shabllone. Imazhet SVG mund të ndryshohen përmasat pa humbur cilësinë.

Formati BMP (Foto Bitmap). Është një imazh raster i pakompresuar (origjinal), shablloni i të cilit është një rrjet drejtkëndor pikselësh. Një skedar bitmap përbëhet nga një kokë, një paletë dhe të dhëna grafike. Kreu ruan informacione rreth imazhit dhe skedarit grafik (thellësia, lartësia, gjerësia dhe numri i ngjyrave të pikselit). Paleta tregohet vetëm në ato skedarë Bitmap që përmbajnë imazhe palete (8 ose më pak bit) dhe përbëhen nga jo më shumë se 256 elementë. Të dhënat grafike përfaqësojnë vetë figurën. Thellësia e ngjyrës në këtë format mund të jetë 1, 2, 4, 8, 16, 24, 32, 48 bit për pixel.

Formati ICO (ikona e Windows). Formati i ruajtjes së ikonave të skedarëve në Microsoft Windows. Gjithashtu, ikona e Windows përdoret si ikonë në faqet e internetit në internet. Është një fotografi e këtij formati që shfaqet pranë adresës së faqes së internetit ose faqerojtësit në shfletues. Një skedar ICO përmban një ose më shumë ikona, madhësia dhe ngjyra e secilës prej të cilave mund të vendosen veçmas. Madhësia e ikonës mund të jetë çdo madhësi, por më të zakonshmet janë ikonat katrore me anët 16, 32 dhe 48 pikselë.

2. Etiketë

Etiketë

Etiketa ka në dispozicion një atribut emri, i cili specifikon emrin e hartës. Vlera e atributit të emrit për etiketën

Elementi

3. Etiketë

Etiketë përshkruan vetëm një rajon aktiv si pjesë e një harte imazhi nga ana e klientit. Elementi nuk ka një etiketë mbyllëse. Nëse një zonë aktive mbivendoset me një tjetër, lidhja e parë nga lista e zonave do të zbatohet.

Tabela 2. Atributet e etiketës

atribut	Përshkrim i shkurtër
alt	Vendos tekst alternativ për zonën aktive të hartës.
koordinatat	Përcakton pozicionin e zonës në ekran. Koordinatat jepen në njësi gjatësie dhe ndahen me presje: Për rrethi- koordinatat e qendrës dhe rrezes së rrethit; Për drejtkëndësh- koordinatat e këndit të sipërm të majtë dhe të poshtëm të djathtë; Për shumëkëndëshi- koordinatat e kulmeve të shumëkëndëshit në rendin e kërkuar; rekomandohet gjithashtu të tregohen koordinatat e fundit, të barabarta me të parën, për plotësimin logjik të figurës.
Shkarko	Plotëson atributin href dhe i tregon shfletuesit se burimi duhet të ngarkohet në momentin që përdoruesi klikon lidhjen, në vend që, për shembull, të duhet ta hapë atë së pari (si një skedar PDF). Duke specifikuar një emër për një atribut, ne i japim një emër objektit të ngarkuar. Lejohet të përdoret një atribut pa specifikuar vlerën e tij.
href	Përcakton URL-në për lidhjen. Mund të specifikohet një adresë lidhjeje absolute ose relative.
hreflang	Specifikon gjuhën e dokumentit të lidhur në ueb. Përdoret vetëm në lidhje me atributin href. Vlerat e pranuara janë një shkurtim i përbërë nga një palë shkronjash që tregojnë kodin e gjuhës.
mediat	Përcakton për cilat lloje pajisjesh do të optimizohet skedari. Vlera mund të jetë çdo pyetje mediatike.
rel	Zgjeron atributin href me informacion në lidhje me marrëdhënien midis dokumentit aktual dhe atij përkatës. Vlerat e pranuara: alternative - lidhje me një version alternativ të dokumentit (për shembull, një formë e printuar e faqes, një përkthim ose një pasqyrë). autor - lidhje me autorin e dokumentit. faqeshënues - URL e përhershme e përdorur për faqeshënuesit. ndihmë - lidhje për të ndihmuar. licencë - lidhje me informacionin e të drejtës së autorit për këtë dokument ueb. Next/Prev - tregon lidhjen midis URL-ve individuale. Falë këtij shënimi, Google mund të përcaktojë që përmbajtja e këtyre faqeve është e lidhur në një sekuencë logjike. nofollow - parandalon motorin e kërkimit të ndjekë lidhjet në një faqe të caktuar ose një lidhje specifike. noreferrer - tregon se kur ndjek një lidhje, shfletuesi nuk duhet të dërgojë një titull të kërkesës HTTP (Referrer), i cili regjistron informacione se nga cila faqe ka ardhur vizitori i faqes. prefetch - tregon që dokumenti i synuar duhet të ruhet në memorie, d.m.th. Shfletuesi në sfond shkarkon përmbajtjen e faqes në cache-in e tij. kërkimi - Tregon që dokumenti i synuar përmban një mjet kërkimi. etiketë - specifikon fjalën kyçe për dokumentin aktual.
formë	Përcakton formën e zonës aktive në hartë dhe koordinatat e saj. Mund të marrë vlerat e mëposhtme: rect - zonë aktive drejtkëndëshe; rrethi - zonë aktive në formën e një rrethi; poli - zonë aktive në formën e një shumëkëndëshi; default - zona aktive zë të gjithë zonën e imazhit.
objektiv	Përcakton se ku do të shkarkohet dokumenti kur klikohet lidhja. Pranon vlerat e mëposhtme: _self - faqja ngarkohet në dritaren aktuale; _blank — faqja hapet në një dritare të re të shfletuesit; _parent — faqja ngarkohet në kornizën prind; _top - faqja ngarkohet në dritaren e plotë të shfletuesit.
lloji	Përcakton llojin MIME të skedarëve të lidhjes, d.m.th. zgjerimi i skedarit.

4. Shembull i krijimit të një harte imazhi

1) Shënoni imazhin origjinal në zonat aktive të formës së dëshiruar. Koordinatat e zonave mund të llogariten duke përdorur një program të përpunimit të fotografive, për shembull, Adobe Photoshop ose Bojë.

Oriz. 1. Shembull i shënjimit të imazhit për të krijuar një hartë

2) Vendosni emrin e kartës duke e shtuar atë në etiketë

Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers"> !}
Oriz. 2. Një shembull i krijimit të një harte imazhi, kur klikoni kursorin e miut në një lule, shkoni në një faqe me një përshkrim

Konceptet themelore dhe përdorimi

Formati Scalable Vector Graphics (SVG) është pjesë e një familjeje standardesh të grafikës vektoriale. Grafikat vektoriale ndryshojnë nga grafika raster, në të cilën përkufizimi i ngjyrës së secilit piksel ruhet në një grup të dhënash. Formatet më të zakonshme raster që përdoren sot në internet janë JPEG, GIF dhe PNG, secila prej të cilave ka avantazhet dhe disavantazhet e veta.

Shkurtesat e përdorura zakonisht

• CSS: Fletët e stilit të kaskadës
• GIF: Formati i shkëmbimit të grafikëve
• GUI: Ndërfaqja grafike e përdoruesit
• HTML: Gjuha e shënjimit të hipertekstit
• JPEG: Grupi i Përbashkët i Ekspertëve Fotografik
• PNG: Grafika portative e rrjetit
• SVG: Grafika vektoriale e shkallëzueshme
• XML: Gjuha e zgjerueshme e shënjimit

Formati SVG ka disa përparësi mbi çdo format raster:

• Grafikat SVG krijohen duke përdorur formula matematikore që kërkojnë shumë më pak të dhëna për t'u ruajtur në skedarin origjinal, sepse nuk ka nevojë të ruhen të dhëna për çdo piksel individual.
• Imazhet vektoriale shkallëzohen më mirë. Përpjekja për të shkallëzuar imazhet e publikuara në internet përtej madhësisë së tyre origjinale mund të rezultojë në imazhe të shtrembëruara (ose të pikseluara).

  Kjo është për shkak se të dhënat origjinale të pikselit janë krijuar për një madhësi të caktuar imazhi. Kur ndryshoni madhësinë, interpretuesi i imazhit bën një supozim se cilat të dhëna duhet të përdoren për të mbushur pikselët e rinj. Imazhet vektoriale janë më rezistente ndaj shkallëzimit; Kur ndryshoni madhësinë e figurës, formulat përkatëse matematikore mund të rregullohen.

• Madhësia e skedarit burimor të grafikave vektoriale është zakonisht më e vogël, kështu që grafikat SVG ngarkohen më shpejt se homologët e tyre raster dhe janë më pak intensive për të dhëna.
• Imazhet SVG jepen nga shfletuesi dhe mund të jepen në mënyrë programore. Ato mund të ndryshojnë në mënyrë dinamike, duke i bërë ato veçanërisht të përshtatshme për aplikacione të drejtuara nga të dhënat si grafikët.
• Skedari origjinal i imazhit SVG është në formë teksti, duke e bërë atë të aksesueshëm dhe miqësor me motorët e kërkimit.

Në këtë artikull, do të mësoni për përfitimet e formateve SVG dhe se si ato mund t'ju ndihmojnë të ndërtoni uebsajte HTML5.

Bazat e SVG

Krijimi i grafikëve SVG përdor një proces krejtësisht të ndryshëm nga krijimi i skedarëve JPEG, GIF ose PNG. Skedarët JPEG, GIF dhe PNG zakonisht krijohen duke përdorur një lloj programi të redaktimit të imazheve, siç është Adobe Photoshop. Imazhet SVG zakonisht krijohen duke përdorur një lloj gjuhe të bazuar në XML. Ka ndërfaqe grafike të përdoruesit për redaktimin e grafikëve SVG që do të gjenerojnë kodin XML pas imazhit për ju. Megjithatë, ky artikull supozon se ju jeni duke punuar drejtpërdrejt me XML. Informacioni rreth programeve të redaktimit të imazheve SVG mund të gjendet në seksion.

Lista 1 tregon një shembull të një skedari të thjeshtë SVG XML që vizaton një rreth të kuq me një kufi të zi 2-pikselë.

Listimi 1. Skedari XML SVG

Kodi i mësipërm prodhon imazhin e treguar në Figurën 1.

Figura 1. Rrethi i kuq me kufi të zi 2 piksel

Krijimi i formave bazë gjeometrike

Kur punoni me grafikë SVG, etiketat XML përdoren për të krijuar forma gjeometrike; këta elementë XML janë paraqitur në tabelën 1.

Tabela 1. Elementet XML për krijimin e grafikave SVG

elementi i linjës

Elementi i linjës është elementi më i thjeshtë grafik. Lista 2 tregon se si të krijoni një vijë horizontale.

Listimi 2. Krijimi i një vije horizontale

Kodi i paraqitur në Listimin 2 prodhon imazhin e paraqitur në Figurën 2.

Figura 2. Vijë e thjeshtë horizontale

Etiketa rrënjësore SVG ka atribute të gjerësisë dhe lartësisë që përcaktojnë zonën e vizatimit. Këto atribute veprojnë në të njëjtën mënyrë si atributet e lartësisë dhe gjerësisë së elementeve të tjerë HTML. Në këtë rast, përcaktohet se zona e punës zë të gjithë hapësirën e disponueshme.

Për më tepër, ky shembull përdor etiketën e stilit. Grafikat SVG mbështesin aplikimin e stileve në përmbajtje duke përdorur një shumëllojshmëri të gjerë metodash. Stilet në këtë artikull përfshihen për t'i bërë imazhet të lehta për t'u parë ose kur nevojiten atribute të caktuara, si ngjyra dhe gjerësia e vijës, për të dhënë një vizatim. Më shumë informacion rreth aplikimit të stileve në grafikë SVG mund të gjenden në seksion.

Ju mund të krijoni një përkufizim të linjës duke specifikuar koordinatat e fillimit dhe mbarimit në akset X dhe Y në lidhje me hapësirën e punës. Atributet x1 dhe y1 përfaqësojnë koordinatat e fillimit, dhe atributet x2 dhe y2 përfaqësojnë koordinatat e fundit të linjës. Për të ndryshuar drejtimin e vizatimit të një vije, thjesht duhet të ndryshoni koordinatat. Për shembull, duke modifikuar shembullin e mëparshëm, mund të krijoni një vijë diagonale siç tregohet në Listimin 3.

Listimi 3. Krijimi i një vije diagonale

Figura 3 tregon daljen e kodit të paraqitur në Listën 3.

Figura 3. Vija diagonale

element poliline

Një vijë e thyer është një vizatim i përbërë nga disa vija. Lista 4 tregon një shembull të krijimit të një vizatimi që duket si hapat e një shkalle.

Kodi i paraqitur në Listën 4 prodhon imazhin e paraqitur në Figurën 4.

Një poliline krijohet duke përdorur atributin e pikave dhe duke përcaktuar çifte të koordinatave X dhe Y të ndara me presje. Në shembullin e treguar, pika e parë përcaktohet si 0.40, ku 0 është koordinata X dhe 40 është koordinata Y. Megjithatë, një grup pikash nuk mjafton për të shfaqur imazhin në ekran, pasi ky grup tregon vetëm SVG jep pozicionin e fillimit. Ju nevojiten të paktën dy grupe pikash: një pikë fillimi dhe një pikë përfundimi (për shembull, pika = "0.40 40.40").

Ashtu si me vizatimin e vijave të thjeshta, linjat nuk duhet të jenë rreptësisht horizontale ose vertikale. Nëse ndryshoni vlerat nga shembulli i mëparshëm, mund të merrni forma të parregullta të bëra nga vija, si në Listën 5.

Listimi 5. Krijimi i një vije të dehur

Kodi në Listën 5 prodhon imazhin e paraqitur në Figurën 5.

Figura 5. Vija e dehur

element i drejtë

Për të krijuar një drejtkëndësh, ju vetëm duhet të përcaktoni gjerësinë dhe lartësinë e tij, siç tregohet në Listën 6.

Listimi 6. Krijimi i një drejtkëndëshi

Kodi në Listimin 6 prodhon imazhin e paraqitur në Figurën 6.

Figura 6. Drejtkëndësh

Etiketa rect mund të përdoret gjithashtu për të krijuar një katror; një katror është thjesht një drejtkëndësh me të njëjtën lartësi dhe gjerësi.

element rrethi

Rrethi krijohet duke përcaktuar koordinatat X dhe Y të qendrës dhe rrezes së rrethit, siç tregohet në Listën 7.

Listimi 7. Krijimi i një rrethi

Kodi në Listimin 7 prodhon imazhin e paraqitur në Figurën 7.

Figura 7. Rretho

Atributet cx dhe cy përcaktojnë pozicionin e qendrës së rrethit në lidhje me kanavacën. Meqenëse rrezja është gjysma e gjerësisë së rrethit, kur e përcaktoni, mbani në mend se gjerësia totale e figurës do të jetë dyfishi i vlerës që specifikoni.

Elementi elips

Në thelb, një elips është një rreth me dy rreze të specifikuara në kod, siç tregohet në Listën 8.

Listimi 8. Krijimi i një elipsi

Kodi në Listimin 8 prodhon imazhin e paraqitur në Figurën 8.

Figura 8. Elipsa

Në këtë rast, atributet cx dhe cy përcaktojnë gjithashtu koordinatat e qendrës në lidhje me kanavacën. Megjithatë, me një elips, ju përcaktoni një rreze për boshtin X dhe një rreze të dytë për boshtin Y duke përdorur atributet rx dhe ry.

element shumëkëndësh

Një shumëkëndësh është një figurë gjeometrike që përmban të paktën tre anë. Lista 9 krijon një trekëndësh të thjeshtë.

Listimi 9. Krijimi i një trekëndëshi

Kodi në Listimin 9 prodhon imazhin e paraqitur në Figurën 9.

Figura 9. Trekëndësh

Ngjashëm me punën me elementin poliline, poligonet krijohen duke përcaktuar çifte të koordinatave X dhe Y duke përdorur atributin pika.

Duke shtuar çifte koordinatash përgjatë boshteve X dhe Y, mund të krijoni shumëkëndësha me çdo numër brinjësh. Për shembull, duke modifikuar kodin në shembullin e mëparshëm, mund të krijoni një poligon me katër anë, siç tregohet në Listën 10.

Listimi 10. Krijimi i një shumëkëndëshi me katër anë

Kodi i paraqitur në Listën 10 prodhon imazhin e paraqitur në Figurën 10.

Figura 10. Shumëkëndëshi me katër anë

Duke përdorur etiketën e poligonit, mund të krijoni edhe forma gjeometrike të formave komplekse. Lista 11 krijon një vizatim me yje.

Listimi 11. Krijimi i një ylli

Kodi i paraqitur në Listën 11 prodhon imazhin e paraqitur në Figurën 11.

Figura 11. Shumëkëndëshi yll

elementi i rrugës

Elementi i rrugës është më kompleksi nga të gjithë elementët e vizatimit, duke ju lejuar të krijoni vizatime arbitrare duke përdorur një grup komandash të veçanta. Elementi i rrugës mbështet komandat e renditura në tabelën 2.

Tabela 2. Komandat e mbështetura nga elementi i rrugës

Këto komanda mund të përdoren në shkronja të mëdha ose të vogla. Nëse komanda është e specifikuar me shkronja të mëdha, aplikohet pozicionimi absolut. Nëse përdoret një komandë e vogël, aplikohet pozicionimi relativ. Dhënia e shembujve të përdorimit të të gjitha komandave është përtej qëllimit të këtij neni. Megjithatë, më poshtë janë disa shembuj që demonstrojnë bazat e përdorimit të këtyre komandave.

Duke përdorur elementin e rrugës, mund të krijoni çdo formë të thjeshtë gjeometrike nga shembujt e mëparshëm në këtë artikull. Lista 12 përdor elementin e rrugës për të krijuar një trekëndësh të rregullt.

Listimi 12. Krijimi i një trekëndëshi duke përdorur elementin e rrugës

Kodi i paraqitur në Listën 12 prodhon imazhin e paraqitur në Figurën 12.

Figura 12. Trekëndëshi i krijuar duke përdorur elementin e rrugës

Lista e komandave përcaktohet duke përdorur atributin d. Në këtë shembull, vizatimi fillon në pikën me koordinatat X 150 dhe Y 0, të përcaktuara nga komanda lëvizja në pikë (M150 0). Pastaj përdorni komandën për të vizatuar një vijë në pikën (L75 200). një vijë vizatohet në një pikë me koordinata X = 75 dhe Y = 200. Pas kësaj, një vijë tjetër vizatohet duke përdorur një komandë tjetër për të tërhequr një vijë në një pikë (L225 200). Më në fund, modeli mbyllet duke përdorur komandën snap (Z). Asnjë koordinatë nuk e shoqëron komandën Z, pasi për të mbyllur një shteg, sipas definicionit, vizatoni një vijë nga pozicioni aktual në pikën fillestare të vizatimit (në këtë rast, pika me koordinatat X = 150, Y = 0).

Qëllimi i shembullit të dhënë ishte t'ju tregojë konceptin; Nëse thjesht duhet të krijoni një trekëndësh të rregullt, është më mirë të përdorni etiketën e poligonit.

Fuqia e vërtetë e elementit të rrugës është aftësia e tij për të krijuar forma të personalizuara, siç tregohet në Listimin 13. Ky shembull është marrë nga dokumenti World Wide Web Consortium (W3C). Grafika vektoriale të shkallëzueshme (SVG) 1.1 (botimi i dytë)(shih seksionin).

Listimi 13. Krijimi i një forme të personalizuar duke përdorur elementin e rrugës

Kodi i paraqitur në Listën 13 prodhon imazhin e paraqitur në Figurën 13.

Figura 13. Forma e personalizuar e krijuar duke përdorur elementin e rrugës

Elementi i rrugës mund të përdoret për të krijuar dizajne komplekse si diagrame dhe linja të gërvishtura. Vini re se shembulli i dhënë përdor elementë të shumëfishtë të rrugës. Kur krijoni vizatime, nuk kufizoheni në asnjë element vizatimor në etiketën rrënjë SVG.

Filtrat dhe gradientët

Përveç stileve bazë CSS që u përdorën në shumë nga shembujt e mësipërm, grafikat SVG gjithashtu mbështesin përdorimin e filtrave dhe gradientëve. Në këtë seksion, do të mësoni se si të aplikoni filtra dhe gradientë në imazhet SVG.

Filtrat

Filtrat mund të përdoren për të aplikuar efekte speciale në imazhet SVG. SVG mbështet filtrat e mëposhtëm.

• feBlend
• feColorMatrix
• Transferimi i komponentëve fe
• fe Kompozit
• feConvolveMatrix
• FeDiffuseLighting
• feDisplacement Map
• feFlood
• feGaussianBlur
• feImage
• feMerge
• feMorfologjia
• feOffset
• feSpecularLighting
• pjellore
• feturbulenca
• FeDrita e Largët
• fePointLight
• feSpotLight

Lista 14 krijon një efekt të hijes që zbatohet në një drejtkëndësh.

Listimi 14. Krijimi i një efekti të hijes për një drejtkëndësh

Kodi i paraqitur në Listën 14 prodhon imazhin e paraqitur në Figurën 14.

Figura 14. Efekti i hijes së lëshimit për një drejtkëndësh

Filtrat përcaktohen brenda elementit def (shkurt për "përkufizim"). Filtrit në këtë shembull i është caktuar një identifikues (id) "f1". Vetë etiketa e filtrit ka atribute për të përcaktuar koordinatat X dhe Y, si dhe gjerësinë dhe lartësinë e filtrit. Brenda etiketës së filtrit, ju përdorni elementët e kërkuar të filtrit dhe vendosni vetitë e tyre në vlerat e dëshiruara.

Pasi të përcaktohet një filtër, ju e lidhni atë me një vizatim specifik duke përdorur atributin e filtrit, siç tregohet në . Vendosni vlerën e url-së në vlerën e atributit id që i është caktuar filtrit.

Gradientët

Gradient përfaqëson një kalim gradual nga një ngjyrë në tjetrën. Ekzistojnë dy lloje kryesore të gradientëve: linear dhe radial. Lloji i gradientit të aplikuar përcaktohet nga elementi që përdorni. Shembujt e mëposhtëm tregojnë se si të zbatohen gradientët linearë dhe radialë në një elips.

Lista 15 krijon një elips me një gradient linear.

Listimi 15. Krijimi i një elipsi me një gradient linear

Kodi i paraqitur në Listën 15 prodhon imazhin e paraqitur në Figurën 15.

Figura 15. Elipsa me gradient linear

Lista 16 krijon një elips me një gradient radial.

Listimi 16. Krijimi i një elipsi me një gradient radial

Kodi i paraqitur në Listën 16 prodhon imazhin e paraqitur në Figurën 16.

Figura 16. Elipsa me gradient radial

Gradientët, si filtrat, përcaktohen brenda elementit def. Çdo gradient i caktohet një identifikues (id). Atributet e gradientit (të tilla si ngjyrat) vendosen brenda etiketës së gradientit duke përdorur elementë ndalues. Për të aplikuar një gradient në një foto, vendosni vlerën url të atributit fill në identifikuesin (id) të gradientit të dëshiruar.

Teksti dhe SVG

Përveç krijimit të formave bazë gjeometrike, SVG mund të përdoret gjithashtu për të gjeneruar tekst, siç tregohet në Listimin 17.

Listimi 17. Krijimi i tekstit duke përdorur SVG

Kodi i paraqitur në Listimin 17 prodhon imazhin e paraqitur në Figurën 17.

Figura 17. Teksti i krijuar me SVG

Ky shembull krijon një fjali I love SVG duke përdorur elementin e tekstit. Kur përdorni elementin e tekstit, teksti aktual i shfaqur është midis elementeve të tekstit hapës dhe mbyllës.

Mund të shfaqni tekst përgjatë boshteve të ndryshme dhe madje edhe përgjatë shtigjeve. Në Listën 18, teksti shfaqet në një shteg në formë harku.

Listimi 18. Krijimi i tekstit përgjatë një shtegu në formë harku

Kodi i paraqitur në Listën 18 prodhon imazhin e paraqitur në Figurën 18.

Figura 18. Teksti i vendosur përgjatë një shtegu në formë harku

Ky shembull shton një hapësirë ​​emri shtesë XML, xlink, në etiketën rrënjësore SVG. Rruga e përdorur për të harkuar tekstin krijohet brenda elementit def, kështu që vetë shtegu nuk jepet në vizatim. Teksti i ekranit është i vendosur brenda një elementi textPath, i cili përdor hapësirën e emrave xlink për t'iu referuar ID-së së shtegut të dëshiruar.

Ashtu si me grafika të tjera SVG, ju gjithashtu mund të aplikoni filtra dhe gradientë në tekst. Lista 19 aplikon një filtër dhe gradient në tekst.

Listimi 19. Krijimi i tekstit me filtër dhe gradient

Kodi i paraqitur në Listimin 19 prodhon imazhin e paraqitur në Figurën 19.

Figura 19. Teksti me filtër dhe gradient

Shtimi i kodit SVG XML në faqet e internetit

Pasi të krijohet SVG XML, ai mund të përfshihet në faqet HTML në disa mënyra. Metoda e parë është të futni drejtpërdrejt kodin SVG XML në dokumentin HTML, siç tregohet në Listimin 20.

Listimi 20. Futja e drejtpërdrejtë e SVG XML në një dokument HTML

Kjo metodë është ndoshta më e thjeshta, por nuk inkurajon ripërdorimin. Mos harroni se SVG XML mund të ruhet si skedar me shtesën .svg. Kur ruani një grafik SVG si një skedar .svg, mund të përdorni elemente embed, objekt dhe iframe për ta përfshirë atë në faqet e internetit. Lista 21 tregon kodin për futjen e një skedari SVG XML duke përdorur elementin embed.

Listimi 21. Përfshirja e një skedari SVG XML duke përdorur elementin embed

Lista 22 tregon kodin për përfshirjen e një skedari SVG XML duke përdorur elementin e objektit.

Listimi 22. Përfshirja e një skedari XML SVG duke përdorur elementin e objektit

Lista 23 tregon kodin për përfshirjen e një skedari SVG XML duke përdorur një element iframe.

Listimi 23. Përfshirja e një skedari XML SVG duke përdorur një element iframe

Me një nga këto metoda, mund të përfshini të njëjtën grafik SVG në shumë faqe dhe ta përditësoni atë duke redaktuar skedarin origjinal .svg.

konkluzioni

Ky artikull mbulon bazat e krijimit të grafikës duke përdorur formatin SVG. Ju mësuat se si të përdorni elementët e integruar të gjeometrisë për të krijuar forma bazë gjeometrike, të tilla si një vijë, drejtkëndësh, rreth, e kështu me radhë. Ju gjithashtu mësuat se si të përdorni elementin e rrugës për të krijuar dizajne komplekse duke lëshuar një sekuencë komandash, të tilla si lëvizja në një pikë. , vizatimi i një vije në një pikë dhe vizatimi i një harku në një pikë. Ky artikull ju mëson gjithashtu se si të aplikoni filtra dhe gradientë në grafikat SVG, duke përfshirë grafikat me tekst, dhe si të përfshini grafikë SVG në faqet HTML.

Grafikat vektoriale përdoren gjerësisht në materialet e shtypura. Sa i përket faqes së internetit, këtu mund të përdorim edhe grafika vektoriale përmes SVG ose Scalable Vector Graphics. Specifikimi zyrtar W3.org e përshkruan atë si më poshtë:

Një gjuhë për përshkrimin e grafikave dydimensionale duke përdorur XML. SVG na lejon të përdorim tre lloje objektesh grafike: forma grafike vektoriale (për shembull, shtigje që përbëhen nga vija të drejta dhe të lakuara), imazhe dhe tekst.

Teknologjia është e disponueshme që nga viti 1999 dhe më 16 gusht 2011, ajo u përfshi në listën e rekomandimeve të W3C. Sidoqoftë, SVG ende nuk përdoret aq shpesh, pavarësisht nga avantazhet e shumta të përdorimit të grafikës vektoriale në vend të grafikës raster.

Përfitimet e grafikës vektoriale të shkallëzueshme

Për sa i përket përdorimit të grafikës në faqet e internetit, grafika vektoriale e shkallëzuar na ofron disa avantazhe ndaj grafikave raster, të cilat përfshijnë:

Rezoluta e pavarur

Grafikat raster (ose Bitmap) varen nga rezolucioni sepse krijohen duke përdorur pikselë. Nëse një element i tillë grafik zmadhohet në madhësi, sheshet e mëdha do të bëhen menjëherë të dukshme. Kjo nuk ndodh me grafikën vektoriale, sepse nuk varet nga rezolucioni, por përkundrazi është ndërtuar mbi llogaritjet matematikore, gjë që na lejon ta rrisim atë në çdo madhësi pa humbur cilësinë.

Reduktimi i kërkesave për HTTP

Grafikat vektoriale të shkallëzueshme mund të futen drejtpërdrejt në një dokument HTML duke përdorur etiketën svg, në mënyrë që shfletuesi të mos ketë nevojë të bëjë një kërkesë shtesë për grafikë. Kjo gjithashtu ka një efekt pozitiv në performancën e faqes në internet.

Stilimi dhe shkrimi

Integrimi i drejtpërdrejtë duke përdorur etiketën svg do të na lejojë gjithashtu të stilojmë grafikat duke përdorur CSS. Ne mund të ndryshojmë parametrat e objektit si ngjyra e sfondit, opaciteti, kufijtë, e kështu me radhë, në të njëjtën mënyrë si në HTML. Ne gjithashtu mund të kontrollojmë grafikën duke përdorur javascript.

Mundësia e animacionit dhe editimit

Një objekt SVG mund të animohet duke përdorur një element animacioni ose duke përdorur një bibliotekë JS si jQuery. Objekti SVG mund të modifikohet gjithashtu duke përdorur çdo redaktues teksti ose softuer grafik si (falas) ose .

Madhësia më e vogël e skedarit

SVG ka një madhësi skedari më të vogël në krahasim me grafikët raster.

Vizatimi i formave të thjeshta duke përdorur SVG

Pas specifikimit, ne mund të vizatojmë gjëra të tilla si poligone, rrathë, vija ose elipsa duke përdorur SVG dhe, në mënyrë që shfletuesi të gjenerojë grafika vektoriale të shkallëzuara, të gjithë këta elementë grafikë duhet të vendosen brenda etiketave "svg". Le të hedhim një vështrim në shembujt e mëposhtëm:

Linjë

Për të vizatuar një vijë duke përdorur SVG, mund të përdorim elementin "line". Ky element përdoret për të vizatuar një vijë të drejtë, kështu që do të përbëhet nga vetëm dy pika: pika e fillimit dhe pika e përfundimit.

Siç mund ta shihni më lart, koordinata e pikës së fillimit të linjës është specifikuar në dy atributet e para x1 dhe x2, dhe koordinata e pikës fundore është specifikuar nga atributet y1 dhe y2.

Ekzistojnë gjithashtu dy atribute të tjera këtu: goditje dhe gjerësia e goditjes, të cilat kontrollojnë ngjyrën dhe gjerësinë e kufirit. Nga ana tjetër, ne gjithashtu mund t'i përcaktojmë këto atribute në stilin inline, si kjo:

Style="stroke-width:1; stroke:rgb(0,0,0);"
dhe kjo do të na japë të njëjtin rezultat.

*

vijë e thyer

Këtu gjithçka është shumë e ngjashme me "vijën", por me elementin "polyline" mund të vizatojmë disa vija në vend të vetëm një. Ja një shembull:

Elementi "polyline" ka atribute pikash që përmbajnë të gjitha koordinatat e vijave.

*

Drejtkëndësh

Ne mund të vizatojmë një drejtkëndësh po aq lehtë, vetëm duke përdorur elementin "rect". Thjesht duhet të specifikojmë gjerësinë dhe lartësinë:

*

Rretho

Mund të vizatojmë edhe një rreth duke përdorur elementin "rreth". Në këtë shembull, ne do të vizatojmë një rreth me një rreze prej 100, e cila përcaktohet nga atributi r:

Dy atributet e para, cx dhe cy, përcaktojnë koordinatat qendrore të rrethit. Në shembullin e mësipërm, ne vendosëm 102 për të dy koordinatat x dhe y. Nëse këto atribute nuk janë të specifikuara, ato do të jenë të paracaktuara në 0.

*

Elipsa

Ne mund të vizatojmë elipsa duke përdorur elementin "elips". Këtu gjithçka funksionon në të njëjtën mënyrë si me rrethin, por këtë herë ne mund të kontrollojmë rrezen e vijës x dhe rrezen e linjës y veçmas përmes atributeve rx dhe ry.

*

Shumëkëndëshi

Me ndihmën e elementit “polygon” mund të vizatojmë shumëkëndësha, forma me disa kënde dhe brinjë si trekëndësh, tetëkëndësh. Shembull:

*

Përdorimi i një redaktuesi grafike vektoriale

Siç mund ta shihni, vizatimi i formave të thjeshta duke përdorur SVG në HTML është mjaft i lehtë. Sidoqoftë, nëse kemi nevojë për një objekt më kompleks, atëherë kjo metodë nuk do të na përshtatet më.

Për fat të mirë, siç e përmendëm më lart, ne mund të përdorim një redaktues grafike vektoriale si Adobe Illustrator ose Inkscape për të bërë këtë punë. Nëse jeni të njohur me këtë softuer, mund të vizatoni lehtësisht objekte duke përdorur një ndërfaqe miqësore për përdoruesit dhe jo duke përdorur kodin HTML.

Ose mund të futni gjithashtu vetë skedarin svg duke përdorur një nga elementët e mëposhtëm: embed, iframe, objekt.

Rezultati do të jetë i ngjashëm.

Në këtë shembull kemi përdorur s.

*

Mbështetje e shfletuesit për grafika vektoriale të shkallëzueshme

Sa i përket mbështetjes së shfletuesit, grafikat vektoriale të shkallëzueshme janë tashmë të mbështetura mirë, përveç IE8 dhe më herët. Por kjo mund të rregullohet duke përdorur një bibliotekë javascript të quajtur . Për t'i bërë gjërat më të lehta, ne do të përdorim një mjet për të kthyer kodin tonë SVG në një format të mbështetur nga Raphael.

Për të filluar, shkarkoni dhe përfshini bibliotekën Raphael.js në kodin tuaj HTML. Më pas, ngarkoni skedarin svg në sit, kopjoni dhe ngjisni kodin e krijuar në funksionin e mëposhtëm të ngarkesës:

Window.onload=funksion() (
//Kodi Raphael shkon këtu
}
Brenda etiketës së trupit, futni div-në e mëposhtme me atributin rsr id.

Dhe kjo eshte! Shikoni shembullin e dhënë në lidhjen më poshtë.

Në përfundim

Pra, këto janë bazat e SVG. Shpresojmë që tani të kuptoni pak për këtë temë. Kjo është një nga mënyrat më të mira për të optimizuar performancën e faqeve tuaja, duke ofruar ende grafikë që mund të shfaqen qartë edhe në ekranet Retina.

Si zakonisht, nëse jeni kurioz, ne kemi përgatitur një përzgjedhje të vogël artikujsh shtesë për ju.

* (Hyrje në SVG)
* (SVG: le të mos varemi nga rezolucioni)
* (Pse të mos përdorni SVG?)

Faleminderit për leximin dhe shpresojmë që ky artikull të jetë i dobishëm!

Kujdes! Ju nuk keni leje për të parë tekstin e fshehur.

Grafikat vektoriale përdoren gjerësisht në printim. Por ne gjithashtu mund ta përdorim atë për faqet e internetit që përdorin SVG ( Grafika vektoriale e shkallëzuar - grafika vektoriale e shkallëzueshme). Sipas specifikimeve të W3.org, SVG përcaktohet si:

Një gjuhë për përshkrimin e grafikave dydimensionale në XML. SVG lejon tre lloje objektesh: grafika vektoriale (të tilla si shtigjet e përbëra nga vija të drejta dhe kthesa), imazhe dhe tekst.

Përkundër faktit se SVG është përfshirë në rekomandimet e W3C që nga gushti 2011, kjo teknologji praktikisht nuk përdoret në projektet në internet, megjithëse ka një numër avantazhesh ndaj imazheve raster. Në këtë seri mësimesh do të prezantojmë se si të punohet me elementët SVG në faqet e internetit.

Përparësitë e SVG

Pavarësia e rezolutës

Imazhet raster varen nga rezolucioni. Grafikat marrin një pamje të paparaqitshme kur ndryshoni përmasat në një shkallë të caktuar. Me grafikë vektoriale, kjo situatë është në parim e pamundur, pasi gjithçka përfaqësohet nga shprehje matematikore që rillogariten automatikisht kur ndryshohet shkalla, dhe cilësia ruhet në çdo kusht.

Reduktimi i numrit të kërkesave HTTP

SVG mund të futet drejtpërdrejt në një dokument HTML duke përdorur etiketën svg, kështu që shfletuesi nuk ka nevojë të bëjë asnjë kërkesë për të shërbyer grafikën. Kjo qasje ka një efekt të mirë në karakteristikat e ngarkimit të faqes në internet.

Stilet dhe skriptet

Përfshirja me etiketën svg gjithashtu e bën të lehtë stilimin e grafikave tuaja duke përdorur CSS. Ju mund të ndryshoni vetitë e objektit si ngjyra e sfondit, transparenca, kufijtë, etj. Grafikat mund të manipulohen në një mënyrë të ngjashme duke përdorur JavaScript.

Lehtë për t'u redaktuar dhe animuar

Objektet SVG mund të animohen duke përdorur CSS ose JavaScript. Objektet SVG gjithashtu mund të modifikohen duke përdorur një redaktues teksti.

Madhësia më e vogël e skedarit

SVG ka një madhësi skedari më të vogël në krahasim me grafikët raster.

Forma themelore SVG

Sipas specifikimit, mund të vizatojmë disa forma themelore: vijë, polivijë, drejtkëndësh, rreth, elips. Të gjithë elementët duhet të futen në etiketë . Le të shohim në detaje elementët bazë.

Linjë

Për të shfaqur një rresht në SVG, përdorni elementin . Ai vizaton një segment për të cilin duhet të përcaktohen dy pika: fillimi dhe fundi.

Fillimi i segmentit përcaktohet nga atributet x1 dhe y1, dhe pika e fundit përcaktohet nga koordinatat në atributet x2 dhe y2.

Ekzistojnë gjithashtu dy atribute të tjera (stroke dhe stroke-width) që përdoren për të përcaktuar përkatësisht ngjyrën dhe gjerësinë e vijës.

Ky objekt është i ngjashëm me , por duke përdorur elementin Ju mund të vizatoni disa rreshta në të njëjtën kohë.

Elementi Përmban atributin e pikave, i cili përdoret për të specifikuar koordinatat e pikave.

Drejtkëndëshi vizatohet duke përdorur elementin . Ju duhet të përcaktoni gjerësinë dhe lartësinë.

Për të shfaqur një rreth ne përdorim elementin . Në shembullin e mëposhtëm, ne krijojmë një rreth me një rreze prej 100, e cila përcaktohet në atributin r:

Dy atributet e para cx dhe cy përcaktojnë koordinatat e qendrës. Në shembullin e mësipërm, ne vendosëm vlerën në 102 për të dy koordinatat. Vlera e paracaktuar është 0.

Për të shfaqur një elips ne përdorim elementin . Punon njësoj si rrethi, por ne mund të specifikojmë në mënyrë specifike rrezet x dhe y duke përdorur atributet rx dhe ry:

Elementi Shfaq forma poliedrike si trekëndësh, gjashtëkëndësh etj. Për shembull:

Përdorimi i një redaktuesi grafike vektoriale

Dalja e objekteve të thjeshta SVG në HTML është e lehtë. Megjithatë, ndërsa kompleksiteti i objektit rritet, kjo praktikë mund të çojë në një sasi të madhe të punës së kërkuar.

Por ju mund të përdorni çdo redaktues grafik vektorial (për shembull, Adobe Illustrator ose Inkscape) për të krijuar objekte. Nëse keni një mjet si ky, vizatimi i objekteve të nevojshme në to është shumë më i lehtë sesa kodimi i grafikëve në një etiketë HTML.

Ju mund të kopjoni komandat grafike vektoriale nga një skedar në një dokument HTML. Ose mund të futni skedarin .svg duke përdorur një nga elementët e mëposhtëm: embed , iframe dhe objekt .

Rezultati do të jetë i njëjtë.

Mbështetja e shfletuesit

SVG ka mbështetje të mirë në shumicën e shfletuesve modernë, me përjashtim të versionit IE 8 dhe më të hershëm. Por problemi mund të zgjidhet duke përdorur bibliotekën JavaScript. Për ta bërë më të lehtë punën tuaj, mund të përdorni mjetin ReadySetRaphael.com për të kthyer kodin SVG në formatin Raphael.

Së pari, ne shkarkojmë dhe përfshijmë bibliotekën në dokumentin HTML. Pastaj ngarkojmë skedarin .svg, kopjojmë dhe ngjisim kodin që rezulton në funksion pas ngarkimit:

Në etiketën body vendosim elementin e mëposhtëm div me identifikuesin rsr.

Dhe gjithçka është gati.

Në tutorialin tjetër të serisë, ne do të shikojmë se si të stiloni objektet SVG në CSS.

Shumica e faqeve të internetit përmbajnë grafikë. Kjo ju lejon të paraqisni informacionin me ngjyra dhe qartë. Në shumë raste, është më mirë të tregosh një foto sesa të japësh një përshkrim të gjatë teksti.
Ka dy mënyra për të vendosur grafikë në një faqe:

• futja e fotografive individuale;
• duke mbushur sfondin me një foto.

Në çdo rast, imazhi grafik merret nga skedari.

Futja e një imazhi grafik nga një skedar i formatit grafik në një faqe bëhet duke përdorur etiketën (nga anglishtja, imazh - imazh) duke treguar adresën e skedarit si një argument i atributit SRC:

Adresa e skedarit grafik është ose një URL ose një emër skedari, ndoshta me një shteg. Për shembull, për të shfaqur skedarin grafik logotip.jpg, duhet të shkruani etiketën

Për të rritur shpejtësinë e transferimit të një imazhi grafik në një etiketë mund të përdorni atributin LOWSRC (parametër shtesë), i cili merr si argument adresën e skedarit grafik. Mund të krijoni dy skedarë grafikë: njëri (për shembull, le të themi logotip.jpg) përmban një imazh me rezolucion të lartë dhe tjetri (për shembull, logotip.gif) përmban një imazh me rezolucion të ulët. Më pas etiketoni

Udhëzon shfletuesin që fillimisht të shkarkojë skedarin logotip.gif dhe më pas ta zëvendësojë me skedarin logotip.jpg pasi të merret.
Një mënyrë tjetër për të përshpejtuar ngarkimin e grafikës është të specifikoni përmasat e zonës drejtkëndore në të cilën do të vendoset grafika duke përdorur atributet WIDTH dhe HEIGHT, të matura në piksel. Nëse specifikoni këto atribute, shfletuesi së pari do të ndajë hapësirë ​​për grafikët, do të përgatisë paraqitjen e dokumentit, do të shfaqë tekstin dhe vetëm më pas do të ngarkojë grafikën. Vini re se shfletuesi ngjesh ose shtrin imazhin që të përshtatet brenda madhësisë së kornizës së specifikuar. Një shembull i specifikimit të dimensioneve të imazhit:

Grafikat zakonisht përdoren në lidhje me tekstin, kështu që lind sfida e përafrimin e tekstit dhe grafikës. Ky problem zgjidhet duke përdorur atributin RRESHTOJ etiketë duke përdorur argumente të ndryshme. Për shembull, ne mund të dëshirojmë që teksti të rrjedhë rreth një imazhi në të djathtë ose në të majtë. Zakonisht fotografia është e ngulitur ngushtë me tekstin, i cili mund të jetë i shëmtuar. Për të shmangur këtë, mund të vendosni margjina boshe rreth ilustrimit. Fushat krijohen duke përdorur atribute VSPACE për kufijtë e sipërm dhe të poshtëm dhe NSSPACE për margjinat anësore në etiketë . Argumentet e këtyre atributeve përcaktohen si numra që specifikojnë madhësinë e fushave në pixel. Për të anuluar mbështjelljen e tekstit rreth grafikëve, përdorni etiketën
.
Etiketa e mëposhtme vendos grafikën nga skedari logotip.jpg të mbështillet në të djathtë (imazhi do të jetë në të majtë të tekstit):

Nëse dëshironi të vendosni një fotografi në të djathtë të tekstit, atëherë ju duhet atributi RRESHTOJ caktoni argument E DREJTË:

Për të vendosur kufijtë rreth imazhit, duhet të shkruani një etiketë si:

Këtu numrat 20 dhe 10 përcaktojnë madhësinë e fushave.
Le të shqyrtojmë një shembull të përdorimit të kombinuar të grafikës dhe teksteve. Hapni Notepad (editori i tekstit Notepad) Windows. Shkruani kodin HTML në të duke përdorur etiketat e diskutuara më sipër. Më poshtë është një program që nxjerr disa tekst dhe grafikë. Ju mund të përdorni cilindo nga skedarët që keni si skedar grafik. Skedari i përdorur këtu është logotip.gif.

<Н1>Teksti mbështillet rreth grafikëve në të djathtë
Ky është një shembull i përdorimit të tekstit dhe grafikës së bashku.
Teksti i programit HTML mund të shkruhet në çdo redaktues teksti. Kjo përdor etiketat e shënimit të tekstit.

Ky tekst shfaqet nga një paragraf i ri. Për ta bërë këtë, ne përdorëm një etiketë të veçantë.

Provoni të ndryshoni madhësinë e dritares së shfletuesit tuaj. Vini re se si ndryshon faqosja e tekstit.

Oriz. 657. Teksti mbështillet rreth figurës në të djathtë

Mundësi të gjera për pozicionimin e saktë të imazheve (si dhe elementëve të tjerë) në faqe ofrojnë tabelat Dhe stilet. Këta elementë HTML do të diskutohen më vonë. Për shembull, mund të përcaktoni një tabelë pa korniza të dukshme dhe të vendosni fotografi, tekste dhe elementë të tjerë në qelizat e kësaj tabele.