de Surbhi Oberoi

Cum sa proiectezi sa codezi si sa animi SVG urile

Cum să proiectați, să codificați și să animați SVG-urile

Vă puteți gândi la Scalable Vector Graphics (SVG) ca grafică receptivă. SVG este un format bazat pe XML care vă permite să creați o imagine utilizând etichete și atribute definite. Codul dvs. va reda o imagine pe care o puteți edita chiar în editorul de cod.

Iată un exemplu de SVG. Dacă vă uitați la codul său, veți observa că este alcătuit din etichete și atribute, la fel ca un document HTML. Întregul lucru este conținut în eticheta . În primul rând, există o etichetă cu linii negre și umplutură albă. Și în interiorul acestuia, există o elipsă (aproape un cerc, dar observați atributele ry și rx) care este plină de culoare roșie.

Putem folosi SVG pe web în două moduri. Putem folosi fișierele SVG ca atribut src al etichetelor . Deci, puteți avea așa cum ați face cu PNG și JPEG.

Dar, cazul mai interesant (în cazul în care ați observat că etichetele au un atribut id ca HTML) este că putem lipi direct sursa SVG într-un

din HTML-ul nostru. Putem apoi stiliza aceste divs ca blocuri de construcții individuale – sau chiar grupuri de blocuri de construcție – așa cum dorim. Putem aplica CSS, animații sau chiar adăuga interactivitate folosind JavaScript. Acesta este ceea ce face ca SVG-urile să fie unul dintre cele mai versatile și mai fierbinți elemente în acest moment în HTML.

SVG-urile sunt infinit scalabile, receptive, au o dimensiune mai mică a fișierului, sunt rezistente la viitor pentru ecrane dense bazillion-pixel de generație următoare și pot fi stilizate, animate și interacționate cu ajutorul tehnologiilor web cunoscute – și anume CSS și JavaScript.

Observați că toate aceste lucruri erau posibile anterior doar cu un Flash embed – care necesita un flash player și multă muncă specializată. Și nu există dragoste în jurul valorii de Flash în aceste zile.

Imagini Vector vs Raster

Imaginile raster sunt formate din pixeli pentru a forma o imagine completă. JPEG-urile, GIF-urile și PNG-urile sunt tipuri comune de imagini raster. Aproape toate fotografiile găsite pe web sunt imagini raster.

Imaginile raster constau dintr-un număr fix de pixeli, deci nu este posibilă redimensionarea acestora fără a le afecta rezoluția. Este posibil să fi observat că redimensionarea majorității imaginilor le conferă un aspect granulat și neclar. Asta datorită numărului lor fix de pixeli.

Iată ce se întâmplă atunci când măriți o imagine raster:

Cum sa proiectezi sa codezi si sa animi SVG urile

Imaginile vectoriale, pe de altă parte, sunt flexibile și independente de rezoluție. Acestea sunt construite folosind forme geometrice – linii, dreptunghiuri, curbe – sau o succesiune de comenzi. Puteți modifica atributele acestora, cum ar fi culoarea, umplerea și conturul.

O utilizare obișnuită pentru imaginile vectoriale este pictogramele și animațiile de pictograme mici. Acestea vor apărea clare, chiar și pe afișajele cu cea mai mare densitate, cum ar fi smartphone-urile 4k viitoare.

Iată ce se întâmplă atunci când măriți o imagine vectorială:

1611481026 456 Cum sa proiectezi sa codezi si sa animi SVG urile

Etichete SVG

vg>

Eticheta încorporează un document SVG în documentul curent, HTML de exemplu. Eticheta are propriile coordonate x și y, înălțimea și lățimea și propriul său ID unic.

Iată cum ar putea arăta o etichetă :

<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">

<; g>

Eticheta grupează elementele împreună și acționează ca un container pentru elemente grafice conexe. Un element poate conține chiar și alte elemente imbricate în el.

Iată un exemplu de etichetă :

<g> <title>background</title> <rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/> <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid"> <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/> </g> </g>

ct>

Elementul este o formă de bază SVG reprezentând un dreptunghi. Elementul poate avea diverse atribute, cum ar fi coordonatele, înălțimea, lățimea, culoarea de umplere, culoarea liniei și colțurile ascuțite sau rotunjite.

Iată un exemplu de etichetă :

<rect id="svg_1" height="253" width="373" y="59" x="107.5" stroke-width="1.5" stroke="#000" fill="#fff"/>

se>

Elementul vă permite să clonați și să refolosiți elementele grafice SVG, inclusiv alte elemente precum , precum și alte elemente .

Iată un exemplu de etichetă :

<text y="15">black</text> <use x="50" y="10" xlink:href="https://www.freecodecamp.org/news/a-guide-to-svg-on-web-c5932dadca03/#Port" /> <text y="35">red</text> <use x="50" y="30" xlink:href="https://www.freecodecamp.org/news/a-guide-to-svg-on-web-c5932dadca03/#Port"/> <text y="55">blue</text> <use x="50" y="50" xlink:href="https://www.freecodecamp.org/news/a-guide-to-svg-on-web-c5932dadca03/#Port" style="fill:blue"/

a>

Elementul definește o cale de coordonate pentru o formă. Codul pentru eticheta de cale ar putea părea criptic, dar nu fi intimidat. Următorul exemplu de cod poate fi citit astfel:
1. „M150 o” – Mutați la (150,0)

2. ”L75 200” – Trageți o linie la (75.200) din ultima poziție (care era (150,0)

3. „L255 200” – Trageți o linie la (225.200) din ultima poziție (care era (75.200)

4. „Z” – Închideți bucla (trageți până la punctul de pornire)

Probabil că nu este nevoie să aflați acest lucru, deoarece codul pentru cale poate fi generat în orice editor SVG, dar este bine să știți.

Iată un exemplu de etichetă :

<svg height="210" width="400"> <path d="M150 0 L75 200 L225 200 Z" /> </svg>

ol>

În cele din urmă, elementul definește simbolurile care sunt reutilizabile. Aceste simboluri pot fi redate numai atunci când sunt apelate de elementul .

Iată un exemplu de etichetă :

<svg> <symbol id="sym01" viewBox="0 0 150 110"> <circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red"/> <circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white"/> </symbol> <use xlink:href="https://www.freecodecamp.org/news/a-guide-to-svg-on-web-c5932dadca03/#sym01" x="0" y="0" width="100" height="50"/> <use xlink:href="https://www.freecodecamp.org/news/a-guide-to-svg-on-web-c5932dadca03/#sym01" x="0" y="50" width="75" height="38"/> <use xlink:href="https://www.freecodecamp.org/news/a-guide-to-svg-on-web-c5932dadca03/#sym01" x="0" y="100" width="50" height="25"/> </svg>

Crearea SVG-urilor

Există o mulțime de editori SVG disponibili, cum ar fi Adobe Illustrator și Inkscape, care este gratuit și open source. Deoarece fișierele SVG sunt text XML simplu, puteți, de asemenea, să codificați manual unul dintre ele.

Pentru acest exemplu voi folosi un simplu online editor unde puteți proiecta SVG-uri fără a fi nevoie să instalați nimic.

  1. Mai întâi creați un cerc

2. Apoi adăugați mai multe cercuri și salvați codul sursă

Animații CSS3

SVG-urile pot fi animate adăugând un id sau o clasă la calea SVG din cod și apoi stilându-l în CSS3 ca orice alt document. Mai jos este un exemplu despre modul în care pot fi animate SVG-urile.

Animația CSS3 oferă o varietate de tipuri de animații din care puteți alege. Animația de linie este un alt atribut interesant al SVG.

Pentru următorul exemplu, am scris textul „Bună, eu sunt Surbhi” folosind stiloul în editor. Apoi am folosit din nou cadrele cheie CSS3 pentru a anima cursa.

Observați că fiecare cale are un id unic. Asta pentru că întârzierea în animație este importantă atunci când animați o lovitură cu mai mult de un cuvânt.

Animațiile etichetei

este o etichetă de animație încorporată în elementul SVG în sine. Acesta definește modul în care atributul unui element se schimbă de la valoarea inițială la valoarea finală în durata animației specificată. Aceasta este utilizată pentru a anima proprietăți care nu pot fi animate numai de CSS.

Elementele comune ale etichetei animate sunt culoarea, mișcarea și transformarea.

Eticheta animată este cuibărită în interiorul etichetei de formă a obiectului care trebuie animat. Nu funcționează pe coordonatele căii, ci doar în interiorul etichetelor obiect. Observați atributul aditiv. Înseamnă că animațiile nu se anulează reciproc, ci lucrează împreună în același timp.

Iată un exemplu de animare a unui SVG utilizând eticheta de animare HTML5:

Animații și interactivitate bazate pe JavaScript

Deoarece SVG este doar un document cu etichete, putem folosi, de asemenea, JavaScript pentru a interacționa cu elemente individuale ale SVG-urilor prin apăsarea selectorilor lor (id sau clasă).

În afară de vanilla JS, există diverse biblioteci JavaScript disponibile pentru animarea și interacțiunea cu SVG-uri precum Vivus.js, Snap.svg, RaphaelJS și Velocity.js.

În exemplul următor, am folosit biblioteca Vivus.js împreună cu jQuery pentru a realiza o animație de linie.

De ce nu folosiți SVG-uri pentru toate imaginile?

SVG-urile sunt cele mai potrivite pentru imagini care pot fi construite cu puține forme și formule geometrice. Deși, în principiu, puteți converti orice altceva ca fotografia dvs. în SVG, dimensiunea imaginii ar fi de câțiva megaocteți, învingând astfel scopul de a economisi spațiu al utilizării SVG-urilor. Mai bine folosiți SVG-uri pentru pictograme, sigle și animații mici.

Iată ceva ce am creat în timp ce învățam despre SVG-uri, folosind CSS și SVG-uri, fără biblioteci. (Nu judecați!) https://github.com/surbhioberoi/surbhi.me

1611481027 46 Cum sa proiectezi sa codezi si sa animi SVG urile

Publicat inițial la surbhioberoi.com pe 12 iulie 2016.

#Cum #să #proiectezi #să #codezi #și #să #animi #SVGurile

Cum să proiectezi, să codezi și să animi SVG-urile

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.