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 un pic neplăcute ș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 punct (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 iar 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ă.

Ușor-peasy Ușor-peasy

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:

Ușor-peasy Ușor-peasy

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:

Ușor-peasy Ușor-peasy

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:

• umple- 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
• dimensiunea 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 umple, 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:

1. Puteți defini o clasă o dată și o puteți aplica mai multor elemente.
2. Codul CSS este mai ușor de înțeles decât atributele din interiorul elementelor.
3. Din aceste motive, a doua abordare este mai ușor de întreținut și, de asemenea, mai rapid de implementat.

Cu toate acestea, utilizarea CSS pentru a stila SVG poate fi confuză pentru unii. umple, 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, fiind „î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 numerică.

Puteți folosi rgba() oriunde trebuie să specificați o culoare, de exemplu în atribute umpleŞ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ță umpleŞ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 umpleŞ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ă.

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 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 întreruptă

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.

Grafica vectorială este utilizată pe scară largă în mediile tipărite. Pe site, putem adăuga, de asemenea, grafică vectorială SVG (Grafic vectorial scalabil). Referindu-ne la specificația oficială de pe W3.org, SVG este descris ca un limbaj pentru descrierea graficelor bidimensionale în XML. SVG vă permite să creați forme grafice vectoriale (cum ar fi un contur format din linii drepte și curbe), imagini și text.

Avantajele SVG

SVG oferă mai multe avantaje față de grafica raster, iată câteva dintre ele:

Scalabilitate

O imagine raster este formată din pixeli și își pierde calitatea atunci când este scalată, în timp ce graficele vectoriale își păstrează proporțiile indiferent de scară.

Accelerarea unei cereri HTTP

Un fișier SVG poate fi încorporat direct într-un document HTML folosind eticheta svg, astfel încât browserul nu trebuie să facă o solicitare. Acest lucru are ca rezultat o performanță mai bună și o încărcare mai mică pe site.

Stilizare și scenarii

Încorporarea etichetei svg direct în documentul HTML ne permite, de asemenea, să setăm cu ușurință stiluri grafice folosind . Putem schimba proprietățile obiectului, cum ar fi culoarea de fundal, transparența chenarului etc. Mai mult, putem, de asemenea, manipula grafica folosind .

Imaginile pot fi animate și editabile

Un obiect SVG poate fi animat folosind animația elementului folosind CSS sau JavaScript (JQuery). Un obiect SVG poate fi editat cu orice editor de text sau editor de grafică vectorială, cum ar fi Inkscape sau Adobe Illustrator.

Dimensiune mai mică a fișierului

SVG are o dimensiune mai mică a fișierului în comparație cu o imagine raster.

Crearea de forme simple cu SVG

Conform specificației, putem crea câteva forme de bază, cum ar fi dreptunghiuri, cercuri, linii, elipse, polilinii și poligoane folosind SVG și pentru ca browserul să afișeze grafice SVG, toate aceste elemente grafice trebuie să fie inserate într-o etichetă etichetă Să ne uităm la exemplele de mai jos:

Linia

La trage o linieîn SVG puteți folosi elementul . Acest element este folosit pentru a trage o linie, deci va consta din doar două puncte, începutŞi Sfârşit.

< /svg>

După cum puteți vedea mai sus, originea liniei este exprimată cu primele două atribute x1 și x2, iar punctul final al liniei este exprimat cu y1 și y2.

Există, de asemenea, alte două atribute, stroke și stroke-width, care sunt utilizate pentru a defini culoarea și lățimea chenarului. În plus, putem defini și aceste atribute într-un stil inline:

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

ea ajunge să facă același lucru.

linie întreruptă

Acest element este similar cu , dar cu ajutorul Pentru un element, putem desena mai multe linii în loc de una. Iată un exemplu:

"0,0 50,0 150,100 250,100 300,150" fill="rgb(249,249,249)" stroke-width ="1" stroke="rgb(0,0,0)" /> < /svg>

Dreptunghi

Desenarea unui dreptunghi este, de asemenea, ușor cu aceasta element. Trebuie doar să specificăm lățimea și înălțimea, astfel:

< /svg>

Cerc

De asemenea, putem desena un cerc cu element. În exemplul următor vom crea un cerc cu o rază de 100 definită folosind atributul r:

< /svg>

Primele două atribute, cx și cy definesc coordonatele centrului cercului. În exemplul de mai sus, am creat 102 ca și coordonatele x și y, dacă aceste atribute nu sunt specificate, 0 va fi tratat ca valoare implicită.

Elipsă

Putem desena o elipsă folosind eticheta . Principiul de creație este același ca și în cazul cercului, dar de data aceasta putem controla raza x și raza y ale liniei, precum și atributele rx și ry;

< /svg>

Poligon

Folosind elementul Putem realiza forme cu mai multe fețe, cum ar fi triunghi, hexagon și chiar dreptunghi. Iată un exemplu:

"70.444,218.89 15.444,118.89 70.444,18.89 180.444,18.89 235.444,118.89 180.444,218.89" fill="rgb(234,234,234)" stroke-width ="1" stroke="rgb(0,0,0)" /> < /svg>

Utilizarea unui editor de grafică vectorială

După cum puteți vedea, utilizarea unor obiecte SVG simple într-un document HTML este destul de ușoară. Cu toate acestea, atunci când obiectul devine mai complex, această metodă nu mai este ideală.

Din fericire, așa cum am menționat mai sus, putem folosi un editor de grafică vectorială, de exemplu Adobe Illustrator sau Inkscape .

Dacă lucrați cu Inkscape, puteți salva fișierele vectoriale în format SVG și apoi le puteți deschide într-un editor de cod text. Copiați toate codurile și inserați-le în documentul HTML.

Puteți încorpora fișiere .svg folosind etichete embed , iframe și obiect, de exemplu;

Rezultatul va fi în cele din urmă același.

*În acest exemplu folosim o imagine

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ției W3.org, SVG este definit 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 . El desenează un segment pentru care trebuie determinate două puncte: începutul și sfârșitul.

Î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 , dar folosind elementul Puteți desena mai multe linii deodată.

Element Conține atributul puncte, care este folosit pentru a specifica coordonatele punctelor.

Dreptunghiul este desenat folosind elementul . Trebuie să determinați lățimea și înălțimea.

Pentru a afișa un cerc folosim elementul . În exemplul următor, creăm un cerc cu o rază de 100, care este definit în atributul r:

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 . Funcționează la fel ca cerc, dar putem specifica în mod specific razele x și y folosind atributele rx și ry:

Element Afișează forme poliedrice, cum ar fi triunghi, hexagon etc. De exemplu:

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 grafica 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.

linie întreruptă

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: