≡× JELOVNIK

• Windows 7
• Windows 8
• Windows XP
• Windows općenito
• Željezo

Osnove svg. Što je SVG? Osnove. SVG stil

SVG datoteke su skalabilne vektorske grafičke datoteke. Točnije, to je jezik za opisivanje dvodimenzionalne grafike. Osnova je bio XML označni jezik.
Ovaj format ima niz prednosti: budući da su vektorske slike, SVG slike zadržavaju kvalitetu bez obzira na to kako su skalirane ili im je promijenjena veličina. SVG slike podržavaju interaktivnost i animaciju. SVG je W3C standard, što znači da ima dobru i kvalitetnu podršku. SVG datoteke možete stvarati ne samo u grafičkim uređivačima, već iu bilo kojem uređivaču teksta.
SVG slike temeljene na XML-u mogu se pretraživati, indeksirati i mogu se skriptirati i komprimirati.

Prije nego što prijeđemo na crtanje bez crtanja, pogledajmo strukturu prazne svg datoteke, dovoljne za prikaz u bilo kojem programu.

1.
2.
3.
4.
5.

Radi praktičnosti, linije su numerirane. Prvi redak sadrži standardnu ​​deklaraciju XML dokumenta.
Drugi red je indikacija DTD sheme dokumenta. Treći redak postavlja veličinu stvorenog dokumenta na 600 x 600 piksela. Prvi atribut oznake
Ako otvorite crtež izrađen u inkscapeu u notepadu, možete pronaći dodatne oznake koje inkscape stvara prema zadanim postavkama. Ako prilikom spremanja crteža odaberete jednostavan svg, struktura datoteke bit će malo drugačija.
Prijeđimo na stvaranje osnovnih oblika. Naoružajte se notesom i samo naprijed. Provjeravamo što radimo u inkscapeu, tako da ga održavamo aktivnim.

Krug.

Da biste stvorili krug, dodajte liniju u našu praznu svg datoteku
Atributi su koordinate središta kruga (cx i cy) i polumjer (r). U ovom slučaju, ishodište koordinata nalazi se u gornjem lijevom kutu radnog lista. Puna svg datoteka:

Krug će se stvoriti točno u središtu dokumenta, s radijusom od 100 piksela. Budući da nije bilo uputa o boji ispune, potezu, slojevima ili drugim efektima, krug je iscrtan bez poteza i ispunjen crnom bojom, što vidimo kada otvorimo dokument u Inkscapeu. Imajte na umu da u dokumentu neće biti slojeva.

Oznake atributa cx, cy I r je standardna. Postavimo potez i ispunu našeg kruga, a također postavimo debljinu poteza na 6 piksela.

fill= "zeleni" stroke= "žuti" stroke-width= "6"/>

Ispuna je postavljena na zelenu, a potez na žutu.

Ono što je zanimljivo je da ako kreirate sloj u ovom dokumentu, možete vidjeti da crtež kruga neće biti na kreiranom sloju, već negdje tamo? Odgovarajući atributi označeni su crvenom bojom. Ako trebate stvoriti krug bez ispune ili poteza, postavite vrijednost odgovarajućeg atributa na ništa

stroke= "nema"

Da biste promijenili prozirnost ispune, dodajte atribut neprozirnost, Na primjer neprozirnost= "0,5" smanjuje prozirnost ispune 2 puta, a za promjenu prozirnosti poteza dodajte atribut potez-neprozirnost, Na primjer stroke-opacity= "0,5" Smanjuje prozirnost poteza za 2 puta.

Pravokutnici, kvadrati.

Postavljanje pravokutnika izgleda ovako

Atributi pravokutnika (kvadrata) ispravan označite koordinate gornjeg lijevog kuta, kao i širinu i visinu pravokutnika. Postavke ispune i poteza izgledaju isto.

Pa, na kraju, krug s kvadratom

Za promjenu transparentnosti koristimo već poznati pristup - dodavanje atributa neprozirnost za ispunu i atribut potez-neprozirnost za ocrtavanje.

Nastavit će se.

Ostavimo po strani pitanje uputnosti korištenja SVG-a na web stranici. Svatko mora za sebe utvrditi korisnost ove tehnologije. Štoviše, ta je tema već nekoliko puta pokrenuta.

Sada ćemo pogledati metode ugrađivanja SVG-a, njihove prednosti i nedostatke, kao i mogućnosti manipuliranja SVG elementima.

Članak je prvenstveno namijenjen onima koji još uvijek ne koriste vektorsku grafiku na svojim stranicama, ali stvarno žele jednom nogom biti u budućnosti i sadašnjosti.
Za znatiželjnike, odmah ću vam dati zbirnu tablicu:
1 Možete promijeniti boju, veličinu, poravnanje i druge stilove uobičajenog teksta
2 Stilovi moraju biti napisani ili u samoj SVG datoteci ili povezani s vanjskim stilom u SVG na početku datoteke:

Istina, stilovi napisani unutar SVG-a također će raditi kada se koristi IMG ili oznaka pozadinske slike, ali to nema smisla.

Da, možete stvoriti font ikone iz SVG-a, a postoje besplatno dostupni fontovi ikona. Ali postoji niz ozbiljnih ograničenja. Kao i svaki simbol SVG fonta, ikone u fontu ne mogu imati više od jedne boje.
Evo nekoliko usluga na kojima možete preuzeti gotove setove ikona ili prenijeti vlastite i izraditi vlastiti font ikona:

Imajte na umu da prilikom izrade vlastitog fonta sve objekte morate pretvoriti u putanje. Oznake i atributi koji će biti preskočeni: krug, pravougaonik, potez, širina poteza, ispuna, pravilo ispune.
Kada koristite font ikone, svi elementi SVG objekta kombiniraju se u jedan znak, a možete komunicirati s njim putem CSS-a i JS-a samo kao znakom fonta: promijeniti veličinu pomoću veličine fonta, promijeniti boju pomoću boje, animirati pomoću CSS animacije ili JS i drugo.

+ ikona se ponaša kao simbol fonta, a svi parametri se konfiguriraju na isti način putem CSS-a (veličina, boja, poravnanje itd.);
+ jedini način koji radi u IE 8 bez dodatnih manipulacija;
– svi elementi SVG datoteke kombiniraju se u jedan simbol, tako da se njime može manipulirati samo pomoću CSS-a ili JS-a kao jedne jedinice;
– Podržane su samo jednobojne ikone;
– ako preuzimanje fonta ne uspije, korisnik ili uopće neće vidjeti ikone ili će se, ako kodovi ikona odgovaraju Unicode znakovima, prikazati odgovarajući simboli.

SVG kao OBJEKT

Nažalost (ili na sreću) codepen i jsfiddle blokiraju učitavanje vanjskih objekata iz sigurnosnih razloga.
Ugradnja izgleda ovako:

Objekt ugrađuje element atributa podataka poput iframea, dodajući oznaku uključene datoteke unutar njega, tako da se elementima može pristupiti pomoću JS-a, ali ne na vrlo uobičajen način:

Var object = document.getElementById("'object'"); //dobijte element object var svgDocument = object.contentDocument; //dobijte svg element unutar objekta var svgElement = svgDocument.getElementById("some_id_in_svg"); //dobijte bilo koji element unutar svg svgElement.setAttribute("fill", "black"); //promjena atributa odabranog elementa
Vrijedno je napomenuti da se u CSS-u stilovi za SVG elemente razlikuju od standardnih; može se vidjeti potpuni popis stilova koje podržava SVG.
SVG se ne ponaša kao obična slika; ne može se neproporcionalno transformirati postavljanjem širine i visine. Objekt unutar zauzet će maksimalnu površinu i biti centriran u spremniku:

Ali objekt se može transformirati pomoću CSS-a ovako:

Transformacija: scale(2, 1);
IE 8 i niži ne podržavaju SVG od riječi "uopće", stoga, ako među korisnicima vaše stranice postoji ova specifična publika, trebali biste se pobrinuti za provjeru i zamjenu svg-a rasterskom slikom. Postoji mnogo načina za to, na primjer korištenje Modernizr za dodavanje .no-svg klase za tijelo:

If (!Modernizr.svg) ( $(body).addClass(“no-svg”); )
.no-svg .icon (širina: 100px; visina: 100px; pozadinska slika: url(“icon.png”); )
Za i protiv ovog pristupa:
+ možete koristiti vanjsku CSS datoteku za upravljanje stilovima;
+
+ Podržane su interaktivne animacije;
–

Obje metode ugrađivanja donekle su slične ugrađivanju pomoću oznake objekta, na primjer, ne možete promijeniti proporcije promjenom širine i visine spremnika, ali imaju više ograničenja.
Vanjski stilovi uključeni u SVG neće raditi, a pristup elementima putem JS-a također neće raditi. Interaktivne animacije u SVG-u također neće raditi. Ali problemi s IE 8 i nižim i dalje ostaju.
Ali SVG animacije će raditi u oba slučaja.
U slučaju IMG-a, ugradnja izgleda kao obična slika:

U slučaju pozadinske slike kao običnog bloka:

.icon (pozadinska slika: url("icon.svg"); širina: 90px; visina: 150px; )
Također, pomoću pozadinske slike, možete koristiti spriteove, kao s png slikama, a možete promijeniti veličinu pomoću pozadinske veličine:

Veličina pozadine: 90px 150px;
Uzimajući u obzir da postotak ljudi sa zaslonima s omjerom piksela uređaja većim od 1 i njihovim uređajima koji ne podržavaju svg teži nuli (ako ih ima), tada možete koristiti medijske izraze za povezivanje svg-a, samo za njih i za ostalo koristite png verziju:

Ikona ( background-image: url("icon.png"); ) @media samo zaslon i (-webkit-min-device-pixel-ratio: 1,5), samo zaslon i (min--moz-device-pixel-ratio : 1,5), samo zaslon i (-o-device-pixel-ratio: 3/2), samo zaslon i (min-device-pixel-ratio: 1,5) ( .icon ( background-image: url("icon.svg) "); ))
Prednosti i mane ovih pristupa:
+ Podržane su SVG animacije i filteri;
+ u slučaju pozadinske slike, možete koristiti SVG spriteove;
– Ne možete promijeniti svojstva SVG elemenata putem CSS-a ili JS-a;
– Interaktivne animacije nisu podržane;
– Za IE 8 i starije, potrebno ga je zamijeniti bitmapom.

U ovoj verziji, SVG kod, koji se može dobiti otvaranjem bilo koje SVG datoteke s tekstualnim dokumentom, ugrađen je izravno u kôd stranice.
Nedvojbeno, ovakav dizajn smanjuje čitljivost koda i povećava njegov volumen, ali otvara nove mogućnosti.

Na primjer, ako imate skup ikona u SVG datoteci, možete ih ponovno koristiti s jednostavnim dizajnom kao što je:

Gdje neki_svg_element_id id elementa unutar izvorne SVG datoteke.

Na primjer, možete primijeniti SVG transformacije na jedan element:

Ali ako je interaktivna animacija primijenjena na element unutar izvornog SVG-a, na primjer na klik, kao u gornjoj demonstraciji, tada će prilikom dupliciranja objekta animacija raditi na svim elementima u isto vrijeme.
SVG animacije i filteri su tema za poseban članak, pa ću se ograničiti na njih

SVG (Scalable Vector Graphics) je standard vektorske grafike koji je razvio konzorcij W3C.

SVG je označni jezik za opisivanje dvodimenzionalnih grafičkih aplikacija i slika te je podskup Extensible Markup Language XML. Ovo također uključuje brojne povezane grafičke skripte.

SVG podržavaju svi moderni preglednici za računala i mobilne telefone.

Neke značajke, kao što su SMIL animacije i SVG fontovi, nisu toliko raširene.

Najnovija verzija pune specifikacije je SVG 1.1.

SVG 2 je u razvoju. Dodat će nove značajke jednostavne za korištenje za SVG, a također radi na čvršćoj integraciji s HTML-om, CSS-om i DOM-om.

• Prednosti SVG-a
• SVG grafika se stvara pomoću matematičkih formula koje se mogu prilagoditi kada se promijeni veličina slike.
• Stoga se vektorske slike skaliraju bolje od rasterskih slika.
• Veličina vektorske slike obično je manja od usporedivih slika u formatima JPEG, GIF ili PNG.
• SVG grafika ima tekstualni format koji se može uređivati ​​u bilježnici ili crtati u uređivačima vektorske grafike Adobe Illustrator i CorelDRAW.
• SVG skripte i animacije omogućuju vam stvaranje dinamične i interaktivne grafike.
• Tekst u SVG grafici je tekst, a ne slika, pa ga tražilice indeksiraju. Možete dodati više veza na SVG sliku.

Možete povezati vanjske CSS listove stilova sa SVG formatom, globalne stilove unutar spremnika

ili dodajte interne stilove pomoću atributa stila na oznakama oblika i putanje. Umetanje SVG u web stranicu.

Postoji nekoliko načina za umetanje SVG slike u web stranicu. Prvi od njih je jednostavno umetanje SVG koda u stranicu (s velikom slikom, HTML kod stranice će postati ogroman i teško čitljiv). S drugim metodama prvo trebate spremiti SVG kod u datoteku s ekstenzijom

• .svg ;
• Dakle, evo načina za umetanje SVG slike u web stranicu:
• izravno umetanje koda u HTML dokument u spremniku korištenje SVG datoteke kao pozadinske slike;, povezivanje SVG datoteke s HTML dokumentom pomoću oznaka, img ugraditi objekt;
• I iframe.

povezivanje SVG datoteke s PHP dokumentom pomoću funkcije

uključiti

1. Izravno umetanje SVG koda u web dokument

2. Korištenje SVG datoteke kao pozadinske slike

3. Povezivanje SVG datoteke pomoću img oznake

6. Povezivanje SVG datoteke pomoću iframe oznake

7. Uključivanje SVG datoteke pomoću funkcije uključivanja

Koordinatni sustav

Dimenzije i koordinate mogu se odrediti u različitim jedinicama (px, pt, pc, cm, mm, em, in).

Ako jedinice nisu navedene, onda su to pikseli.

Koordinatni početak je gornji lijevi kut ekrana, tj.

Osnovni SVG elementi Primjer udarac-dasharray Izmjenični potezi i razmaci u točkastoj liniji Primjer stroke-dashoffset Shift točkasta linija Primjer ispuniti Boja ispune (ništa – bez ispune) ispuna-neprozirnost Prozirnost ispune (od 0 do 1) pravilo za popunjavanje
Pravilo punjenja. Moguće vrijednosti atributa: stil Stil elementa razreda

Klasa elementa

Ravna linija .

Postavljeno oznakom

Atributi oznake

Primjer

PROIZLAZITI:

Ravna linija .

izlomljena linija

Atributi oznake

Primjer

Atribut oznake

Ravna linija Poligon

izlomljena linija

Atributi oznake

Primjer

. Uvijek prikazuje zatvorene figure, automatski povlačeći liniju od kraja posljednjeg segmenta do početka prvog.

Ravna linija .

Postavljeno oznakom

Atributi oznake

Primjer

Pravokutnik

Ravna linija .

Postavljeno oznakom

Atributi oznake

Primjer

Krug

Ravna linija Složena putanja . To je najsvestraniji od SVG elemenata. Omogućuje vam stvaranje proizvoljnih oblika. Oblik figure određen je atributima d

, čija je vrijednost skup posebnih naredbi. Ove naredbe mogu biti i velikim i malim slovima. Velika slova označavaju da se koristi apsolutno pozicioniranje, dok mala slova označavaju relativno pozicioniranje.

Naredbe koje određuju putanju i smjer vitičaste linije	M,m Polazna točka
Mx,y	L,l Ravni segment
Lx,y	H, h Vodoravna linija Hx,y ili
hx	V, v Okomita linija Hx,y Vx,y
vy	A, a Luk elipse Arx,ry x-osa-rotacija veliki-luk-zastavica,zastavica-pomicanje x,y rx,ry – polumjeri luka elipse; rotacija osi x – kut rotacije luka u odnosu na os X; veliki luk-zastava – ako je (=1), gradi se veći dio luka, ako je (=0) – manji dio; pomet-zastavica – ako (=1), tada se luk gradi u smjeru kazaljke na satu, ako (=0) – u suprotnom smjeru; x,y
– koordinate krajnje točke luka.	C,c Kubična Bezierova krivulja Cx1,y1 x2,y2 x,y x1,y1 – koordinate prve kontrolne točke; – ako (=1), tada se luk gradi u smjeru kazaljke na satu, ako (=0) – u suprotnom smjeru;
x2,y2	S, s Glatka kubična Bezierova krivulja – koordinate prve kontrolne točke; Sx2,y2 x,y – ako (=1), tada se luk gradi u smjeru kazaljke na satu, ako (=0) – u suprotnom smjeru; – koordinate druge kontrolne točke;
Prva kontrolna točka je zrcalna slika druge kontrolne točke.	Q, Q Kvadratna Bezierova krivulja Cx1,y1 x2,y2 x,y Qx1,y1 x,y – ako (=1), tada se luk gradi u smjeru kazaljke na satu, ako (=0) – u suprotnom smjeru;– koordinate kontrolne točke;
– koordinate krajnje točke krivulje.	T,t Kvadratna Bezierova krivulja – ako (=1), tada se luk gradi u smjeru kazaljke na satu, ako (=0) – u suprotnom smjeru; Glatka kvadratna Bezierova krivulja – koordinate krajnje točke krivulje.
Kontrolna točka ove naredbe zrcalna je slika kontrolne točke prethodne naredbe.	Z, z

Atributi oznake

Primjer

Zatvaranje puta

Vektorska grafika ima široku primjenu u tiskarstvu. Za web stranice postoji SVG, što je prema službenoj specifikaciji na w3.org jezik za opisivanje dvodimenzionalne grafike u XML-u. SVG uključuje tri vrste objekata: oblike, slike i tekst. SVG postoji od 1999., a od 16. kolovoza 2011. uvršten je u W3C preporuke. SVG je visoko podcijenjen od strane web programera, iako ima nekoliko važnih prednosti.

Prednosti SVG-a

• Skaliranje: Za razliku od rasterske grafike, SVG ne gubi na kvaliteti kada se skalira, tako da je pogodan za korištenje za razvoj mrežnice.
• Smanjenje HTTP zahtjeva: pri korištenju SVG-a smanjuje se broj poziva prema poslužitelju, a u skladu s tim povećava se i brzina učitavanja stranice.
• Stiliziranje i skriptiranje: pomoću CSS-a možete promijeniti grafičke postavke na web mjestu, poput pozadine, prozirnosti ili obruba.
• Animacija i uređivanje: pomoću javascripta možete animirati SVG, kao i uređivati ​​ga u uređivaču teksta ili grafike (InkScape ili Adobe Illustrator).
• Mala veličina: SVG objekti teže mnogo manje od rasterskih slika.

Osnovni SVG oblici

Prema službenoj specifikaciji, pomoću oznake SVG možete crtati jednostavne objekte: pravokutnik, krug, liniju, elipsu, poliliniju ili poligon svg.

Jednostavna linija pomoću oznake linija sa samo dva parametra - početne točke (x1 i x2) i krajnje točke (y1 i y2):

Također možete dodati atribute poteza i širine poteza ili stilove za postavljanje boje i širine:

Style="stroke-width:1; stroke:rgb(0,0,0);"

PROIZLAZITI:

Sintaksa je slična prethodnoj, koristi se oznaka polilinija, atribut bodova postavlja bodove:

. Uvijek prikazuje zatvorene figure, automatski povlačeći liniju od kraja posljednjeg segmenta do početka prvog.

Pozvan rect tagom, možete dodati neke atribute:

Krug

Poziva se oznakom krug, u primjeru pomoću atributa r postaviti radijus, cx ugraditi cy odredite koordinate centra:

Elipsa

Poziva se oznakom elipsa, radi slično krug, ali možete navesti dva radijusa - rx ugraditi ry:

Atribut oznake

Poziva se oznakom poligon, mnogokut može imati različit broj stranica:

Korištenje editora

Kao što možete vidjeti iz primjera, crtanje osnovnih SVG oblika je vrlo jednostavno, ali objekti mogu biti mnogo složeniji. Za njih morate koristiti uređivače vektorske grafike, kao što su Adobe Illustrator ili Inkscape, gdje možete spremati datoteke u SVG formatu i zatim ih uređivati ​​u uređivaču teksta. Možete umetnuti SVG na stranicu koristeći embed, iframe i object:

Primjer je slika iPod-a s OpenClipArt.org.

Sretan Dan pobjede svima! A danas pišem prvi članak u nizu u kojem ćemo to saznati što je SVG i kako ga koristiti.

SVG (skalabilna vektorska grafika) je jezik za opisivanje dvodimenzionalne grafike temeljen na XML. Ova tehnologija postupno uzima maha, a to je zbog sljedećeg:

• Prilikom promjene veličine svg oblika, oblici se uvijek ponovno iscrtavaju, tako da ćete uvijek vidjeti glatku i lijepu sliku bez pikselizacije
• Preglednik ne treba tražiti sliku od poslužitelja jer crta sam, stoga produktivnost raste
• Objekte možete stilizirati pomoću CSS-a, poput uobičajenih HTML elemenata, ili pomoću JavaScripta
• Može se uređivati ​​ili animirati pomoću CSS-a i JavaScripta
• Manje veličine

Dakle, mislim da već razumijete zašto je to potrebno i zašto je bolje od obične slike, a sada prijeđimo na to kako ga koristiti.

Za početak, vrijedi napomenuti da sve naše figure moraju biti u oznaci svg, sad crtajmo linija. Za prikaz linije koristi se oznaka linija, koji ima sljedeće atribute:

• x1- Start x koordinata
• x2- Kraj x koordinata
• y1- Start y koordinata
• y2- Kraj y koordinate
• širina poteza- Širina linije
• moždani udar- Boja linije

Ali što ako trebamo crtati odmah nekoliko redaka? Koristite više oznaka linija ne bi bilo baš lijepo. Za ovo postoji oznaka polilinija.

Na oznaci polilinija postoji atribut bodova, gdje označavamo koordinate x ugraditi g odvojene zarezom, zatim napravite razmak i napišite koordinate sljedeće točke i tako dalje. Primijetite da ovdje postoji atribut Shift točkasta linija Primjer, u kojem možemo odrediti boju u bilo kojem od formata css, koji će ispuniti prostor između redaka. Ako želite da razmak između redaka bude prazan, navedite vrijednost nikakav.

Prijeđimo na složenije oblike i crtanje pravokutnik.

Da biste nacrtali pravokutnik, morate koristiti oznaku ispravan, gdje u atributima širina ugraditi visina naznačiti širina ugraditi visina sukladno tome, a preostali atributi su vam već poznati i obavljaju apsolutno iste funkcije kao i kod linija.

Za crtanje kruga koristite oznaku krug i atributi cx, cy ugraditi r postaviti koordinate centar kruga i njega radius.

Drugi element - elipsa crta se na potpuno isti način kao krug, ali tu možemo sami postaviti polumjere duž osi x i duž osi g. Oznaka se koristi za njegovo iscrtavanje elipsa

Ako se trebate povući poliedarski likovi, kao što je peterokut, zatim upotrijebite oznaku poligon

Atribut bodova na oznaci poligon radi isto kao atribut bodova na oznaci polilinija.

Ako je objekt vrlo složen, možete upotrijebiti bilo koji uređivač vektorske grafike i nacrtati ga tamo, a zatim ga jednostavno umetnuti ovako

SVG podržan tj. c 9 verzije, Mozilla Firefox S 1.5 , Google Chrome S 3.0 ugraditi opera S 8.0 .

Ovim se završava članak. Ispalo je veliko, ali jednostavno. U sljedećem ćemo nastaviti proučavati ovu zanimljivu tehnologiju, ali to je sve. Sretno!