Un ghid practic pentru SVG și instrumente de proiectare

O bună înțelegere a SVG este o abilitate rară. Surprinzător de des, SVG este tratat doar ca un alt format de imagine. Folosim SVG datorită scalabilității și dimensiunii mai mici ale fișierului, dar, în realitate, SVG este mult mai mult!

În acest articol, voi face lumină asupra a trei dintre cele mai populare instrumente de design: Adobe Illustrator, Sketch și Figma. Există și alte instrumente disponibile care sprijină SVG care pot avea alte funcționalități și pot implementa alte soluții.

Notă : Dacă nu se specifică altfel, conținutul acestui articol se referă la SVG 1.1 ediția a doua. Unele dintre punctele discutate mai jos nu s-ar aplica SVG 2, cu toate acestea, încă nu a atins starea de recomandare, lăsând SVG 1.1 ca cea mai actualizată specificație.

De ce să vă deranjați despre instrumentele de design?

SVG este un limbaj de marcare bazat pe XML și, ca orice alt limbaj de programare, poate fi scris și editat într-un editor de text. Deci, teoretic, spre deosebire de fișierele JPG sau PNG, nu avem nevoie de niciun software GUI pentru a crea SVG. Cu toate acestea, în marea majoritate a cazurilor, utilizarea aplicațiilor de design grafic este inevitabilă.

Lucrul cu forme complicate și grafice într-un format bazat pe text este absolut posibil, dar de obicei ar fi foarte dificil și plictisitor. Prin urmare, este o practică obișnuită să utilizați aplicații precum Adobe Illustrator, Sketch sau Figma pentru a proiecta grafică vizual și apoi să le exportați într-un format SVG.

Deci, indiferent dacă sunteți un designer care codifică sau un dezvoltator conștient de design, o bună competență în lucrul cu SVG necesită puține cunoștințe din ambele părți: instrumente de proiectare și limbajul SVG în sine. Pentru a înțelege mai bine relația dintre cele două, să aruncăm o privire mai atentă la ce au de oferit aplicațiile de design grafic și la modul în care caracteristicile lor se traduc în SVG.

Forme de bază

Multe grafice vectoriale sunt construite din câteva forme de bază - grupate, transformate și combinate între ele. Tabelul de mai jos reprezintă instrumentele de formă disponibile în Illustrator, Sketch și Figma și în ce elemente SVG sunt exportate.

Elipse și cercuri

Una dintre formele de bază din fiecare instrument de design este o elipsă. În SVG, vom găsi un element <ellipse /> potrivit, definit de coordonatele centrului elipsei ( cx și cy ) și două raze ( rx și ry ).

Iată cum arată o elipsă în SVG:

 <ellipse cx="400" cy="300" rx="250" ry="150"/>

Tipul foarte special de elipsă este un cerc. Un cerc este o elipsă cu razele rx și ry egale între ele. SVG are propriul său element <circle /> care ia un atribut mai puțin, deoarece există o singură rază de luat în considerare:

 <circle cx="400" cy="300" r="250"/>

În cazul elipselor și cercurilor, toate instrumentele de design funcționează la fel: Instrumentul Elipse în Illustrator, Instrumentul Oval în Schiță și instrumentul Elipse în Figma vor genera toate elementul <ellipse /> , cu excepția cazului în care razele sunt egale: în astfel de cazuri vom ajunge cu un element <circle /> .

Dreptunghiuri și dreptunghiuri rotunjite

O altă formă de bază comună tuturor instrumentelor de proiectare este un dreptunghi. În cazul tuturor instrumentelor de proiectare, utilizarea unui instrument dreptunghi generează un element <rect /> în SVG. Un <rect /> de bază este definit de 4 atribute: coordonatele sale x și y , împreună cu lățimea și înălțimea sa:

 <rect x="150" y="100" width="500" height="400"/>

Observați că, în timp ce poziția <ellipse /> și <circle /> este definită de centrele lor geometrice, poziția unui <rect /> este definită de coordonatele colțului său din stânga sus.

În afară de dreptunghiuri de bază, folosim adesea dreptunghiuri cu colțuri rotunjite. În toate cele trei instrumente de proiectare, puteți transforma un dreptunghi într-un dreptunghi rotunjit, aplicând o rază de margine în panoul Inspector sau Proprietăți .

În plus, în Sketch și Illustrator, există instrumente dedicate creării de dreptunghiuri rotunjite ( Instrumentul dreptunghi rotunjite în Illustrator și instrumentul rotunjite în Schiță). Cu toate acestea, nu există nicio diferență între un dreptunghi obișnuit cu o rază aplicată și un dreptunghi rotunjit desenat cu un instrument Dreptunghi rotunjit .

Prin urmare, indiferent de cât de creat, un dreptunghi rotunjit va fi exportat folosind următoarea sintaxă:

 <rect x="150" y="100" width="500" height="400" rx="30"/>

În acest caz, rx este un atribut responsabil pentru raza colțurilor rotunjite:

Dreptunghiuri rotunjite cu colțuri eliptice

O diferență semnificativă între instrumentele de proiectare și SVG este modul în care sunt definite razele. În toate instrumentele de proiectare pe care le luăm în considerare, raza graniței este definită de o singură variabilă. Ne putem gândi la razele de frontieră ca niște cercuri mici folosite pentru a masca colțurile dreptunghiurilor noastre:

Între timp, în SVG razele de frontieră pot fi definite prin două atribute: rx (ca în exemplul de mai sus) și ry . Ele ne permit să creăm dreptunghiuri cu colțuri eliptice. Vă puteți gândi la astfel de colțuri rotunjite ca niște elipse folosite ca măști în loc de cercuri:

 <rect x="150" y="100" width="500" height="400" rx="40" ry="30"/>

Deci, în acest caz, SVG vă oferă mai multe posibilități decât instrumente de proiectare.

Notă : Chiar dacă nu are legătură exactă cu subiectul acestui articol, merită remarcat faptul că diferența descrisă mai sus se aplică atât pentru SVG, cât și pentru HTML/CSS. Proprietatea CSS border-radius care este utilizată pentru stilarea nodurilor, cum ar fi div-uri și spans, permite, de asemenea, crearea colțurilor eliptice. Puteți vedea un exemplu mai jos.

 border-radius: 10px 5% / 20px 25em 30px 35em;

Valorile înainte de bară oblică ( / ) sunt raze orizontale (echivalentul lui rx ), iar valorile de după bară oblică sunt valori verticale (echivalentul lui ry ).

Dreptunghiuri rotunjite cu mai multe raze

În instrumentele de proiectare, la fel ca și în CSS, fiecare dintre colțurile unui dreptunghi poate fi controlat separat. Cu alte cuvinte, fiecare colț poate avea propria sa rază (sau nicio rază în totalitate). O astfel de operație nu este posibilă pe un element <rect /> din SVG. Fiecare element <rect /> are un singur atribut rx și un atribut ry . Dacă creați un dreptunghi cu mai multe raze aplicate la colțurile sale, instrumentul de proiectare va genera un element <path /> în loc de un element <rect /> . Vom vorbi mai mult despre un element <path /> în secțiunea următoare.

Colțuri netede

Una dintre caracteristicile interesante introduse de Sketch și Figma nu cu mult timp în urmă este colțurile netede. Pe scurt, colțurile netede folosesc o rază neregulată a marginii pentru a obține un rezultat care arată mai natural și, bine, neted. Cea mai comună aplicație a colțurilor netede sunt pictogramele aplicațiilor și alte elemente rotunjite pe iOS. Apple a folosit colțuri rotunjite „obișnuite” pe platforma sa mobilă până la iOS6 și apoi a trecut la ceea ce numim astăzi colțuri „netede” ca parte a reproiectării mari introduse în 2013 (iOS7).

În Schiță, puteți obține efectul de colțuri netede comutând între Colțuri rotunjite și Colțuri netede în Inspector . Figma vă oferă și mai mult control asupra colțurilor dvs., deoarece puteți manipula cu nivelul de netezime din meniul Corner Smoothing .

Din păcate, niciuna dintre acestea nu poate fi tradus cu ușurință în SVG, deoarece SVG nu cunoaște deloc conceptul de colțuri netede. Există, de asemenea, o diferență importantă între ceea ce fac Sketch și Figma dacă încercați să exportați un dreptunghi cu colțuri netede în SVG.

Figma ignoră colțurile netede și exportă un dreptunghi ca element <rect /> obișnuit cu colțuri rotunjite. Sketch, pe de altă parte, exportă un dreptunghi cu colțuri netede ca <path /> care încearcă să reproducă adevărata formă a colțurilor netede. Așadar, Figma ne oferă o precizie mai slabă de dragul de a păstra un dreptunghi drept dreptunghi, în timp ce Sketch vizează acuratețe maximă posibilă cu prețul semanticii și al unei dimensiuni mai mari a fișierului. Dacă doriți să înțelegeți mai bine ce înseamnă această diferență, vom aprofunda mai târziu avantajele și dezavantajele păstrării formelor de bază.

Linii

Următorul tip de element de bază este o linie. În acest caz, ne referim la o linie ca la o singură linie dreaptă care merge de la punctul A la punctul B. Illustrator, Sketch și Figma oferă toate propriile instrumente de linie dedicate desenării liniilor. În SVG, avem un element <line /> . Sunt necesare patru dintre atributele sale: coordonatele punctului său de pornire și coordonatele punctului său final:

 <line x1="100" y1="100" x2="200" y2="200"/>

Când vine vorba de export, Illustrator și Figma vor exporta linii ca elemente <line /> acolo unde este posibil, în timp ce Sketch va calcula întotdeauna liniile în elemente <path /> .

Polilinii

Acum să aruncăm o privire la polilinii. Polilinia este o serie conectată de linii drepte. Polylines nu au instrumente dedicate în instrumentele de proiectare. Ele pot fi desenate cu un instrument Pen (în Illustrator și Figma) sau cu un instrument Vector (în Sketch).

În SVG, poliliniile sunt definite cu un element <polyline /> . <polyline /> este desenat folosind un atribut de points care este o listă de coordonate care definesc toate punctele care creează o polilinie. Să aruncăm o privire la un exemplu de polilinie format din trei segmente și patru puncte:

 <polyline points="10,20 10,20 30,10 40,20" />

Illustrator și Sketch traduc poliliniile în elemente <polyline/> , în timp ce Figma exportă poliliniile ca <path /> s.

Săgeți

În toate cele trei instrumente, puteți controla capetele liniilor pentru a le transforma în săgeți și altele. Și toate cele trei instrumente vor exporta linii precum <path /> s, chiar dacă fără căptușele aplicate aceleași forme ar fi translate în <line /> s sau <polyline /> s. Este pentru că SVG nu acceptă săgeți? Nu chiar.

De fapt, specificația SVG include capete de linie personalizabile care sunt cunoscute sub numele de markeri. Cu toate acestea, niciunul dintre instrumentele de proiectare pe care le-am menționat nu utilizează marcatori în SVG-ul pe care îl generează.

<marker> este un element SVG separat care poate fi definit în <defs> SVG și apoi utilizat pe elementele <line> , <polyline> și <path> cu atribute marker: marker , marker-start , marker-mid și marker-end . Dacă doriți să aflați mai multe despre aceste atribute, vă recomand să consultați documentația oficială W3C.

Poligoane și stele

Ultima formă de bază pe care o vom arunca o privire este un poligon. Poligonul este o formă închisă formată din linii drepte, de exemplu stea sau un hexagon. De asemenea, vă puteți gândi la ea ca la o polilinie închisă. Sintaxa unui element <polygon /> în SVG este de fapt aceeași ca a unui <polyline /> . Singura diferență dintre cele două este că în <polygon /> ultimul punct din listă este întotdeauna conectat cu primul punct pentru a face dintr-un <polygon /> o formă închisă.

Unele poligoane sunt poligoane regulate. Ceea ce este special la poligoane regulate este că toate laturile și unghiurile lor sunt egale. Pentru a desena poligoane obișnuite, cum ar fi un hexagon sau un pentagon, puteți utiliza instrumentul Poligon , același în Illustrator, Sketch și Figma. Instrumentele Polygon din Illustrator și Sketch vor genera elemente <polygon /> în SVG. În Figma, pe de altă parte, toate formele realizate cu un instrument Polygon au ca rezultat elemente <path /> .

Toate cele trei instrumente de design au, de asemenea, instrumente Star dedicate pentru a desena stelele. Cu toate acestea, când vine vorba de export, formele create cu instrumentele Star se comportă exact la fel ca cele create cu instrumentele Polygon . În SVG, stelele sunt doar poligoane, nu există nici un element ~~<star />~~ .

Este important să rețineți că instrumentele Steaua și Poligonul sunt folosite pentru a crea stele și poligoane obișnuite, în timp ce elementul <polygon /> din SVG poate fi folosit pentru orice poligon, regulat sau neregulat.

Toate drumurile duc la <path />

După cum am aflat deja, în SVG, există trei forme de bază dedicate desenului de forme realizate din linii drepte: <line /> , <polyline /> și <polygon /> . Dar dacă am dori ca liniile noastre să fie curbate? Este timpul să vorbim despre elementul <path /> .

Elementul <path />

<path /> este cel mai versatil element SVG. Poate fi folosit pentru a desena orice linie și formă posibilă, inclusiv, dar fără a se limita la, toate formele de bază enumerate mai sus. De fapt, fiecare formă de bază ( <circle/> , <ellipse /> , <rect /> , <line /> , <polyline /> , <polygon /> ) poate fi descrisă ca un element <path /> . În plus, există multe forme care pot fi create cu <path /> , dar nu sunt posibile cu niciun alt element SVG. Pentru a afla mai multe despre <path /> și sintaxa acesteia, v-aș recomanda să consultați acest articol excelent al lui Chris Coyier.

Acum, cum creăm elemente <path /> în instrumentele de proiectare? În primul rând, după cum am învățat mai sus, unele dintre straturile create cu instrumente de formă calculează la elemente <path /> , chiar dacă teoretic ar putea fi alte elemente (de exemplu, Figma exportă toate poligoanele ca <path /> , chiar dacă ar fi putut fi definit ca <polygon /> s. Apoi, orice altă formă neregulată pe care o desenăm cu un instrument Pen sau un instrument Vector trebuie să fie exportată ca <path /> , deoarece nu există niciun alt element SVG care să le definească. În cele din urmă, în Sketch și Figma, putem converti orice formă de bază într-un strat care calculează la un <path /> . În Sketch, putem realiza acest lucru alegând Strat > Combină > Aplatizare , în timp ce în Figma putem găsi această funcție în Obiect > Selectare Aplatizare ( ⌘ + E pe macOS, Ctrl + E pe Windows).

Operații booleene

Operațiile booleene sunt funcții efectuate pe forme pentru a le combina în câteva moduri diferite. În Illustrator, Sketch și Figma, există 4 operații booleene standard:

• Unire (Unire)
  O sumă a formelor
• Scăderea (minus față)
  Forma de jos scăzută de zona comună dintre forme
• Se intersectează
  Zona comună dintre forme
• Diferență (Exclude)
  O sumă a formelor scăzută de aria comună dintre forme.

În Illustrator, toate aceste funcții generează o singură formă (contur). Este o acțiune care nu poate fi inversată, altfel decât folosind Undo ( ⌘ + Z pe macOS, Ctrl + Z pe Windows). În Sketch și Figma, pe de altă parte, operațiunile booleene creează grupuri de straturi care pot fi degrupate ulterior, fără a fi afectat formele din interior. Cu toate acestea, puteți îmbina aceste grupuri într-o singură formă pentru a obține un rezultat similar ca în Illustrator folosind funcțiile Aplatizare menționate în paragraful anterior.

Întrebarea este, SVG acceptă operațiuni booleene? Nu, nu este. Ei doar fuzionează. Prin urmare, fiecare formă combinată pe care o creați cu operații booleene în Figma sau Sketch va fi exportată ca un singur element <path /> .

Arată la fel, deci de ce contează?

În ceea ce privește modul în care diferitele forme pot fi definite în SVG, sintaxa sa este extrem de versatilă. Să luăm în considerare un dreptunghi de bază:

O astfel de formă poate fi definită în SVG în câteva moduri diferite. Poate fi un element <rect /> , un element <polygon /> . Cu siguranță poate fi un element <path /> (deoarece totul poate fi un element <path /> ). Poate fi, de asemenea, un element <line /> (sau un element <polyline /> ) dacă decidem să-l creăm folosind linii în loc de umpleri.

Fiecare dintre aceste elemente redă un dreptunghi care arată exact la fel:

Dar, dacă rezultatul final (graficul redat de un user agent într-un browser) arată la fel, chiar contează ce abordare alegem? Ei bine, da. Ca regulă generală, aș recomanda întotdeauna folosirea formelor de bază acolo unde este posibil.

Nu în ultimul rând, folosiți cele mai evidente forme pentru cazul dat. De exemplu, nu creați dreptunghiuri cu linii sau cercuri cu dreptunghiuri dacă nu aveți un motiv întemeiat. Există cel puțin câteva argumente în spatele asta:

1. Semantică/Lizibilitate
   Instrumentele de compresie, cum ar fi SVGO, vă oferă opțiunea de a calcula toate formele de bază pentru elementele de cale. Vă poate economisi câteva mușcături, dar va reduce cu siguranță lizibilitatea codului dvs. Sintaxa <path /> este extrem de neintuitivă, așa că dacă SVG-ul dvs. este vreodată pe cale să fie modificat într-un editor de cod, mai degrabă decât într-un instrument de proiectare, va fi mult mai ușor de înțeles dacă păstrați formele de bază ca forme de bază.
2. Mărime fișier
   Comprimarea formelor în căi vă poate ajuta să reduceți fișierele, dar nu este întotdeauna cazul! De exemplu, un dreptunghi rotunjit ocupă mult mai mult spațiu ca <path /> decât ca <rect /> .
3. Animații
   Ați încercat vreodată să animați SVG? Este foarte distractiv – atâta timp cât operezi pe SVG curat și semantic. Cu formele de bază, puteți manipula cu ușurință parametri precum raza, lățimea, înălțimea sau poziția punctului. Dacă vă îmbinați formele în căi, majoritatea acestor operațiuni vor fi mult mai greu de realizat sau pur și simplu imposibil.
4. Variante/Reactivitate
   Rețineți că SVG nu este o imagine statică, cum ar fi JPG. Puteți să-l stilați, să îl temați, să îl faceți receptiv și așa mai departe. La fel ca și în cazul animațiilor, păstrarea fișierului bine structurat și semantic vă va ajuta cu siguranță la oricare dintre aceste sarcini.

Ca în orice regulă, puteți găsi câteva excepții. Dar, în general, este o bună practică să vă păstrați SVG-ul cât mai lizibil, flexibil și structurat posibil.

Acum, să aruncăm o privire la alte atribute și caracteristici, cum ar fi viewBox, grupuri, transformări și efecte vizuale.

width , height și viewBox

Dacă aveți deja ceva experiență cu SVG, probabil ați observat că eticheta de deschidere <svg> are adesea următoarele atribute: width , height și viewBox . În instrumentele de proiectare, avem dimensiunile panourilor de artă (sau rame în cazul Figma). Deci, cum exact aceste valori sunt legate între ele?

Să începem cu explicarea atributelor <svg> pe care tocmai le-am menționat. Vă puteți gândi la un viewBox ca la o pânză virtuală sub forma unui sistem de coordonate. Centrul acestui sistem de coordonate este plasat în colțul din stânga sus al zonei desemnate. Toate elementele din <svg viewBox="…"> sunt plasate în conformitate cu acest sistem de coordonate și, de asemenea, tăiate de acesta - orice depășește viewBox -ul nu va fi redat. viewBox acceptă 4 numere ca valoare:

 <svg viewBox="0 0 12 8"> … </svg>

Deoarece SVG înseamnă Scalable Vector Graphics, nu sunt necesare unități pentru aceste numere. Imaginați-vă doar ca un sistem de coordonate abstract care poate fi scalat în sus și în jos la orice dimensiune. Nu vă faceți griji prea mult pentru primele două numere, cel mai probabil nu veți avea nevoie de ele. Ultimele două sunt cele care contează de obicei. Acestea sunt dimensiunile reale ale pânzei noastre SVG.

viewBox nu determină dimensiunea SVG-ului. Specifică doar coordonatele zonei în care este desenat SVG-ul nostru. Prin urmare, atunci când este utilizat pe web, <svg> cu un viewBox specificat va ocupa întotdeauna tot spațiul disponibil și va păstra raportul setat de viewBox - cu excepția cazului în care împiedicăm acest lucru cu CSS sau setăm atributele width și/sau height .

width și height sunt atributele <svg> care stabilesc lățimea și înălțimea reală a elementului SVG. Spre deosebire de viewBox , ar trebui să utilizeze unități specificate, cum ar fi pixeli, ems sau rems. Aceasta înseamnă că putem transforma și SVG-ul cu ele — dacă raportul dintre width și height este diferit de raportul dintre valorile viewBox -ului, SVG va denatura graficul specificat în viewBox în funcție de valorile de width și height :

Acum, ce se întâmplă când exportăm SVG din instrumentele de proiectare? În Sketch și Figma, toate elementele (indiferent dacă sunt straturi unice, grupuri sau planșe de desen) vor primi întotdeauna o viewBox de vizualizare egală cu dimensiunile elementului exportat și width și height setate în pixeli, egale cu ultimele două valori ale viewBox . În Illustrator, toate elementele au un viewBox , specificat în același mod ca în Sketch și Figma, dar nu sunt aplicate width și height .

Grupuri

Grupurile sunt mijlocul de bază de organizare a straturilor în instrumentele de proiectare. În afară de stabilirea ierarhiei, grupurile sunt folosite pentru a aplica operațiuni în bloc, cum ar fi transformările, la mai multe elemente. Nu există nicio diferență semnificativă în modul în care funcționează grupurile în Illustrator, Sketch și Figma și, din fericire, funcționalitatea de bază a grupurilor SVG ( <g>…</g> ) este aproape aceeași.

Se transformă

În SVG, există cinci transformări de bază pe care le putem aplica unui element:

1. translate : mută elementul de-a lungul axei verticale și/sau orizontale;
2. scale : scala elementul de-a lungul axei verticale și/sau orizontale:
3. rotate : creează o rotație bidimensională cu un unghi dat specificat în grade în jurul unui punct dat;
4. skew ( skewX sau skewY ): obligă elementul cu un unghi dat specificat în grade de-a lungul axei verticale sau orizontale;
5. matrix : cea mai complexă și versatilă dintre funcțiile de transformare disponibile. Deoarece ar necesita destul de multă discuție de algebră pentru a explica cum funcționează transformările matriceale, aceasta depășește cu mult scopul acestui articol. Să recunoaștem doar că matrix vă permite să efectuați multe transformări complicate, cum ar fi întinderea, strângerea, forfecarea și așa mai departe.

Notă : Observați că, deși unele dintre transformările SVG arată foarte asemănătoare cu transformările CSS, ele nu sunt la fel. De exemplu, CSS oferă atât funcții de rotație 2D, cât și 3D, în timp ce SVG are o singură funcție de rotație 2D. De asemenea, în timp ce CSS acceptă diverse unități de unghi, cum ar fi grade sau radiani, rotațiile SVG sunt întotdeauna setate în grade, prin urmare o unitate poate fi omisă (de exemplu , rotate(45) , NU ~~rotate(45deg)~~ ).

Toate aceste transformări pot fi aplicate oricărui element SVG, cum ar fi forme sau grupuri, și sunt nedistructive, adică nu afectează geometria originală a elementului. Aplicăm transformări printr-un atribut de transform :

 <g transform="scale(3) rotate(90) translate(50,100)"> … </g>

Să aruncăm o privire la instrumentele de proiectare acum! Deci, majoritatea transformărilor pe care le aplicăm în instrumentele de proiectare interacționează direct cu geometria obiectelor și poziția acestora pe pânză. Ele nu sunt independente de forme și nu vor fi exportate ca funcții de transformare SVG.

Rotațiile sunt aici excepția, valorile lor fiind stocate în Inspector separat de geometria elementului și se exportă ca funcție transform="rotate(…)" .

Interesant este că aceeași regulă se aplică înversărilor (reflecțiilor) în Sketch și Figma (nu în Illustrator!). Fiecare dintre ele are însă propria sa abordare. Sketch folosește o combinație de scalare negativă și traducere pentru a obține un efect de răsturnare, în timp ce Figma efectuează o răsturnare într-o singură funcție de matrice.

Raza de frontieră

Am vorbit deja despre dreptunghiuri rotunjite, dar ce zici de rotunjirea altor forme? De fapt, în toate instrumentele de design pe care le discutăm, puteți rotunji colțurile oricărei forme, nu doar un dreptunghi.

Dar ce zici de SVG? Elementele <polygon /> și <path /> au și atribute rx și ry ? Din pacate, nu. Orice formă, alta decât un dreptunghi, odată ce rotunjiți oricare dintre colțurile sale, va fi întotdeauna exportată ca element <path /> tratând colțurile rotunjite ca parte integrantă a geometriei formei.

Umpleri și lovituri

Illustrator, Sketch și Figma acceptă umplerile și liniile drept proprietăți de bază ale oricăror forme și așa se întâmplă în SVG. Prin urmare, umplerile specificate în instrumentele de proiectare sunt exportate într-un atribut de fill , iar stokes sunt exportate într-un atribut de stroke . Nu credeți că este chiar atât de simplu. Diavolul sta in detalii.

Umplere de culoare

Umplerea cu culoare este cea mai elementară dintre umplerile disponibile și este specificată cu o singură culoare simplă (de exemplu #3fd8e2 ). În SVG, această valoare este pusă direct în atributul de fill (de ex. fill="#3fd8e2" ).

Instrumentele de proiectare exportă umpluturi de culoare cu valori hexadecimale (de exemplu #0000ff ), deși, în SVG, puteți utiliza și toate celelalte scheme de denumire cunoscute de CSS, cum ar fi numele de culori (de exemplu, blue ), valorile RGB (de exemplu, rgb(0,0,255) ) sau chiar valori HSL (ex hsl(240,100%,50%) ).

Opacitate de umplere

Când vine vorba de opacitatea de umplere, SVG acceptă culori semi-transparente (de exemplu, valori RGBA), deși oferă și un atribut fill-opacity . Din cauza problemelor de compatibilitate, utilizarea fill-opacity este o abordare recomandată și este, de asemenea, cea folosită de Figma și Sketch. (Nu menționez Illustrator aici, deoarece Illustrator nu vă permite să controlați opacitatea umplerii.) Deci, dacă doriți să creați un pătrat SVG umplut cu culoare roșie semitransparentă, puteți face următoarele:

 <rect width="100" height="100" fill="rgba(255,0,0,0.5)" />

dar o abordare mai recomandată (folosită de Sketch și Figma) ar fi:

 <rect width="100" height="100" fill="#ff0000" fill-opacity="0.5" />

Umplere cu gradient

Dacă sunteți familiarizat cu CSS, poate știți că atunci când vine vorba de fundaluri, comutarea între fundaluri color și gradient este relativ simplă. Aceeași proprietate background-color (sau background ) poate fi utilizată în ambele cazuri. Deoarece gradienții din SVG sunt mult mai vechi decât gradienții CSS, sintaxa lor este, de asemenea, destul de diferită.

Pentru a utiliza un gradient este SVG, mai întâi trebuie să îl definiți în etichetele <defs>…</defs> și apoi să faceți referire la el într-un atribut de fill , de exemplu:

 <defs> <linearGradient> <stop stop-color="red" offset="0%"></stop> <stop stop-color="blue" offset="100%"></stop> </linearGradient> </defs> <rect fill="url(#myGradient)" />

Deci, ceea ce se întâmplă în timpul exportului SVG atunci când utilizați o umplere cu gradient este că un gradient este adăugat la <defs> și este referit în codul de mai jos.

Un lucru important de reținut este că acel SVG acceptă numai gradienți liniari și radiali. Efecte precum gradient unghiular sau plasă de gradient nu vor fi exportate în SVG.

Umplere model/imagine

Sketch și Figma oferă, de asemenea, o umplere a imaginii în care un grafic raster este utilizat fie pentru a umple întregul element, fie ca model care se repetă.

Când vine vorba de exportul imaginilor de umplere în SVG, este de fapt destul de asemănător cu gradienții. Imaginile sunt definite în <defs> cu un element <pattern>…</pattern> și apoi referite într-un atribut de fill :

 <defs> <pattern patternUnits="objectBoundingBox"> <use xlink:href="#picture"></use> </pattern> </defs> <rect fill="url(#myPattern)" />

Pentru ca aceasta să funcționeze, imaginea #picture trebuie definită undeva . Instrumentele de proiectare le vor încorpora direct în SVG ca elemente <image/> , deși nu este o abordare recomandată când vine vorba de performanță. Dacă într-adevăr trebuie să utilizați imagini raster în SVG-ul dvs., aș sugera să eliminați eticheta de imagine din SVG și să o utilizați într-un fișier autonom:

 <defs> <pattern patternUnits="objectBoundingBox"> <use xlink:href="#picture"></use> </pattern> <image xlink:href="image.png"/> </defs> <rect fill="url(#myPattern)" />

Accident vascular cerebral

atributul stroke în SVG, la fel ca atributul de fill acceptă culori în diferite formate, de exemplu hex, RGB sau HSL. Și, în mod similar cu fill , puteți controla opacitatea stroke-opacity . De asemenea, la fel ca și în cazul fill , liniile pot folosi gradienți ca valoare. Toate aceste efecte pot fi obținute în instrumentele de proiectare și pot fi exportate cu succes în SVG.

Stroke Caps And Joins

Există, de asemenea, câteva atribute specifice accidentului vascular cerebral. În primul rând, puteți controla lățimea cursei. Instrumentele de proiectare îl acceptă și este exportat ca atribut stroke-width . De asemenea, puteți controla capete și îmbinări ale curselor. SVG vă permite să le definiți prin stroke-linecap și stroke-linejoin . Există trei capace posibile: capac butt la cap, capac round și capac square și trei îmbinări posibile: miter , îmbinare round și îmbinare bevel . Atât majusculele, cât și îmbinările pot fi controlate în Illustrator, Figma și Sketch, iar capacele și îmbinările disponibile se potrivesc cu cele disponibile în SVG.

Cursuri întrerupte și punctate

Un alt efect pe care îl putem obține cu loviturile sunt liniile întrerupte. În Illustrator și Figma, puteți seta mai multe liniuțe și intervale, în timp ce în Sketch, este posibilă doar o singură secvență de liniuță și un interval.

SVG vă permite să creați linii întrerupte cu un atribut stroke-dasharray . stroke-dasharray permite trecerea unei secvențe de mai multe liniuțe și goluri ca valoare, care se potrivește cu caracteristicile Figma și Illustrator. De asemenea, înseamnă că Sketch nu vă permite să utilizați toate posibilitățile SVG în acest caz.

Un caz de margine interesant este o linie punctată. O realizăm setând limita de linie a stroke-linecap la round și lungimea unei linii la zero, de exemplu:

 <line … stroke="black" stroke-dasharray="0 2" stroke-linecap="round"/>

Notă : în prezent, utilizatorii Figma se confruntă cu o eroare care nu le permite să creeze linii punctate. De exemplu, utilizarea 0, 10 sau 10, 0 ca liniuțe este interpretată în același mod ca 10, 10 și oferă o linie punctată obișnuită, mai degrabă decât o linie punctată. Din fericire, există o modalitate de a ocoli. În loc să utilizați zero, utilizați o valoare foarte mică, de exemplu 0.0001, 10 - aceasta ar trebui să rezulte într-o linie punctată perfect, așa cum era de așteptat.

Alinierea cursei

Există o altă diferență, mult mai semnificativă, între instrumentele de proiectare și SVG: alinierea cursei. Illustrator, Sketch și Figma vă permit toate să controlați alinierea cursei și să o setați în interior, în exterior sau în centru. Dar ghicește ce? SVG 1.1 nu acceptă alinierea cursei. În SVG, toate liniile sunt aliniate la centru. Fără lovituri în interior sau în exterior. Acesta este motivul pentru care se întâmplă lucruri foarte ciudate atunci când exportați liniile aliniate în exterior și în interior în SVG.

Illustrator, într-un astfel de caz, exportă forma și contura ei ca două forme separate. Deci, dacă aplicați o contur în interior sau o contur exterioară unui dreptunghi în Illustrator, în SVG va avea ca rezultat un dreptunghi și un element separat <path /> reprezentând conturul dreptunghiului, de exemplu:

 <rect x="10" y="10" width="120" height="120"/> <path d="M120,20V120H20V20H120M140,0H0V140H140V0Z"/>

Acest comportament are niște repercusiuni foarte importante. De exemplu, nu mai puteți modifica lățimea cursei sau să o faceți întreruptă. De asemenea, nu se va scala în același mod ca și loviturile „adevărate”. Mai mult decât atât, Illustrator modifică dimensiunile formei originale, de exemplu, un pătrat de 100×100 cu un contur interior îndrăzneț de 20 de unități va exporta de fapt ca un pătrat de 120×120 pentru a evita problemele de randare. În cele din urmă, nu este doar un accident vascular cerebral. Este doar o altă formă cu umplutură.

Figma și Sketch au o abordare diferită, totuși. Exportă cu fidelitate toate liniile ca linii, dar recalculează dimensiunile formei. Deci, dacă aveți un cerc cu o rază egală cu 5 și o cursă interioară egală cu 2, ceea ce veți găsi în SVG-ul dvs. va fi un cerc cu o rază egală cu 4 (și o cursă tot egală cu 2).

Această abordare permite Figma și Sketch să evite majoritatea problemelor menționate în cazul Illustrator. Cu toate acestea, cu unele forme mai complicate, această tehnică se poate dovedi a nu fi precisă, iar rezultatul final să fie puțin diferit de cel așteptat. De aceea abordarea lui Sketch și Figma nu este neapărat mai bună - este cu siguranță mai semantică, mai performantă și mai flexibilă, dar soluția Illustrator este mai precisă.

Notă: aceeași problemă cu alinierea cursei se aplică și pentru CSS. Proprietatea border CSS nu acceptă nici alinierea în interior sau în exterior. Cu toate acestea, dacă doriți, puteți pirata acest comportament cu proprietăți de outline și box-shadow .

Umpleri și lovituri multiple

În instrumentele de proiectare, puteți adăuga mai multe umpleri și linii pe strat. Acest lucru are foarte mult sens odată combinat cu atribute precum opacitatea și modurile de amestecare. Din păcate, SVG nu acceptă o astfel de caracteristică. Dacă exportați un strat care are umpleri și/sau linii, acesta va fi înmulțit și fiecare dintre liniile și umplerile se va aplica propriului strat.

Umbre, filtre și alte efecte

Să vorbim acum despre câteva efecte mai puțin populare. SVG este un limbaj foarte puternic, de fapt mult mai puternic decât modul în care este folosit de obicei pe web. Una dintre cele mai interesante caracteristici ale SVG este o gamă largă de efecte vizuale avansate, cunoscute sub numele de filtre SVG.

Domeniul complet al posibilităților filtrului SVG este mult prea larg pentru a fi descris în acest articol. Dacă doriți să aflați mai multe despre ei, vă recomand cu căldură să consultați câteva discuții și articole pe acest subiect de Sarah Soueidan.

Filters, same as patterns or gradients, need to be defined to apply them later to a layer. Every filter is defined as a <filter>…</filter> element that can contain numerous effects, known as filter primitives , each standing for a separate visual effect.

Filter primitives can be combined together to create filters. For example, this is what a basic blur effect applied to a rectangle looks like:

 <defs> <filter> <feGaussianBlur stdDeviation="10"/> </filter> </defs> <rect filter="url(#GaussianBlur)" width="200" height="300"/>

…but you can also create a more complex filter that consists of more than one filter primitive:

 <defs> <filter> <feGaussianBlur stdDeviation="10"/> <feMorphology operator="dilate" in="SourceGraphic" radius="3" /> </filter> </defs> <rect filter="url(#GaussianBlur)" width="200" height="300"/>

Out of the three design tools we discuss, only Illustrator lets you play with SVG filters. You can find them in the app's menu, under Effect > SVG Filters . Sketch and Figma are a completely different story. Any effects these applications offer are mostly focused on CSS and native implementations, eg Background Blur effect was implemented primarily for designing iOS apps and Drop/Inner Shadow effects parameters are matching CSS properties ( box-shadow and text-shadow ).

It doesn't mean we can't export these effects to SVG. Putem. However, translating these effects to SVG is utterly not as straightforward as to CSS. Let's consider a square with a drop shadow applied.

This is how our square could look like, once exported to HTML/CSS:

 <style> .square { width: 100px; height: 100px; background: red; box-shadow: 10px 10px 24px 0 rgba(0,0,0,0.5); } </style> <div class="square"></div>

A similar square exported from Sketch to SVG gives us a significantly more complex piece of code:

 <defs> <rect x="14" y="14" width="100" height="100"></rect> <filter x="-31.0%" y="-31.0%" width="182.0%" height="182.0%" filterUnits="objectBoundingBox"> <feOffset dx="10" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> <feGaussianBlur stdDeviation="12" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix> </filter> </defs> <g> <use fill="black" filter="url(#filter-2)" xlink:href="#square"></use> <use fill="#FF0000" fill-rule="evenodd" xlink:href="#square"></use> </g>

What happens here is that Sketch duplicates the square, so we have two identical squares, one above another, and turns the duplicate into a shadow.

To accomplish this, it applies a filter to a duplicated square that consists of three different filter primitives:

• one to offset the square;
• one to set its color to semi-transparent black;
• one to blur it.

In other design tools, we would encounter a similar situation.

It doesn't mean that we should never, by all means, use shadows in SVG. It's handy to keep in mind though that as long as SVG gives you a very powerful toolkit to modify your graphics, some seemingly simple effects are not that simple to achieve at all.

Moduri de amestecare

Modurile de amestecare (cum ar fi Întunecare , Înmulțire sau Suprapunere ) permit îmbinarea a două sau mai multe elemente prin combinarea valorilor acestora în moduri diferite. Bine cunoscute designerilor grafici (și aplicațiilor precum Adobe Photoshop), modurile de amestecare funcționează și în Sketch, Figma și Illustrator.

În SVG, modurile de amestecare există ca unul dintre filtre. Au propria lor primitivă de filtru <feBlend /> . Cu toate acestea, deoarece sintaxa lui <feBlend /> este destul de complicată, Sketch, Figma și Illustrator folosesc în schimb CSS:

 .rectangle { mix-blend-mode: overlay; }

Având în vedere că suportul pentru browser mix-blend-mode este destul de bun în zilele noastre, nu ar trebui să fie o problemă mare. Cu toate acestea, dacă este important pentru dvs. să asigurați compatibilitatea cu browser-ul antiglonț care include Microsoft Edge și IE, va trebui să înlocuiți manual modurile de amestec CSS cu filtre SVG.

La fel ca și în cazul umplerilor și liniilor multiple, SVG nu acceptă moduri de amestecare aplicate direct asupra atributelor de umplere și contur (mai degrabă decât pe straturi întregi). Dacă încercați să exportați umplerea și liniile cu propriile moduri de amestecare dintr-un instrument de proiectare în SVG, stratul va fi multiplicat, iar modurile de amestecare vor fi aplicate la copiile respective ale stratului.

Simboluri și componente

În unele dintre exemplele de cod de mai sus, este posibil să fi observat un element despre care nu am discutat încă: un element <use>…</use> . <use> ne permite să definim și să reutilizam elemente în SVG, puțin similar cu Simbolurile din Illustrator și Schița sau Componentele din Figma. Vă amintiți că definiți modele, gradienți și filtre în etichetele <defs>…</defs> , astfel încât acestea să poată fi folosite în altă parte a codului dvs. SVG? De fapt, orice element SVG poate fi definit și reutilizat în acest fel. Odată ce ați definit o formă sau un grup, vă puteți referi la el în restul documentului de câte ori doriți, de exemplu:

 <defs> <circle cx="100" cy="100" r="20"/> </defs> <use fill="red" xlink:href="#circle"> </use> <use fill="green" xlink:href="#circle"> </use> <use fill="blue" xlink:href="#circle"> </use> …

De asemenea, puteți reutiliza structuri mult mai complexe folosind o etichetă <symbol>…</symbol> . Simbolul acționează ca un corp separat în SVG-ul nostru și poate avea propriul atribut viewBox (consultați Lățime, înălțime și viewBox pentru referință).

Înseamnă că simbolurile și componentele instrumentelor noastre de design vor fi exportate în simboluri SVG? În Illustrator - da, da. În Sketch și Figma — nu, nu. De ce? În primul rând, pentru că simbolurile Illustrator sunt destul de simple și pot fi traduse cu ușurință în SVG, în timp ce simbolurile Sketch și componentele Figma nu sunt deloc atât de simple, iar exportul unora dintre caracteristicile sale (cum ar fi suprascrierile imbricate) ar fi foarte dificil sau chiar imposibil.

Text

Nu ar fi un ghid cuprinzător dacă nu menționăm tipografie. Toate instrumentele de proiectare oferă o mare varietate de instrumente legate de text. SVG, chiar dacă este folosit de obicei pentru grafică, acceptă și elemente de text.

Illustrator, Sketch și Figma acceptă exportul de text în SVG și calculează straturi de text în elemente <text>…</text> în SVG. Elementele de text SVG sunt redate ca orice alte elemente grafice, forme etc., singura diferență este că sunt text.

La fel ca și în CSS, putem controla toți parametrii de bază ai textului, cum ar fi greutatea, înălțimea liniei sau alinierea. De fapt, dacă știi cum să stilezi textul în CSS, știi deja cum să o faci în SVG. Cu toate acestea, s-ar putea să pară un pic de școală veche. În primul rând, toți parametrii trebuie setați în atribute inline, similar standardelor de aur ale HTML 3.2. În al doilea rând, nu există stenografie. De exemplu, nu veți găsi nimic care să semene cu o proprietate CSS de font . Acest lucru se datorează faptului că atributele textului SVG se bazează de fapt pe specificațiile CSS 2, care ne duce înapoi în anii 90 și sunt mult mai vechi decât CSS pe care îl cunoaștem astăzi.

Cu toate acestea, toate aceste atribute sunt exportate din instrumentele de proiectare perfect de fiecare dată când dorim ca un strat de text să devină cod SVG.

Fonturi personalizate

Din păcate, lucrurile devin puțin complicate când vine vorba de fonturi personalizate. Pe vremuri, când era creat standardul SVG 1, fonturile personalizate nu erau un lucru obișnuit pe web. Toată lumea a folosit fonturi standard, cum ar fi Tahoma, Verdana sau Courier. A deveni elegant și a folosi fonturi pe care oamenii nu le aveau implicit pe mașinile lor, însemna de obicei să le rasterizezi fără milă și să le folosești ca imagini. Cu toate acestea, SVG a implementat propriul format de fonturi, numit fonturi SVG. Astăzi, la 18 ani de la publicarea SVG 1.0, fonturile SVG nu mai sunt acceptate în majoritatea browserelor majore.

Din fericire pentru noi, SVG se joacă foarte bine cu CSS, ceea ce înseamnă că putem folosi fonturi web în loc de fonturi SVG, de exemplu:

 <style> @import url("https://fonts.googleapis.com/css?family=Roboto"); </style> <text x="20" y="50" font-family="Roboto">Text</text>

Permiteți-mi să nu intru în detalii despre implementarea fonturilor web aici, în afară de o notă crucială: nu uitați de asta. Cu alte cuvinte, dacă utilizați fonturi personalizate în SVG, trebuie să vă amintiți despre furnizarea acestor fonturi clientului, la fel ca în HTML/CSS.

Conturarea fonturilor

Se poate susține că mult mai ușor decât să ne luptăm cu fonturile și toate acestea, ar fi să conturați toate straturile de text și să nu vă faceți griji pentru ele niciodată. Cu toate acestea, există cel puțin câteva motive bune pentru a nu schimba textul în forme:

1. Nu puteți edita textul conturat — înainte și nici după export.
   Lucrând cu text subliniat, trebuie să vă amintiți despre păstrarea unei copii editabile în fișierul Illustrator, Sketch sau Figma în orice moment. În caz contrar, nu veți putea edita straturile de text, odată ce acestea sunt conturate. Acest lucru adaugă o complexitate inutilă procesului. Ca să nu mai vorbim de editarea textului conturat după exportul SVG-ului. Textul în SVG poate fi actualizat în orice moment. Textul conturat necesită deschiderea fișierului sursă de fiecare dată când doriți să faceți cea mai mică modificare de copiere.
2. Textul subliniat nu este accesibil .
   Textul în format SVG, la fel ca și alte elemente de text de pe web, poate fi citit de cititoarele de ecran și de alte tehnologii accesibile. Prin conturarea straturilor de text, împiedicați utilizatorii să folosească astfel de tehnologii să vă acceseze conținutul.
3. Oamenii se așteaptă ca textul să fie text .
   Majoritatea oamenilor care folosesc web nu știu absolut nimic despre SVG, HTML sau instrumente de design. Dacă văd text, se așteaptă să fie doar așa. Ei poate dori să îl selecteze, să îl copieze sau să îl introducă într-un motor de căutare. Toate acestea sunt posibile cu text în SVG – cu excepția cazului în care îl subliniați.
4. Nu uita de SEO .
   Textul în SVG este, de asemenea, accesibil și utilizat de motoarele de căutare. Prin conturarea textului, vă faceți conținutul mai puțin accesibil și, potențial, mai puțin vizibil pentru public.

rezumat

Vă mulțumesc foarte mult că ați fost alături de mine într-o călătorie prin dezavantajele lucrului cu SVG și instrumente de design. Acest articol cu ​​siguranță nu acoperă întregul spectru al subiectului, deși ar trebui să fie suficient pentru a trata cele mai frecvente cazuri de utilizare. Dacă aveți întrebări sau nelămuriri cu privire la lucrurile care nu au fost menționate aici, nu ezitați să le postați în comentarii!