D3 este cel mai util atunci când este folosit pentru a crea și manipula imagini bazate pe SVG. Desenând folosind div„s și alte elemente HTML sunt posibile, dar puțin greoaie și, de obicei, există inconsecvențe de redare în diferite browsere. Utilizarea SVG este mai fiabilă, mai consistentă vizual și mai rapidă.
Editorii de grafică vectorială, cum ar fi Illustrator, pot fi utilizați pentru a crea fișiere SVG, dar trebuie să învățăm cum să le creăm folosind cod.
element SVG
Grafica vectorială scalabilă este un format de imagine bazat pe text. Fiecare imagine SVG este definită folosind codul de marcare asemănător HTML. Codul SVG poate fi inclus direct într-un document HTML. Fiecare browser web acceptă SVG, singura excepție fiind Internet Explorer versiunea 8 și mai veche. SVG se bazează pe XML, așa că este posibil să observați că elementele care nu au o etichetă de închidere ar trebui să se închidă automat. De exemplu:
Înainte de a putea desena ceva, trebuie să creați un element SVG. Gândiți-vă la elementul SVG ca la o pânză pe care sunt desenate toate imaginile dvs. (În acest fel, SVG este similar din punct de vedere conceptual cu elementul canvas HTML). Cel puțin, este bine să setați lățimea și înălțimea folosind atribute lăţimeȘi înălţime, respectiv. Dacă nu le specificați, SVG-ul se va întinde pe întreaga zonă a blocului.
Iată un element SVG creat folosind codul de mai sus:
Nu-l vezi? Faceți clic dreapta pe spațiul gol de mai sus și selectați Vizualizare cod element. Inspectorul dvs. web ar trebui să arate ceva similar cu acesta:
Observați că există un element SVG care se întinde pe 500 de pixeli pe orizontală și 50 de pixeli pe verticală.
De asemenea, rețineți că browserele tratează pixelii ca unitate de măsură implicită. Am specificat dimensiunile ca 500 și 50, nu 500px și 50px. Putem specifica px în mod explicit sau orice altă unitate de măsură, de exemplu: ei, pct, în, cm, Și mm.
Forme simple
Există o serie de forme pe care le puteți plasa în interiorul unui element SVG. Acest set include: rect, cerc, elipsă, linia, textȘi cale.
Dacă sunteți familiarizat cu programarea grafică pe computer, vă veți aminti că, de obicei, un sistem de coordonate bazat pe pixeli începe în colțul din stânga sus și are coordonate punctuale (0,0). Crește X apar de la stânga la dreapta, crește la-de sus în jos.
0,0 100,20 200,40
rect desenează un pătrat. Pătratul este dat de patru valori: X, y- indicați punctul colțului din stânga sus; lăţime, înălţime- indicați lățimea și înălțimea pătratului. Acest pătrat ocupă întreg spațiul SVG-ului nostru:
cerc desenează un cerc. Un cerc este definit de trei marimi: cx, cy indicați un punct situat în centrul cercului circumscris, r specifică raza cercului. Acest cerc este situat în centrul SVG-ului nostru, deoarece atributul cx("centrul-x") este 250. Exemplu:
elipsă este setat similar cu cerc, dar se presupune că raza este specificată de-a lungul a două axe: de-a lungul Xși prin la. În loc de X utilizare rx, în loc de y - ry.
linia trasează o linie. Utilizare x1Și y1 pentru a seta coordonatele începutului liniei și x2Și y2 pentru a seta coordonatele de sfârșit. Atribut accident vascular cerebral trebuie să setați culoarea liniei, altfel va fi invizibil.
text desenează text. Utilizare X pentru a indica marginea stângă și y pentru a indica poziția verticală a așa-numitei linii de bază.
textul va moșteni stilurile de font CSS ale elementului părinte, dacă nu vă setați propriile stiluri pentru text. Observați cum formatarea textului de mai sus se potrivește cu textul descris în acest paragraf. Putem suprascrie stiluri de formatare ca acesta:
De asemenea, rețineți că atunci când orice element vizual atinge marginea unui element SVG, acesta va fi tăiat. Aveți grijă când utilizați text, astfel încât squiggles-urile dvs. de text să nu fie tăiate. Puteți vedea ce se va întâmpla cu textul dacă setați linia de bază (de ex. la) egal cu 50, la fel ca înălțimea SVG:
cale desenează ceva mai complex decât formele descrise mai sus (de exemplu, silueta țărilor pe geohărți) și va fi descris separat. Acum vom lucra cu forme simple.
Elemente de stil SVG
În mod implicit, orice element SVG are o umplere neagră și nu are chenar. Dacă doriți ceva în afară de aceasta, va trebui să aplicați stiluri elementului dvs. Proprietățile comune SVG sunt enumerate mai jos:
- completati- umplutura. Sensul culorii. La fel ca în CSS, culoarea poate fi specificată în mai multe moduri:
- dupa nume: portocaliu;
- valoare în sistemul numeric hexazecimal: #3388aa, #38a;
- valoare în format RGB: rgb(10, 150, 20);
- valoare în format RGBA: rgba(10, 150, 20, 0,5).
- accident vascular cerebral- cadru. Sensul culorii.
- lățimea cursei- lățimea cadrului (de obicei în pixeli).
- opacitate- transparenta. O valoare numerică între 0,0 (complet transparent) și 1,0 (complet vizibil).
CU text De asemenea, puteți utiliza următoarele proprietăți:
- familie de fonturi
- marimea fontului
Există două moduri de a aplica stiluri elementelor SVG: fie specificând direct stilurile din cadrul elementului ca atribute ale acestuia, fie prin regulile CSS.
Mai jos sunt câteva proprietăți CSS setate direct pe element cerc:
Am putea face altfel: nu specificați atributele de stil, ci specificați clasa de stil (la fel ca un element HTML obișnuit):
si apoi adauga completati, accident vascular cerebralȘi lățimea cursei parametrii în stilurile CSS ale clasei necesare:
Dovleac (umplutură: galben; contur: portocaliu; lățimea trazei: 5; )
A doua abordare are câteva avantaje evidente:
- Puteți defini o clasă o dată și o puteți aplica mai multor elemente.
- Codul CSS este mai ușor de înțeles decât atributele din interiorul elementelor.
- Din aceste motive, a doua abordare este mai ușor de întreținut și, de asemenea, mai rapid de implementat.
Folosirea CSS pentru a stila SVG, totuși, poate fi confuză pentru unii. completati, accident vascular cerebral, lățimea curseiîncă nu sunt proprietăți CSS (cele mai apropiate echivalente CSS sunt culoare de fundalȘi frontieră). Pentru a vă ajuta să vă amintiți ce reguli pentru foaia de stil sunt specificate pentru elementele SVG, este o idee bună să includeți svgîn selectorul CSS:
Svg .dovleac ( /* ... */ )
Suprapunerea și ordinea desenării lor
Nu există straturi ca atare în SVG și nici un concept de adâncime. SVG nu acceptă proprietatea CSS indicele z, astfel formele pot fi ordonate într-un spațiu bidimensional.
Și totuși, dacă desenați mai multe forme, acestea se suprapun:
Ordinea în care elementele sunt listate în cod determină adâncimea acestora. Pătratul violet este listat primul în cod, deci este desenat primul. Apoi se desenează un pătrat albastru deasupra celui violet, apoi se desenează un pătrat verde deasupra celor albastru și violet etc.
Gândiți-vă la formele SVG ca și cum ar fi fost desenate pe o pânză. Culoarea care se aplică ultima acoperă restul culorilor, ajungând „în față”.
Acest aspect al ordinii desenului devine important atunci când aveți mai multe elemente vizuale care nu ar trebui să fie blocate de nimic. De exemplu, puteți avea axe sau etichete de valoare pe axe care apar pe un grafic de dispersie. Axele și etichetele trebuie adăugate la SVG la sfârșit, astfel încât să apară înaintea restului elementelor și să fie vizibile.
Transparenţă
Transparența poate fi utilă atunci când elementele vizualizării dvs. se suprapun, dar doriți ca toate să fie vizibile sau când doriți să evidențiați unele elemente, dar să le faceți pe altele mai puțin vizibile.
Există două moduri de a aplica transparența: utilizați o culoare RGB cu un canal alfa sau setați proprietatea opacitate valoare numerica.
poți să folosești rgba() oriunde trebuie să specificați o culoare, de exemplu în atribute completatiȘi accident vascular cerebral. rgba() se așteaptă să îi treci 3 valori cuprinse între 0 și 255 pentru roșu, verde și albastru, plus un canal alfa cuprins între 0,0 și 1,0.
Rețineți că cu metoda rgba(), se aplică transparență completatiȘi accident vascular cerebral atribute indiferent. Umplerea următoarelor cercuri este 75% transparentă, iar chenarul lor este 25% transparent:
Pentru a aplica transparență întregului element, trebuie să setați atributul opacitate. Mai jos sunt cercurile complet vizibile:
și acestea sunt aceleași cercuri cu transparență diferită:
Puteți utiliza, de asemenea, atributul opacitate pentru un element ale cărui culori sunt specificate în format rgba(). Când faci asta, transparența se înmulțește. Cercurile de mai jos folosesc aceleași valori de culoare RGBA pentru completatiȘi accident vascular cerebral. Primul element nu are un set de atribute opacitate, iar celelalte două au:
Vă rugăm să rețineți că al treilea cerc opacitate egal cu 0,2 sau 20%. Cu toate acestea, partea sa violetă are o transparență de 75%. Deci partea violet ajunge să fie 0,2*0,75 = 0,15 sau 15% transparentă.
Imagini HTML adăugate paginilor web folosind o etichetă . Utilizarea graficelor face paginile web mai atractive din punct de vedere vizual. Imaginile ajută la transmiterea mai bună a esenței și a conținutului unui document web.
Utilizarea etichetelor HTML
Inserarea imaginilor într-un document HTML
1. Etichetați ![]()
Element reprezintă o imagine și conținutul său alternativ, care este adăugat folosind atributul alt. Din moment ce elementul
este litere mici, se recomandă plasarea acestuia în interiorul unui element bloc, de exemplu,
Sau
Etichetă are un atribut src obligatoriu, a cărui valoare este calea absolută sau relativă către imagine:
Pentru etichetă Următoarele atribute sunt disponibile:
| Atribut | Descriere, valoare acceptată |
|---|---|
| alt | Atributul alt adaugă text alternativ unei imagini. Afișat acolo unde apare imaginea înainte de a fi încărcată sau atunci când grafica este dezactivată și este afișată și ca un sfat instrument când treceți mouse-ul peste imagine. Sintaxă: alt="descrierea imaginii" . !} |
| origine încrucișată | Atributul crossorigin vă permite să încărcați imagini din resurse de pe alt domeniu folosind solicitări CORS. Imaginile încărcate în pânză folosind solicitări CORS pot fi reutilizate. Valori permise: anonim - Solicitarea de origine încrucișată se face folosind un antet HTTP și nu sunt transmise acreditări. Dacă serverul nu oferă acreditări serverului de la care este solicitat conținutul, imaginea va fi coruptă și utilizarea acesteia va fi limitată. use-credentials — Solicitarea de origine încrucișată este efectuată prin transmiterea acreditărilor. Sintaxă: crossorigin="anonymous" . |
| înălţime | Atributul înălțime specifică înălțimea imaginii. Poate fi specificat în px sau %. Sintaxă: înălțime: 300px. |
| ismap | Atributul ismap indică faptul că imaginea face parte dintr-o imagine de hartă situată pe server (o imagine de hartă este o imagine cu zone pe care se poate face clic). Când faceți clic pe o imagine de hartă, coordonatele sunt trimise la server ca șir de interogare URL. Atributul ismap este permis numai dacă elementul Sintaxă: ismap. |
| longdesc | O adresă URL de descriere extinsă a imaginii care completează atributul alt. Sintaxă: longdesc="http://www.example.com/description.txt" . |
| src | Atributul src specifică calea către imagine. Sintaxă: src="flower.jpg" . |
| dimensiuni | Setează dimensiunea imaginii în funcție de opțiunile de afișare. Funcționează numai când este specificat atributul srcset. Valoarea atributului este unul sau mai multe șiruri, separate prin virgule. |
| srcset | Creează o listă de surse de imagine care vor fi selectate în funcție de rezoluția ecranului. Poate fi folosit împreună cu sau în locul atributului src. Valoarea atributului este unul sau mai multe șiruri, separate prin virgule. 
|
| harta de utilizare | Atributul usemap specifică imaginea ca hartă imagine. Valoarea trebuie să înceapă cu simbolul #. Valoarea este asociată cu valoarea numelui sau a atributului id al etichetei |
| lăţime | Atributul width specifică lățimea imaginii. Poate fi specificat în px sau %. Sintaxă: lățime: 100% . |
1.1. Adresa imaginii
Adresa imaginii poate fi specificată complet (adresa URL absolută), de exemplu:
url(http://anysite.ru/images/anyphoto.png)
Sau printr-o cale relativă de la document sau directorul rădăcină site:
url(../images/anyphoto.png) - cale relativă din document,
url(/images/anyphoto.png) - cale relativă din directorul rădăcină.
Aceasta este interpretată după cum urmează:
../ - înseamnă a urca un nivel, la directorul rădăcină,
imagini/ - accesați folderul cu imagini,
anyphoto.png - indică către un fișier imagine.
1.2. Dimensiunile imaginii
Fără a seta dimensiunile imaginii, desenul este afișat pe pagină în dimensiunea sa reală. Puteți edita dimensiunile imaginii folosind atributele lățime și înălțime. Dacă este specificat doar unul dintre atribute, al doilea va fi calculat automat pentru a menține proporțiile imaginii.
1.3. Formate de fișiere grafice
format JPEG (Grupul mixt de experți fotografici). Imaginile JPEG sunt ideale pentru fotografii și pot conține milioane de culori diferite. Imaginile se comprimă mai bine decât GIF-urile, dar textul și zonele mari de culoare solidă pot deveni pete.
format GIF (Format de schimb grafic). Ideal pentru comprimarea imaginilor care au zone de culoare solidă, cum ar fi logo-urile. GIF-urile vă permit să setați una dintre culori să fie transparentă, permițând ca fundalul unei pagini web să fie afișat printr-o parte a imaginii. GIF-urile pot include și animație simplă. Imaginile GIF conțin doar 256 de nuanțe, ceea ce face ca imaginile să pară pete și nerealiste la culoare, precum postere.
format PNG (grafică de rețea portabilă). Include cele mai bune caracteristici ale formatelor GIF și JPEG. Conține 256 de culori și face posibilă transparența uneia dintre culori, comprimând în același timp imaginile într-o dimensiune mai mică decât un fișier GIF.
format APNG (grafică de rețea portabilă animată). Un format de imagine bazat pe formatul PNG. Vă permite să stocați animație și, de asemenea, acceptă transparența.
format SVG (grafică vectorială scalabilă). Un desen SVG constă dintr-un set de forme geometrice descrise în format XML: linie, elipsă, poligon etc. Sunt acceptate atât grafica statică, cât și grafica animată. Setul de funcții include diverse transformări, măști alfa, efecte de filtrare și capacitatea de a folosi șabloane. Imaginile SVG pot fi redimensionate fără a pierde calitatea.
Format BMP (Imagine bitmap). Este o imagine raster necomprimată (originală) al cărei șablon este o grilă dreptunghiulară de pixeli. Un fișier bitmap constă dintr-un antet, o paletă și date grafice. Antetul stochează informații despre imaginea grafică și fișierul (adâncimea pixelilor, înălțimea, lățimea și numărul de culori). Paleta este indicată numai în acele fișiere Bitmap care conțin imagini paletă (8 sau mai puțini biți) și constau din cel mult 256 de elemente. Datele grafice reprezintă imaginea în sine. Adâncimea culorii în acest format poate fi 1, 2, 4, 8, 16, 24, 32, 48 biți pe pixel.
format ICO (pictograma Windows). Format de stocare a pictogramelor de fișier în Microsoft Windows. De asemenea, pictograma Windows este folosită ca pictogramă pe site-urile web de pe Internet. Este o imagine a acestui format care este afișată lângă adresa site-ului sau marcajul din browser. Un fișier ICO conține una sau mai multe pictograme, dimensiunea și culoarea fiecăreia putând fi setate separat. Dimensiunea pictogramei poate avea orice dimensiune, dar cele mai comune sunt pictogramele pătrate cu laturile de 16, 32 și 48 de pixeli.
2. Etichetați
Etichetă
Eticheta are un atribut de nume disponibil, care specifică numele hărții. Valoarea atributului nume pentru etichetă
Element
3. Etichetați
Etichetă descrie doar o regiune activă ca parte a unei hărți imagine la nivelul clientului. Elementul nu are o etichetă de închidere. Dacă o zonă activă se suprapune cu alta, va fi implementată prima legătură din lista de zone.
| Atribut | Scurta descriere |
|---|---|
| alt | Setează text alternativ pentru zona activă a hărții. |
| coorde | Determină poziția zonei pe ecran. Coordonatele sunt date în unități de lungime și separate prin virgule: Pentru cerc— coordonatele centrului și razei cercului; Pentru dreptunghi— coordonatele colțurilor din stânga sus și din dreapta jos; Pentru poligon— coordonatele vârfurilor poligonului în ordinea cerută; se recomandă indicarea ultimelor coordonate, egale cu prima, pentru completarea logică a figurii. |
| Descarca | Complementează atributul href și spune browserului că resursa ar trebui să fie încărcată în momentul în care utilizatorul face clic pe link, în loc, de exemplu, să fie nevoit să o deschidă mai întâi (ca un fișier PDF). Specificând un nume pentru un atribut, dăm astfel un nume obiectului încărcat. Este permisă utilizarea unui atribut fără a specifica valoarea acestuia. |
| href | Specifică adresa URL pentru link. Poate fi specificată o adresă de legătură absolută sau relativă. |
| hreflang | Specifică limba documentului web asociat. Folosit numai împreună cu atributul href. Valorile acceptate sunt o abreviere formată dintr-o pereche de litere care indică codul limbii. |
| mass-media | Stabilește pentru ce tipuri de dispozitive va fi optimizat fișierul. Valoarea poate fi orice interogare media. |
| rel | Extinde atributul href cu informații despre relația dintre documentul curent și documentul aferent. Valori acceptate: alternativ - link către o versiune alternativă a documentului (de exemplu, o formă tipărită a paginii, o traducere sau o oglindă). autor — link către autorul documentului. marcaj - URL permanent folosit pentru marcaje. ajutor - link către ajutor. licență - link către informații despre drepturile de autor pentru acest document web. next/prev - indică relația dintre adresele URL individuale. Datorită acestui marcaj, Google poate determina că conținutul acestor pagini este legat într-o secvență logică. nofollow - împiedică motorul de căutare să urmărească link-uri dintr-o anumită pagină sau un anumit link. noreferrer - indică faptul că atunci când urmărește un link, browserul nu ar trebui să trimită un antet de solicitare HTTP (Referrer), care înregistrează informații despre pagina de pe care a venit vizitatorul site-ului. prefetch - indică faptul că documentul țintă ar trebui să fie stocat în cache, de exemplu. Browserul din fundal descarcă conținutul paginii în memoria cache a acesteia. căutare - Indică faptul că documentul țintă conține un instrument de căutare. tag - specifică cuvântul cheie pentru documentul curent. |
| formă | Specifică forma zonei active de pe hartă și coordonatele acesteia. Poate lua următoarele valori: rect — zonă activă dreptunghiulară; cerc — zonă activă în formă de cerc; poli — zonă activă în formă de poligon; implicit - zona activă ocupă întreaga zonă a imaginii. |
| ţintă | Specifică unde va fi descărcat documentul când se face clic pe link. Acceptă următoarele valori: _self — pagina este încărcată în fereastra curentă; _blank — pagina se deschide într-o nouă fereastră de browser; _parent — pagina este încărcată în cadrul părinte; _top - pagina se încarcă în fereastra completă a browserului. |
| tip | Specifică tipul MIME al fișierelor de legătură, de ex. extensia de fișier. |
4. Exemplu de creare a unei hărți imagine
1) Marcați imaginea originală în zonele active cu forma dorită. Coordonatele zonelor pot fi calculate folosind un program de procesare foto, de exemplu, Adobe Photoshop sau A picta.
Orez. 1. Exemplu de marcare a imaginii pentru a crea o hartă 2) Setați numele cardului adăugându-l la etichetă
Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers">
!}
Orez. 2. Un exemplu de creare a unei hărți imagine, când dați clic pe cursorul mouse-ului pe o floare, mergeți la o pagină cu o descriere
Grafica vectorială este utilizată pe scară largă în imprimare. Dar îl putem folosi și pentru site-uri web care utilizează SVG ( Grafică vectorială scalabilă - grafică vectorială scalabilă). Conform Specificația W3.org definește SVG ca:
Un limbaj pentru descrierea graficelor bidimensionale în XML. SVG permite trei tipuri de obiecte: grafică vectorială (cum ar fi căi formate din linii drepte și curbe), imagini și text.
În ciuda faptului că SVG a fost inclus în recomandările W3C din august 2011, această tehnologie nu este practic utilizată în proiecte web, deși are o serie de avantaje față de imaginile raster. În această serie de lecții vom prezenta cum să lucrați cu elemente SVG pe paginile web.
Avantajele SVG
Independența rezoluției
Imaginile raster depind de rezoluție. Grafica capătă un aspect de neprezentat atunci când redimensionează la o anumită scară. Cu grafica vectorială, această situație este imposibilă în principiu, deoarece totul este reprezentat de expresii matematice care sunt recalculate automat atunci când scara este schimbată, iar calitatea este menținută în orice condiții.
Reducerea numărului de solicitări HTTP
SVG poate fi încorporat direct într-un document HTML folosind eticheta svg, astfel încât browserul nu trebuie să facă nicio solicitare pentru a difuza grafica. Această abordare are un efect bun asupra caracteristicilor de încărcare ale site-ului web.
Stiluri și scripturi
Încorporarea cu eticheta svg facilitează, de asemenea, să vă stilați grafica folosind CSS. Puteți modifica proprietățile obiectului, cum ar fi culoarea de fundal, transparența, marginile și așa mai departe. Grafica poate fi manipulată într-un mod similar folosind JavaScript.
Ușor de editat și animat
Obiectele SVG pot fi animate folosind CSS sau JavaScript. Obiectele SVG pot fi modificate și folosind un editor de text.
Dimensiune mai mică a fișierului
SVG are o dimensiune mai mică a fișierului în comparație cu grafica raster.
Forme SVG de bază
Conform specificației, putem desena mai multe forme de bază: linie, polilinie, dreptunghi, cerc, elipsă. Toate elementele trebuie introduse în etichetă . Să ne uităm la elementele de bază în detaliu.
Linia
Pentru a afișa o linie în SVG, utilizați elementul
Începutul segmentului este determinat de atributele x1 și y1 , iar punctul final este determinat de coordonatele din atributele x2 și y2 .
Există, de asemenea, alte două atribute (cură și lățime de contur) care sunt utilizate pentru a defini culoarea și, respectiv, lățimea liniei.
Acest obiect este similar cu
Element
Dreptunghiul este desenat folosind elementul
Pentru a afișa un cerc folosim elementul
Primele două atribute cx și cy definesc coordonatele centrului. În exemplul de mai sus, setăm valoarea la 102 pentru ambele coordonate. Valoarea implicită este 0.
Pentru a afișa o elipsă folosim elementul
Element
Utilizarea unui editor de grafică vectorială
Ieșirea unor obiecte SVG simple în HTML este ușoară. Cu toate acestea, pe măsură ce complexitatea obiectului crește, această practică poate duce la o cantitate mare de muncă necesară.
Dar puteți folosi orice editor de grafică vectorială (de exemplu, Adobe Illustrator sau Inkscape) pentru a crea obiecte. Dacă aveți un instrument ca acesta, desenarea obiectelor necesare în ele este mult mai ușor decât codificarea graficelor într-o etichetă HTML.
Puteți copia comenzi de grafică vectorială dintr-un fișier într-un document HTML. Sau puteți încorpora fișierul .svg folosind unul dintre următoarele elemente: embed , iframe și object .
Rezultatul va fi același.
Suport pentru browser
SVG are un suport bun în majoritatea browserelor moderne, cu excepția versiunii IE 8 și anterioare. Dar problema poate fi rezolvată folosind biblioteca JavaScript. Pentru a vă ușura munca, puteți utiliza instrumentul ReadySetRaphael.com pentru a converti codul SVG în format Raphael.
Mai întâi, descarcăm și includem biblioteca în documentul HTML. Apoi încărcăm fișierul .svg, copiem și lipim codul rezultat în funcție după încărcare:
În eticheta body plasăm următorul element div cu identificatorul rsr .
Și totul este gata.
În următorul tutorial din serie, ne vom uita la cum să stilăm obiectele SVG în CSS.
Această postare este prima dintr-o serie de articole despre SVG (Scalable Vector Graphic), care acoperă elementele de bază ale graficii vectoriale de pe site.
Grafica vectorială este utilizată pe scară largă în imprimare. Pentru site-uri web există SVG, care conform specificației oficiale de pe w3.org este un limbaj pentru descrierea graficelor bidimensionale în XML. SVG include trei tipuri de obiecte: forme, imagini și text. SVG există din 1999, iar din 16 august 2011 a fost inclus în recomandările W3C. SVG este foarte subestimat de dezvoltatorii web, deși are câteva avantaje importante.
Avantajele SVG
- Scalare: Spre deosebire de grafica raster, SVG nu pierde calitatea atunci când este scalat, deci este convenabil de utilizat pentru dezvoltarea retinei.
- Reducerea solicitărilor HTTP: atunci când utilizați SVG, numărul de apeluri către server este redus, iar viteza de încărcare a site-ului crește în consecință.
- Stil și scripting: folosind CSS, puteți modifica setările grafice de pe site, cum ar fi fundalul, transparența sau chenarele.
- Animație și editare: folosind javascript puteți anima SVG, precum și îl puteți edita într-un editor de text sau grafică (InkScape sau Adobe Illustrator).
- Dimensiune mică: obiectele SVG cântăresc mult mai puțin decât imaginile raster.
Forme SVG de bază
Conform specificației oficiale, puteți desena obiecte simple folosind SVG: dreptunghi, cerc, linie, elipsă, polilinie sau poligon folosind o etichetă svg.Linie simplă folosind eticheta linia cu doar doi parametri - puncte de început (x1 și x2) și puncte de sfârșit (y1 și y2):
De asemenea, puteți adăuga atribute sau stiluri de contur și lățime de contur pentru a seta culoarea și lățimea:
Style="stroke-width:1; stroke:rgb(0,0,0);"
linie frântă
Sintaxa este similară cu cea anterioară, se folosește eticheta polilinie, atribut puncte stabilește puncte:
Dreptunghi
Apelat de eticheta rect, puteți adăuga câteva atribute:
Cerc
Apelat prin etichetă cerc, în exemplu folosind atributul r setați raza, cxȘi cy specificați coordonatele centrului:
Elipsă
Apelat prin etichetă elipsă, funcționează similar cerc, dar puteți specifica două raze - rxȘi ry:
Poligon
Apelat prin etichetă poligon, un poligon poate avea un număr diferit de laturi:
Folosind editori
După cum puteți vedea din exemple, desenarea formelor SVG de bază este foarte simplă, dar obiectele pot fi mult mai complexe. Pentru acestea, trebuie să utilizați editori de grafică vectorială, cum ar fi Adobe Illustrator sau Inkscape, unde puteți salva fișiere în format SVG și apoi le puteți edita într-un editor de text. Puteți insera SVG într-o pagină folosind încorporare, iframe și obiect:
Un exemplu este o imagine a unui iPod de pe OpenClipArt.org.
Concepte de bază și utilizare
Formatul Scalable Vector Graphics (SVG) face parte dintr-o familie de standarde de grafică vectorială. Grafica vectorială diferă de grafica raster, în care definiția culorii fiecărui pixel este stocată într-o matrice de date. Cele mai comune formate raster folosite astăzi pe Internet sunt JPEG, GIF și PNG, fiecare dintre ele având propriile avantaje și dezavantaje.
Abrevieri frecvent utilizate
- CSS: Foi de stil în cascadă
- GIF: Format de schimb grafic
- GUI: Interfață grafică cu utilizatorul
- HTML: Hypertext Markup Language
- JPEG: Grupul mixt de experți fotografici
- PNG: Grafică de rețea portabilă
- SVG: Grafică vectorială scalabilă
- XML: Extensible Markup Language
Formatul SVG are mai multe avantaje față de orice format raster:
- Graficele SVG sunt create folosind formule matematice care necesită mult mai puține date pentru a fi stocate în fișierul original, deoarece nu este nevoie să stocați date pentru fiecare pixel individual.
- Imaginile vectoriale se scalează mai bine. Încercarea de a scala imaginile publicate online peste dimensiunea lor originală poate avea ca rezultat imagini distorsionate (sau pixelate).
Acest lucru se datorează faptului că datele originale ale pixelilor au fost concepute pentru o anumită dimensiune a imaginii. La redimensionare, redarea imaginii face o ghicire a datelor care ar trebui folosite pentru a umple noii pixeli. Imaginile vectoriale sunt mai rezistente la scalare; La modificarea dimensiunii imaginii, formulele matematice corespunzătoare pot fi ajustate.
- Dimensiunea fișierului sursă al graficelor vectoriale este de obicei mai mică, astfel încât graficele SVG se încarcă mai repede decât omologii lor raster și necesită mai puține date.
- Imaginile SVG sunt redate de browser și pot fi redate în mod programatic. Ele se pot schimba dinamic, făcându-le deosebit de potrivite pentru aplicații bazate pe date, cum ar fi diagramele.
- Fișierul imagine SVG original este sub formă de text, ceea ce îl face accesibil și prietenos cu motorul de căutare.
În acest articol, veți afla despre beneficiile formatelor SVG și despre cum acestea vă pot ajuta să construiți site-uri web HTML5.
Bazele SVG
Crearea graficelor SVG utilizează un proces complet diferit de crearea fișierelor JPEG, GIF sau PNG. Fișierele JPEG, GIF și PNG sunt create de obicei folosind un fel de program de editare a imaginilor, cum ar fi Adobe Photoshop. Imaginile SVG sunt create de obicei folosind un limbaj bazat pe XML. Există interfețe grafice de utilizator pentru editarea graficelor SVG care vor genera codul XML din spatele imaginii pentru dvs. Cu toate acestea, acest articol presupune că lucrați direct cu XML. Informații despre programele de editare a imaginilor SVG pot fi găsite în secțiune.
Lista 1 arată un exemplu de fișier XML SVG simplu care desenează un cerc roșu cu un chenar negru de 2 pixeli.
Lista 1. Fișier XML SVG
Codul de mai sus produce imaginea prezentată în Figura 1.
Figura 1. Cerc roșu cu margine neagră de 2 pixeli
Crearea formelor geometrice de bază
Când lucrați cu grafică SVG, etichetele XML sunt folosite pentru a crea forme geometrice; aceste elemente XML sunt prezentate în tabelul 1.
Tabelul 1. Elemente XML pentru crearea graficelor SVG
element de linie
Elementul linie este cel mai simplu element grafic. Lista 2 arată cum să creați o linie orizontală.
Listarea 2. Crearea unei linii orizontale
Codul prezentat în Lista 2 produce imaginea prezentată în Figura 2.
Figura 2. Linie orizontală simplă
Eticheta rădăcină SVG are atribute de lățime și înălțime care definesc zona desenabilă. Aceste atribute acționează în același mod ca atributele înălțime și lățime ale altor elemente HTML. În acest caz, se stabilește că zona de lucru ocupă tot spațiul disponibil.
În plus, acest exemplu folosește eticheta de stil. Grafica SVG acceptă aplicarea stilurilor la conținut folosind o mare varietate de metode. Stilurile din acest articol sunt incluse pentru a face imaginile ușor de văzut sau atunci când anumite atribute, cum ar fi culoarea și lățimea liniei, sunt necesare pentru a reda un desen. Mai multe informații despre aplicarea stilurilor în grafica SVG pot fi găsite în secțiune.
Puteți crea o definiție de linie specificând coordonatele de început și de sfârșit în axele X și Y în raport cu spațiul de lucru. Atributele x1 și y1 reprezintă coordonatele de început, iar atributele x2 și y2 reprezintă coordonatele de sfârșit ale liniei. Pentru a schimba direcția de desenare a unei linii, trebuie pur și simplu să schimbați coordonatele. De exemplu, modificând exemplul anterior, puteți crea o linie diagonală așa cum se arată în Lista 3.
Lista 3. Crearea unei linii diagonale
Figura 3 arată rezultatul codului prezentat în Lista 3.
Figura 3. Linie diagonală
element polilinie
O linie întreruptă este un desen format din mai multe linii. Lista 4 prezintă un exemplu de creare a unui desen care arată ca treptele unei scări.
Codul prezentat în Lista 4 produce imaginea prezentată în Figura 4.
O polilinie este creată folosind atributul puncte și prin definirea perechilor de coordonate X și Y separate prin virgule. În exemplul prezentat, primul punct este definit ca 0,40, unde 0 este coordonata X și 40 este coordonata Y. Cu toate acestea, un set de puncte nu este suficient pentru a afișa imaginea pe ecran, deoarece acest set spune doar SVG-ului redă poziția de pornire. Aveți nevoie de cel puțin două seturi de puncte: un punct de început și un punct de sfârșit (de exemplu, points="0,40 40,40").
Ca și în cazul desenării liniilor simple, liniile nu trebuie să fie strict orizontale sau verticale. Dacă modificați valorile din exemplul anterior, puteți obține forme neregulate din linii, ca în Lista 5.
Lista 5. Crearea unei linii zimțate
Codul din Lista 5 produce imaginea prezentată în Figura 5.
Figura 5. Linie zimțată
elementul rect
Pentru a crea un dreptunghi, trebuie doar să-i definiți lățimea și înălțimea, așa cum se arată în Lista 6.
Listarea 6. Crearea unui dreptunghi
Codul din Lista 6 produce imaginea prezentată în Figura 6.
Figura 6. Dreptunghi
Eticheta rect poate fi folosită și pentru a crea un pătrat; un pătrat este pur și simplu un dreptunghi cu aceeași înălțime și lățime.
element cerc
Cercul este creat prin definirea coordonatelor X și Y ale centrului și razei cercului, așa cum se arată în Lista 7.
Lista 7. Crearea unui cerc
Codul din Lista 7 produce imaginea prezentată în Figura 7.
Figura 7. Cercul
Atributele cx și cy determină poziția centrului cercului față de pânză. Deoarece raza este jumătate din lățimea cercului, atunci când o determinați, rețineți că lățimea totală a imaginii va fi de două ori mai mare decât valoarea specificată.
Element de elipsă
În esență, o elipsă este un cerc cu două raze specificate în cod, așa cum se arată în Lista 8.
Lista 8. Crearea unei elipse
Codul din Lista 8 produce imaginea prezentată în Figura 8.
Figura 8. Elipsa
În acest caz, atributele cx și cy definesc și coordonatele centrului în raport cu pânza. Cu toate acestea, cu o elipsă, definiți o rază pentru axa X și o a doua rază pentru axa Y folosind atributele rx și ry.
element poligon
Un poligon este o figură geometrică care conține cel puțin trei laturi. Lista 9 creează un triunghi simplu.
Lista 9. Crearea unui triunghi
Codul din Lista 9 produce imaginea prezentată în Figura 9.
Figura 9. Triunghi
Similar cu lucrul cu elementul polilinie, poligoanele sunt create prin definirea perechilor de coordonate X și Y folosind atributul puncte.
Adăugând perechi de coordonate de-a lungul axelor X și Y, puteți crea poligoane cu orice număr de laturi. De exemplu, modificând codul din exemplul anterior, puteți crea un poligon cu patru laturi, așa cum se arată în Lista 10.
Lista 10. Crearea unui poligon cu patru laturi
Codul prezentat în Lista 10 produce imaginea prezentată în Figura 10.
Figura 10. Poligon cu patru laturi
Folosind eticheta poligon, puteți crea și forme geometrice ale formelor complexe. Lista 11 creează un desen cu stea.
Lista 11. Crearea unei stele
Codul prezentat în Lista 11 produce imaginea prezentată în Figura 11.
Figura 11. Poligon stelar
element cale
Elementul cale este cel mai complex dintre toate elementele de desen, permițându-vă să creați desene arbitrare folosind un set de comenzi speciale. Elementul cale acceptă comenzile enumerate în Tabelul 2.
Tabelul 2. Comenzi suportate de elementul cale
Aceste comenzi pot fi folosite fie cu litere mari, fie cu litere mici. Dacă comanda este specificată cu majuscule, se aplică poziționarea absolută. Dacă se folosește o comandă cu litere mici, se aplică poziționarea relativă. Furnizarea de exemple de utilizare a tuturor comenzilor depășește scopul acestui articol. Cu toate acestea, mai jos sunt câteva exemple care demonstrează elementele de bază ale utilizării acestor comenzi.
Folosind elementul cale, puteți crea orice forme geometrice simple din exemplele anterioare din acest articol. Lista 12 folosește elementul cale pentru a crea un triunghi obișnuit.
Lista 12. Crearea unui triunghi folosind elementul cale
Codul prezentat în Lista 12 produce imaginea prezentată în Figura 12.
Figura 12. Triunghi creat folosind elementul cale
Lista comenzilor este definită folosind atributul d. În acest exemplu, desenul începe în punctul cu coordonatele X 150 și Y 0, definite de comanda de mutare la punct (M150 0). Apoi utilizați comanda pentru a trage o linie până la punct (L75 200). o linie este trasată la un punct cu coordonatele X = 75 și Y = 200. După aceasta, o altă linie este trasată folosind o altă comandă pentru a trage o linie la un punct (L225 200). În cele din urmă, modelul este închis folosind comanda snap (Z). Comanda Z nu însoțește nicio coordonată, deoarece pentru a închide o cale, prin definiție, desenați o linie din poziția curentă înapoi la punctul de început al desenului (în acest caz, punctul cu coordonatele X = 150, Y = 0).
Scopul exemplului dat a fost să vă arate conceptul; Dacă trebuie doar să creați un triunghi obișnuit, este mai bine să utilizați eticheta poligon.
Adevărata putere a elementului cale este capacitatea sa de a crea forme personalizate, așa cum se arată în Lista 13. Acest exemplu este preluat din documentul World Wide Web Consortium (W3C). Grafică vectorială scalabilă (SVG) 1.1 (ediția a doua)(vezi secțiunea).
Lista 13. Crearea unei forme personalizate folosind elementul cale
Codul prezentat în Lista 13 produce imaginea prezentată în Figura 13.
Figura 13. Forma personalizată creată folosind elementul cale
Elementul cale poate fi folosit pentru a crea modele complexe, cum ar fi diagrame și linii ondulate. Rețineți că exemplul furnizat utilizează mai multe elemente de cale. Când creați desene, nu vă limitați la niciun element de desen din eticheta rădăcină SVG.
Filtre și gradiente
Pe lângă stilurile de bază CSS care au fost folosite în multe dintre exemplele de mai sus, grafica SVG acceptă și utilizarea filtrelor și a gradienților. În această secțiune, veți învăța cum să aplicați filtre și gradienți imaginilor SVG.
Filtre
Filtrele pot fi folosite pentru a aplica efecte speciale imaginilor SVG. SVG acceptă următoarele filtre.
- feBlend
- feColorMatrix
- feComponentTransfer
- feCompozit
- feConvolveMatrix
- feDiffuseLighting
- feDisplacementMap
- feFlood
- feGaussianBlur
- feImagine
- feMerge
- feMorfologie
- feOffset
- feSpecularLighting
- feTile
- feTurbulență
- feDistantLight
- fePointLight
- feSpotLight
Lista 14 creează un efect de umbră care se aplică unui dreptunghi.
Lista 14. Crearea unui efect de umbră pentru un dreptunghi
Codul prezentat în Lista 14 produce imaginea prezentată în Figura 14.
Figura 14. Efect de umbră pentru un dreptunghi
Filtrele sunt definite în interiorul elementului def (prescurtare de la „definiție”). Filtrului din acest exemplu i se atribuie un identificator (id) „f1”. Eticheta de filtru în sine are atribute pentru a defini coordonatele X și Y, precum și lățimea și înălțimea filtrului. În interiorul etichetei de filtru, utilizați elementele de filtru necesare și setați proprietățile acestora la valorile dorite.
Odată ce un filtru este definit, îl asociați cu un anumit desen folosind atributul filtru, așa cum se arată în . Setați valoarea URL la valoarea atributului id atribuită filtrului.
Gradiente
Gradient reprezintă o trecere treptată de la o culoare la alta. Există două tipuri principale de gradienți: liniari și radiali. Tipul de gradient aplicat este determinat de elementul pe care îl utilizați. Următoarele exemple arată cum să aplicați gradienți liniari și radiali unei elipse.
Lista 15 creează o elipsă cu un gradient liniar.
Lista 15. Crearea unei elipse cu un gradient liniar
Codul prezentat în Lista 15 produce imaginea prezentată în Figura 15.
Figura 15. Elipsă cu gradient liniar
Lista 16 creează o elipsă cu un gradient radial.
Lista 16. Crearea unei elipse cu un gradient radial
Codul prezentat în Lista 16 produce imaginea prezentată în Figura 16.
Figura 16. Elipsa cu gradient radial
Gradienții, ca și filtrele, sunt definite în cadrul elementului def. Fiecărui gradient i se atribuie un identificator (id). Atributele gradientului (cum ar fi culorile) sunt setate în interiorul etichetei gradient folosind elemente de oprire. Pentru a aplica un gradient unei imagini, setați valoarea URL a atributului de umplere la identificatorul (id-ul) gradientului dorit.
Text și SVG
Pe lângă crearea formelor geometrice de bază, SVG poate fi folosit și pentru a genera text, așa cum se arată în Lista 17.
Lista 17. Crearea textului folosind SVG
Codul prezentat în Lista 17 produce imaginea prezentată în Figura 17.
Figura 17. Text creat cu SVG
Acest exemplu creează o propoziție SVG I love folosind elementul text. Când utilizați elementul de text, textul efectiv afișat se află între elementele de text de deschidere și de închidere.
Puteți afișa text de-a lungul diferitelor axe și chiar de-a lungul căilor. În Lista 18, textul este afișat într-o cale în formă de arc.
Lista 18. Crearea textului de-a lungul unui traseu în formă de arc
Codul prezentat în Lista 18 produce imaginea prezentată în Figura 18.
Figura 18. Text plasat de-a lungul unui traseu în formă de arc
Acest exemplu adaugă un spațiu de nume XML suplimentar, xlink , la eticheta rădăcină SVG. Calea folosită pentru arcul textului este creată în interiorul elementului def, astfel încât calea în sine nu este redată în desen. Textul afișat este imbricat în interiorul unui element textPath, care utilizează spațiul de nume xlink pentru a se referi la id-ul căii dorite.
Ca și în cazul altor elemente grafice SVG, puteți aplica și filtre și gradienți textului. Lista 19 aplică un filtru și un gradient textului.
Lista 19. Crearea textului cu filtru și gradient
Codul prezentat în Lista 19 produce imaginea prezentată în Figura 19.
Figura 19. Text cu filtru și gradient
Adăugarea codului XML SVG la paginile web
Odată ce SVG XML este creat, acesta poate fi inclus în paginile HTML în mai multe moduri. Prima metodă este să inserați direct codul XML SVG în documentul HTML, așa cum se arată în Lista 20.
Lista 20. Inserarea directă a SVG XML într-un document HTML
Această metodă este probabil cea mai simplă, dar nu încurajează reutilizarea. Rețineți că SVG XML poate fi salvat ca fișier cu extensia .svg. Când salvați o imagine SVG ca fișier .svg, puteți utiliza elemente încorporate, obiect și iframe pentru a o include în paginile Web. Lista 21 arată codul pentru încorporarea unui fișier XML SVG folosind elementul de încorporare.
Lista 21. Includerea unui fișier XML SVG folosind elementul de încorporare
Lista 22 arată codul pentru includerea unui fișier XML SVG folosind elementul obiect.
Lista 22. Includerea unui fișier XML SVG folosind elementul obiect
Lista 23 arată codul pentru includerea unui fișier XML SVG folosind un element iframe.
Lista 23. Includerea unui fișier XML SVG folosind un element iframe
Cu una dintre aceste metode, puteți include aceeași imagine SVG pe mai multe pagini și o puteți actualiza prin editarea fișierului .svg original.
Concluzie
Acest articol acoperă elementele de bază ale creării graficelor folosind formatul SVG. Ați învățat cum să utilizați elementele de geometrie încorporate pentru a crea forme geometrice de bază, cum ar fi o linie, dreptunghi, cerc și așa mai departe. Ați învățat, de asemenea, cum să utilizați elementul cale pentru a crea modele complexe prin lansarea unei secvențe de comenzi, cum ar fi deplasarea la un punct. , trasarea unei linii la un punct și trasarea unui arc până la un punct. Acest articol vă învață, de asemenea, cum să aplicați filtre și gradienți la graficele SVG, inclusiv graficele cu text și cum să includeți grafice SVG în paginile HTML.
