Koja se oznaka koristi za integraciju grafike? Skalabilna vektorska grafika u HTML5

Osnovni koncepti i upotreba

Format skalabilne vektorske grafike (SVG) dio je porodice standarda vektorske grafike. Vektorska grafika se razlikuje od rasterske grafike, u kojoj je definicija boje svakog piksela pohranjena u nekom nizu podataka. Najčešći rasterski formati koji se danas koriste na Internetu su JPEG, GIF i PNG, od kojih svaki ima svoje prednosti i nedostatke.

Često korištene skraćenice

• CSS: Kaskadni listovi stilova
• GIF: Format za razmjenu grafike
• GUI: Grafičko korisničko sučelje
• HTML: jezik za označavanje hiperteksta
• JPEG: Zajednička grupa stručnjaka za fotografiju
• PNG: prijenosna mrežna grafika
• SVG: skalabilna vektorska grafika
• XML: Extensible Markup Language

SVG format ima nekoliko prednosti u odnosu na bilo koji rasterski format:

• SVG grafika je kreirana korišćenjem matematičkih formula koje zahtevaju mnogo manje podataka za skladištenje u originalnoj datoteci jer nema potrebe da se pohranjuju podaci za svaki pojedinačni piksel.
• Vektorske slike bolje se mijenjaju. Pokušaj skaliranja slika objavljenih na mreži iznad njihove originalne veličine može rezultirati izobličenim (ili pikseliziranim) slikama.

  To je zato što su originalni pikselski podaci dizajnirani za određenu veličinu slike. Prilikom promjene veličine, renderer slike pretpostavlja koje podatke treba koristiti za popunjavanje novih piksela. Vektorske slike su otpornije na skaliranje; Prilikom promjene veličine slike moguće je podesiti odgovarajuće matematičke formule.

• Veličina izvorne datoteke vektorske grafike je obično manja, tako da se SVG grafika učitava brže od svojih rasterskih kolega i manje zahtijeva podatke.
• SVG slike se prikazuju u pretraživaču i mogu se prikazati programski. Mogu se dinamički mijenjati, što ih čini posebno pogodnim za aplikacije vođene podacima kao što su grafikoni.
• Originalni SVG slikovni fajl je u tekstualnom obliku, što ga čini pristupačnim i pogodnim za pretraživače.

U ovom članku ćete naučiti o prednostima SVG formata i kako vam oni mogu pomoći da napravite HTML5 web stranice.

SVG Basics

Kreiranje SVG grafike koristi potpuno drugačiji proces od kreiranja JPEG, GIF ili PNG datoteka. JPEG, GIF i PNG datoteke se obično kreiraju pomoću neke vrste programa za uređivanje slika, kao što je Adobe Photoshop. SVG slike se obično kreiraju pomoću neke vrste jezika zasnovanog na XML-u. Postoje grafički korisnički interfejsi za uređivanje SVG grafike koji će za vas generisati XML kod iza slike. Međutim, ovaj članak pretpostavlja da radite direktno s XML-om. Informacije o SVG programima za uređivanje slika možete pronaći u odjeljku.

Listing 1 prikazuje primjer jednostavne SVG XML datoteke koja crta crveni krug sa crnim okvirom od 2 piksela.

Listing 1. SVG XML datoteka

Gornji kod proizvodi sliku prikazanu na slici 1.

Slika 1. Crveni krug sa crnim okvirom od 2 piksela

Kreiranje osnovnih geometrijskih oblika

Kada radite sa SVG grafikom, XML oznake se koriste za kreiranje geometrijskih oblika; ovi XML elementi su prikazani u tabeli 1.

Tabela 1. XML elementi za kreiranje SVG grafike

linijski element

Element linije je najjednostavniji grafički element. Listing 2 pokazuje kako se kreira horizontalna linija.

Listing 2. Kreiranje horizontalne linije

Kod prikazan na Listingu 2 proizvodi sliku prikazanu na slici 2.

Slika 2. Jednostavna horizontalna linija

SVG korijenska oznaka ima atribute širine i visine koji definiraju područje za crtanje. Ovi atributi djeluju na isti način kao atributi visine i širine drugih HTML elemenata. U ovom slučaju se utvrđuje da radna površina zauzima sav raspoloživi prostor.

Dodatno, ovaj primjer koristi oznaku stila. SVG grafika podržava primenu stilova na sadržaj koristeći širok spektar metoda. Stilovi u ovom članku uključeni su kako bi slike bile lake za uočavanje ili kada su određeni atributi, kao što su boja i širina linije, potrebni za prikazivanje crteža. Više informacija o primeni stilova u SVG grafici možete pronaći u odeljku.

Definiciju linije možete kreirati tako što ćete odrediti početne i krajnje koordinate na X i Y osi u odnosu na radni prostor. Atributi x1 i y1 predstavljaju početne koordinate, a x2 i y2 atributi predstavljaju krajnje koordinate linije. Da biste promijenili smjer crtanja linije, jednostavno morate promijeniti koordinate. Na primjer, modifikacijom prethodnog primjera, možete kreirati dijagonalnu liniju kao što je prikazano na Listingu 3.

Listing 3. Kreiranje dijagonalne linije

Slika 3 prikazuje izlaz koda prikazanog na Listingu 3.

Slika 3. Dijagonalna linija

element poliline

Izlomljena linija je crtež sastavljen od nekoliko linija. Listing 4 pokazuje primjer kreiranja crteža koji izgleda kao stepenice stepenica.

Kod na Listingu 4 proizvodi sliku prikazanu na slici 4.

Polilinija se kreira korištenjem atributa točke i definiranjem parova X i Y koordinata odvojenih zarezima. U prikazanom primeru, prva tačka je definisana kao 0,40, gde je 0 koordinata X, a 40 Y koordinata, međutim, jedan skup tačaka nije dovoljan za prikaz slike na ekranu, pošto ovaj skup govori samo o SVG-u prikazati početnu poziciju. Potrebna su vam najmanje dva skupa tačaka: početna i krajnja tačka (na primjer, tačke="0,40 40,40").

Kao i kod crtanja jednostavnih linija, linije ne moraju biti strogo horizontalne ili vertikalne. Ako promijenite vrijednosti iz prethodnog primjera, možete dobiti nepravilne oblike napravljene od linija, kao u Listingu 5.

Listing 5. Kreiranje nazubljene linije

Kod na Listingu 5 proizvodi sliku prikazanu na slici 5.

Slika 5. Nazubljena linija

rect element

Da biste kreirali pravougaonik, samo trebate definirati njegovu širinu i visinu, kao što je prikazano u Listingu 6.

Listing 6. Kreiranje pravokutnika

Kod na Listingu 6 proizvodi sliku prikazanu na slici 6.

Slika 6. Pravougaonik

Rect tag se također može koristiti za kreiranje kvadrata; kvadrat je jednostavno pravougaonik iste visine i širine.

element kruga

Krug je kreiran definisanjem X i Y koordinata centra i radijusa kruga, kao što je prikazano u Listingu 7.

Listing 7. Kreiranje kruga

Kod na Listingu 7 proizvodi sliku prikazanu na slici 7.

Slika 7. Krug

Atributi cx i cy određuju položaj centra kruga u odnosu na platno. Budući da je radijus polovina širine kruga, kada ga određujete, imajte na umu da će ukupna širina slike biti dvostruko veća od vrijednosti koju navedete.

Element elipsa

U suštini, elipsa je krug sa dva radijusa navedena u kodu, kao što je prikazano u Listingu 8.

Listing 8. Kreiranje elipse

Kod na Listingu 8 proizvodi sliku prikazanu na slici 8.

Slika 8. Elipsa

U ovom slučaju, atributi cx i cy također definiraju koordinate centra u odnosu na platno. Međutim, pomoću elipse definirate jedan polumjer za os X, a drugi radijus za Y-os koristeći atribute rx i ry.

element poligona

Poligon je geometrijska figura koja sadrži najmanje tri strane. Listing 9 stvara jednostavan trokut.

Listing 9. Kreiranje trougla

Kod na Listingu 9 proizvodi sliku prikazanu na slici 9.

Slika 9. Trougao

Slično kao u radu sa elementom polilinije, poligoni se kreiraju definisanjem parova X i Y koordinata koristeći atribut point.

Dodavanjem parova koordinata duž X i Y osi, možete kreirati poligone s bilo kojim brojem strana. Na primjer, modifikacijom koda u prethodnom primjeru, možete kreirati četverostrani poligon, kao što je prikazano na Listingu 10.

Listing 10. Kreiranje četverostranog poligona

Kod prikazan na Listingu 10 proizvodi sliku prikazanu na slici 10.

Slika 10. Četvorostrani poligon

Koristeći poligon tag, možete kreirati i geometrijske oblike složenih oblika. Listing 11 stvara crtež zvijezde.

Listing 11. Kreiranje zvijezde

Kod na Listingu 11 proizvodi sliku prikazanu na slici 11.

Slika 11. Zvjezdani poligon

element putanje

Element putanje je najkompleksniji od svih elemenata crteža, koji vam omogućava da kreirate proizvoljne crteže pomoću skupa posebnih naredbi. Element putanje podržava komande navedene u tabeli 2.

Tablica 2. Naredbe koje podržava element staze

Ove naredbe se mogu koristiti velikim ili malim slovima. Ako je naredba navedena velikim slovima, primjenjuje se apsolutno pozicioniranje. Ako se koristi naredba malim slovima, primjenjuje se relativno pozicioniranje. Navođenje primjera korištenja svih naredbi je izvan okvira ovog članka. Međutim, ispod je nekoliko primjera koji pokazuju osnove korištenja ovih naredbi.

Koristeći element putanje, možete kreirati bilo koje jednostavne geometrijske oblike iz prethodnih primjera u ovom članku. Listing 12 koristi element putanje za kreiranje pravilnog trokuta.

Listing 12. Kreiranje trokuta pomoću elementa putanje

Kod na Listingu 12 proizvodi sliku prikazanu na slici 12.

Slika 12. Trokut kreiran pomoću elementa putanje

Lista naredbi je definirana pomoću atributa d. U ovom primjeru, crtanje počinje u tački s koordinatama X 150 i Y 0, definiranim naredbom za pomicanje u tačku (M150 0). Zatim koristite naredbu da nacrtate liniju do tačke (L75 200). crta se linija do tačke sa koordinatama X = 75 i Y = 200. Nakon toga, druga linija se iscrtava drugom komandom za crtanje linije do tačke (L225 200). Konačno, obrazac se zatvara pomoću komande za ugrađivanje (Z). Komandu Z ne prate nikakve koordinate, jer da biste zatvorili putanju, po definiciji, povlačite liniju od trenutne pozicije nazad do početne tačke crteža (u ovom slučaju, tačka sa koordinatama X = 150, Y = 0).

Svrha navedenog primjera je bila da vam pokaže koncept; Ako samo treba da kreirate običan trougao, bolje je da koristite oznaku poligona.

Prava moć elementa putanje je njegova sposobnost da kreira prilagođene oblike, kao što je prikazano u Listingu 13. Ovaj primjer je preuzet iz dokumenta World Wide Web Consortium (W3C). Skalabilna vektorska grafika (SVG) 1.1 (2. izdanje)(vidi odjeljak).

Listing 13. Kreiranje prilagođenog oblika pomoću elementa putanje

Kod prikazan na listi 13 proizvodi sliku prikazanu na slici 13.

Slika 13. Prilagođeni oblik kreiran pomoću elementa putanje

Element putanje se može koristiti za kreiranje složenih dizajna kao što su dijagrami i krivudave linije. Imajte na umu da navedeni primjer koristi višestruke elemente putanje. Kada kreirate crteže, niste ograničeni ni na jedan element crteža u SVG root oznaci.

Filteri i gradijenti

Pored osnovnih CSS stilova koji su korišćeni u mnogim gornjim primerima, SVG grafika takođe podržava upotrebu filtera i gradijenata. U ovom odeljku ćete naučiti kako da primenite filtere i gradijente na SVG slike.

Filteri

Filteri se mogu koristiti za primjenu specijalnih efekata na SVG slike. SVG podržava sljedeće filtere.

• feBlend
• feColorMatrix
• feComponentTransfer
• feComposite
• feConvolveMatrix
• feDiffuseLighting
• feDisplacementMap
• feFlood
• feGaussianBlur
• feImage
• feMerge
• feMorphology
• feOffset
• feSpecularLighting
• feTile
• feTurbulence
• feDistantLight
• fePointLight
• feSpotLight

Listing 14 stvara efekat sjene koja se primjenjuje na pravougaonik.

Listing 14. Kreiranje efekta sjene za pravougaonik

Kod prikazan na listi 14 proizvodi sliku prikazanu na slici 14.

Slika 14. Efekat sjene za pravougaonik

Filteri su definirani unutar def elementa (skraćeno od “definicija”). Filteru u ovom primjeru je dodijeljen identifikator (id) "f1". Sama oznaka filtera ima atribute za definiranje X i Y koordinata, kao i širinu i visinu filtera. Unutar oznake filtera koristite potrebne elemente filtera i postavljate njihova svojstva na željene vrijednosti.

Kada je filter definisan, povezujete ga sa određenim crtežom koristeći atribut filtera, kao što je prikazano u . Postavite url vrijednost na vrijednost atributa id koja je dodijeljena filteru.

Gradijent

Gradijent predstavlja postepeni prijelaz iz jedne boje u drugu. Postoje dvije glavne vrste gradijenata: linearni i radijalni. Tip primijenjenog gradijenta određen je elementom koji koristite. Sljedeći primjeri pokazuju kako primijeniti linearne i radijalne gradijente na elipsu.

Listing 15 stvara elipsu sa linearnim gradijentom.

Listing 15. Kreiranje elipse sa linearnim gradijentom

Kod prikazan na listi 15 proizvodi sliku prikazanu na slici 15.

Slika 15. Elipsa sa linearnim gradijentom

Listing 16 stvara elipsu sa radijalnim gradijentom.

Listing 16. Kreiranje elipse s radijalnim gradijentom

Kod prikazan na listi 16 proizvodi sliku prikazanu na slici 16.

Slika 16. Elipsa sa radijalnim gradijentom

Gradijent, kao i filteri, definisani su unutar def elementa. Svakom gradijentu je dodijeljen identifikator (id). Atributi gradijenta (kao što su boje) se postavljaju unutar oznake gradijenta pomoću stop elemenata. Da biste primijenili gradijent na sliku, postavite vrijednost url atributa fill na identifikator (id) željenog gradijenta.

Tekst i SVG

Pored kreiranja osnovnih geometrijskih oblika, SVG se takođe može koristiti za generisanje teksta, kao što je prikazano u Listingu 17.

Listing 17. Kreiranje teksta koristeći SVG

Kod prikazan na Listingu 17 proizvodi sliku prikazanu na slici 17.

Slika 17. Tekst kreiran sa SVG

Ovaj primjer kreira I love SVG rečenicu koristeći element teksta. Kada koristite element teksta, stvarni prikazani tekst je između početnog i završnog elementa teksta.

Možete prikazati tekst duž različitih osa, pa čak i duž putanja. U Listingu 18, tekst je prikazan u obliku luka.

Listing 18. Kreiranje teksta duž putanje u obliku luka

Kod prikazan na listi 18 proizvodi sliku prikazanu na slici 18.

Slika 18. Tekst postavljen duž putanje u obliku luka

Ovaj primjer dodaje dodatni XML prostor imena, xlink, u SVG root oznaku. Putanja koja se koristi za luk teksta kreirana je unutar def elementa, tako da se sama putanja ne prikazuje na crtežu. Prikazani tekst je ugniježđen unutar elementa textPath, koji koristi prostor imena xlink za upućivanje na id željene putanje.

Kao i kod druge SVG grafike, možete primijeniti filtere i gradijente na tekst. Listing 19 primjenjuje filter i gradijent na tekst.

Listing 19. Kreiranje teksta sa filterom i gradijentom

Kod prikazan na listi 19 proizvodi sliku prikazanu na slici 19.

Slika 19. Tekst sa filterom i gradijentom

Dodavanje SVG XML koda na web stranice

Kada se SVG XML kreira, može se uključiti u HTML stranice na nekoliko načina. Prvi metod je direktno umetanje SVG XML-a u HTML dokument, kao što je prikazano u Listingu 20.

Listing 20. Direktno umetanje SVG XML-a u HTML dokument

Ova metoda je vjerovatno najjednostavnija, ali ne potiče ponovnu upotrebu. Zapamtite da SVG XML može biti sačuvan kao datoteka sa ekstenzijom .svg. Kada sačuvate SVG grafiku kao .svg datoteku, možete koristiti elemente za ugrađivanje, objekt i iframe da biste je uključili u web stranice. Listing 21 prikazuje kod za ugrađivanje SVG XML datoteke pomoću elementa za ugrađivanje.

Listing 21. Uključujući SVG XML fajl pomoću elementa za ugrađivanje

Listing 22 prikazuje kod za uključivanje SVG XML datoteke pomoću elementa objekta.

Listing 22. Uključivanje SVG XML datoteke pomoću elementa objekta

Listing 23 prikazuje kod za uključivanje SVG XML datoteke pomoću iframe elementa.

Listing 23. Uključujući SVG XML fajl koristeći iframe element

Pomoću jednog od ovih metoda možete uključiti istu SVG grafiku na više stranica i ažurirati je uređujući originalnu .svg datoteku.

Zaključak

Ovaj članak pokriva osnove kreiranja grafike pomoću SVG formata. Naučili ste da koristite ugrađene geometrijske elemente za kreiranje osnovnih geometrijskih oblika, kao što su linija, pravougaonik, krug i tako dalje. Takođe ste naučili kako da koristite element putanje za kreiranje složenih dizajna izdavanjem niza naredbi. kao što je kretanje do tačke, crtanje linije do tačke i crtanje luka do tačke. Ovaj članak vas takođe uči kako da primenite filtere i gradijente na SVG grafiku, uključujući grafiku sa tekstom, i kako da uključite SVG grafiku u HTML stranice.

Postoji oznaka za uključivanje slike na određenoj lokaciji na stranici. . Ova oznaka ima obavezan parametar: SRC="", i nekoliko opcionih. SRC="" parametar govori pretraživaču adresu na kojoj treba tražiti grafiku, a vrijednost bi trebala biti URL resursa na kojem se grafička datoteka nalazi. U najjednostavnijem slučaju, ova datoteka će biti smještena u korijenski direktorij ili IMG folder vaše stranice. Opcioni parametri:

Parametar ALT="" kao vrijednost sadrži natpis koji govori o sadržaju slike za one posjetioce čiji pretraživači ne podržavaju grafiku ili rade u grafičkom disabled modu. Isti natpis se pojavljuje kada pređete mišem preko slike.

Parametri WIDTH="" HEIGHT="" kao vrijednosti imaju dimenzije slike u širini i visini u pikselima. Preporučljivo je navesti ove parametre u kodu stranice kako bi pretraživač unaprijed ostavio prostor za sliku, a zatim će se pri učitavanju stranica manje „trzati“. Osim toga, ovi parametri se mogu koristiti za podešavanje veličine slike u prozoru pretraživača.

Parametar BORDER="" crta ivicu oko slike. Vrijednost je broj koji označava širinu okvira u pikselima.

Parametar ALIGN= određuje položaj slike na stranici i može uzeti vrijednosti TOP - poravnava gornju ivicu slike sa najvišim elementom tekuće linije, TEXTTOP - poravnava gornju ivicu slike sa najviši tekstualni element tekuće linije, MIDDLE - poravnava sredinu slike sa osnovnom linijom tekuće linije, ABSMIDDLE - poravnava sredinu slike sa sredinom tekuće linije. BASELINE ili BOTTOM - poravnava donju ivicu slike sa osnovnom linijom tekuće linije, ABSBOTTOM - poravnava donju ivicu slike sa donjom ivicom trenutne linije, HSPACE= - određuje horizontalnu uvlaku, VSPACE= - određuje vertikalna uvlaka.

Sintaksa oznake:

Ticker

Tekuća linija je određena oznakom .

Atributi ove oznake su bgcolor - boja pozadine tekuće linije, visina - visina linije, širina - širina linije.

Smjer - postavlja smjer kretanja puzeće linije - direction="lijevo" (desno, gore, dolje) - kretanje lijevo (desno, gore, dolje).

Ponašanje - ponašanje linije - ponašanje="scroll" (slajd, alternativno). Scroll - normalno pomicanje (ne morate ga specificirati, to je zadano)

Klizanje - skrolovanje sa zaustavljanjem, linija ide do ivice i zaustavlja se. Ako koristite parametar petlje istovremeno sa behavor="slide", linija će se pomicati postavljeni broj puta i zaustaviti se na rubu. Alternativno - linija će se pomicati od ruba do ruba.
Scrollamount - brzina kretanja linije, scrollamount="1". Može imati vrijednosti od 1 do 10. 1 je najsporije kretanje, 10 je najbrže.

Sintaksa oznake: tekst

Moderni web pretraživači mogu reproducirati video i audio datoteke u različitim formatima. Da bi to učinili, koriste ugrađene plejere (dodatak, ActiveX kontrole) ili eksterne programe za reprodukciju. Možete umetnuti zvuk ili video u HTML dokument koristeći različite oznake:

- za umetanje pozadinskog zvuka;

- za umetanje video zapisa u AVI formatu;

- za umetanje zvučnih i video datoteka;