Share
Ca designer web, este timpul să știți cum să implementați SVG (Scalable Vector Graphics) pe site-urile dvs. web. Să aruncăm o privire la elementele de bază ale SVG, precum și la modele mai complexe, cum ar fi logo-urile sau icoanele.
Recent, la WWDC 2012, Apple a anunțat lansarea noului display pentru retină MacBook Pro. Ecranele retinei au o densitate a pixelilor mai mare (220,5ppi) decât cea a ecranelor normale sau a monitoarelor, iar Apple susține că densitatea pixelilor tehnologiei retinei este atât de mare încât ochiul nu poate observa pixelizarea la o distanță tipică de vizionare. Dacă ați fost martor la o afișare a retinei la prima vedere, atunci sunt sigur că veți fi de acord că arată uimitor. Cu toate acestea, aceste afișe ale retinei pot începe să provoace probleme pentru noii noștri designeri web.
Problema apare atunci când imaginile care au fost salvate anterior ca 72ppi încep să pară distorsionate pe ecranele retinei. Soluția pentru această problemă nu este încă 100% rezolvată, iar designerii se uită la noi modalități de a încerca să depășească această problemă.
O soluție posibilă (în unele cazuri) este utilizarea SVG. De ce doriți să utilizați SVG? SVG-urile sunt redate ca vectori și, prin urmare, sunt capabili să se adapteze la orice rezoluție a ecranului pe care le vedem, menținând în același timp claritatea și calitatea cristalului pe care am intenționat-o atunci când le-am proiectat pentru prima dată.
Aceasta nu va rezolva toate problemele; nu putem folosi SVG pentru a face imagini bazate pe pixeli, cum ar fi .jpg sau png's (cu toate acestea, pentru asta putem folosi întotdeauna eticheta panza). Când vine vorba de lucruri cum ar fi icoane sau logo-uri ilustrate, SVG se dovedește extrem de util. Astăzi vă voi arăta elementele de bază ale utilizării SVG, precum și demonstrarea modului în care puteți lua vectorii pe care i-ați proiectat în Adobe Illustrator și le puteți implementa pe site-urile dvs. cu ușurință.
Înainte de a intra, vă voi oferi o imagine de ansamblu rapidă despre SVG:
Să începem simplu. Vom crea o linie. Facem acest lucru prin adăugarea următorului cod într-un document HTML.
Mai întâi folosim eticheta "svg" și apoi în interiorul căruia adăugăm marcajul xml. Iată ce definim:
De exemplu, dacă vrem să creăm o linie diagonală, putem seta atributul y2 la 200 și acest lucru ar aduce punctul final al liniei cu 200, creând astfel o linie diagonală. Putem aplica, de asemenea, unele stiluri la acest lucru si noi facem asta cu CSS. Aici am folosit câteva stiluri inline, dar le puteți utiliza într-o foaie de stil externă dacă doriți.
Cercurile pot fi create în mod similar cu o linie, cu excepția câtorva atribute. Aici vom crea un cerc de argint, cu o margine neagra si o raza de 50.
Atributele cx și cy sunt cele în care putem seta coordonatele x și y ale mijlocului cercului. Dacă am fi ratat aceste atribute, atunci centrul cercului ar fi setat la "0", ceea ce ar duce la tăierea cercului din pagină. În cele din urmă, atributul marcat cu "r" stabilește raza cercului.
După cum puteți vedea până acum, crearea de forme cu SVG este într-adevăr destul de simplă. Crearea unui dreptunghi nu este o excepție.
Într-un mod similar cu stabilirea lățimii și înălțimii unui element în CSS, facem același lucru, dar folosind atributele svg 'rect'.
Ellipse funcționează în aproape același fel ca crearea unui cerc, totuși, de data aceasta, mai degrabă decât având doar o rază fixă, avem atribute separate pentru raza x și y.
Poligoanele devin puțin mai complicate (dar numai puțin). Începem prin a da poligonului o culoare de umplere, un accident vascular cerebral de portocaliu și o lățime de accident vascular cerebral de 10. Noi trecem apoi atributele punctului. Fiecare pereche de coordonate definește coordonatele x și y ale fiecărui punct de colț al poligonului. În această demonstrație am creat o stea.
Așa cum am menționat mai devreme, SVG este minunat deoarece, atunci când includem text, motoarele de căutare sunt capabile să îl indexeze - spre deosebire de alte motoare de redare, cum ar fi Flash.
Acesta este modul în care adăugăm textul:
webdesigntuts+
În codul de mai sus puteți vedea că am adăugat coordonatele x și y. Apoi setați câteva stiluri CSS, cum ar fi familia fontului, greutatea, dimensiunea și culoarea.
În eticheta căii trebuie să ne concentrăm asupra atributului "d". Acest atribut "d" descrie calea care trebuie creată. Fiecare comandă din atributul "d" este una din literele de comandă de mai jos, urmată de parametrii săi. Comenzile pentru atributul "d" sunt următoarele:
Iată câteva exemple de cod:
Putem chiar seta textul nostru de sus pentru a urma acea cale ca aceasta:
În principiu, am definit calea în eticheta "defs" și i-am dat un id de "path1". Apoi, putem aplica acest lucru textului utilizând atributul "textPath".
Acum, că am acoperit elementele de bază ale creării de forme utilizând SVG, este timpul să trecem la ceva mai complex. Din fericire pentru noi, deși nu trebuie să fie acea complex, de fapt este foarte simplu mulțumită Adobe Illustrator. Pentru cei care nu știu despre Illustrator, pot fi descriși ca:
Primul mediu al industriei de desenare pentru industrie pentru crearea de grafice care să se extindă pe medii.
Deschideți Illustrator și creați logo-ul sau pictograma. Cele mai multe logo-uri profesionale ar fi trebuit să fie create folosind vectori, astfel încât ar trebui să le puteți obține de la clienții dvs. Dacă nu, atunci puteți încerca să le recreezi singuri. Dacă nu sunteți familiarizați cu lucrul în Illustrator, atunci există o mulțime de informații despre Vectortuts+
Odată ce aveți logo-ul sau pictograma, mergeți la "File> Save as", apoi selectați "SVG" din meniul drop-down "Save as type". Dă numele fișierului tău și apoi dă clic pe "Salvează". Dialogul opțiunilor SVG trebuie deschis apoi. De acolo selectați "Afișați codul SVG". Acesta va deschide apoi codul în browser. Pur și simplu trebuie să copiați între, și inclusiv, etichetele svg în documentul dvs. html și asta-i tot. Cât de simplu a fost asta?
De asemenea, puteți utiliza Illustrator pentru a crea căi. Pur și simplu trageți o linie în Illustrator, apucați datele atributului "d" pe care le puteți utiliza pentru o cale așa cum am descris mai devreme. De exemplu, calea pe care am creat-o pentru textul "webdesigntuts +" de mai sus a fost creată în Illustrator și apoi exportată în documentul meu.
Puteți apoi să stylizați sau să poziționați eticheta SVG în document utilizând metode standard CSS. De asemenea, puteți să-l înfășurați într-o etichetă de ancorare pentru a crea un link sau să-l vizați cu JavaScript pentru a adăuga funcționalități suplimentare.
Acum este doar o chestiune de timp înainte ca retina și densitatea pixelilor să fie parte a fiecărui dispozitiv și a ecranului pe care îl folosim și acest lucru va continua să fie împins înainte cu o densitate mai mare în viitor. Folosind SVG suntem capabili de a crea grafică scalabilă, care va deveni clar cristal și va fi gata pentru viitor, pe măsură ce rezoluțiile ecranului vor crește. Desigur, SVG-urile nu sunt practice în orice situație, dar pentru ilustrațiile pe vector, pe web, este cu siguranță cea mai bună cale de urmat.
Accentsconagua