Kuidas luua veebi jaoks skaleeritavat SVG-pilti

Kui töötate veebipiltidega, peate varem või hiljem looma skaleeritava SVG-pildi. See peab igal ekraanil laitmatu välja nägema, kiiresti laadima ja mitte negatiivselt mõjutama teie saidi jõudlust. Tüüpilised PNG- või JPG-failid toimivad paljudes olukordades, kuid kui teie logo näeb 4K-teleris udune välja või teie ikoonid kaotavad uues mobiilseadmes teravuse, siis saate aru, et vajate tõesti vektorgraafikat.

SVG-st (skaleeritav vektorgraafika) on saanud logode, ikoonide, illustratsioonide, infograafika ja kergete animatsioonide staarvorming.Need on XML-tekstid, mida brauser reaalajas tõlgendab ja renderdab, nii et neid saab kvaliteeti kaotamata skaleerida, CSS-i või JavaScriptiga muuta ning SEO ja ligipääsetavuse jaoks optimeerida. Vaatame selgelt ja lühidalt, kuidas see vorming töötab, kuidas neid nullist või JPG/PNG-vormingus luua, kuidas neid oma veebisaidile integreerida ja kuidas neist maksimumi võtta.

Mis on SVG-fail ja miks see on skaleeritav?

SVG on lühend sõnadest Scalable Vector Graphics, mis tähendab vektorgraafikat, mida saab skaleerida ilma selgust kaotamata.Erinevalt JPG-st või PNG-st, mis salvestavad iga piksli kohta teavet, salvestab SVG joonistusjuhised – jooned, kõverad, värvid ja positsioonid – XML-koodi kujul. Brauser loeb neid juhiseid ja "joonistab" pildi uuesti seadme nõutava eraldusvõimega.

See töömeetod tagab, et sama SVG-fail näeb mobiiltelefonis, 4K-monitoril või reklaamtahvlil võrdselt terav välja.Piksleid pole vaja venitada ega interpoleerida; muudetakse kujundeid määratlevate matemaatiliste põhimõtete suurust. Lisaks, kuna tegemist on tekstiga, saab faili avada ja redigeerida mis tahes koodiredaktoriga, automatiseerida, tihendada ja isegi JavaScripti abil manipuleerida.

SVG-d on resolutsioonist sõltumatud, lihtsa graafika jaoks väga kerged ja ühilduvad kõigi tänapäevaste brauseritega.Chrome, Firefox, Safari, Edge ja Opera on seda vormingut aastaid natiivselt toetanud. Isegi Internet Explorer 9 ja uuemad versioonid toetavad SVG-d, kuigi väga täiustatud funktsioonide puhul on teatud piirangud.

SVG-d ei ole aga imerohi igat tüüpi piltide jaoks.Keeruliste, miljonite värvide ja detailirohkete fotodega tegelemisel on hästi tihendatud JPG-fail tavaliselt tõhusam. Terve foto vektoriseerimine loob tavaliselt hiiglasliku SVG-faili, mida on keeruline optimeerida ja mis on reaalses maailmas kasutamiseks ebapraktiline.

Raster vs vektor: erinevused SVG, JPG ja PNG vahel

Selleks, et mõista, millal on asjakohane luua skaleeritav SVG-pilt, peate selgelt aru saama raster- ja vektorpiltide erinevusest.JPG, PNG ja GIF on bitikaardivormingud: need salvestavad fikseeritud värvidega pikslite ruudustikku. SVG, EPS, AI või pDF (oma vektorosas) kirjeldavad matemaatilisi vorme.

Rasterpildi puhul, kui suurust liiga palju suurendada, muutuvad pikslid nähtavaks ja ilmub tüüpiline "trepi" efekt.See kvaliteedi langus on vältimatu, kui proovite sundida resolutsiooni, mida originaalpildil pole. Seevastu SVG-d saab suurendada nii palju kui soovite, sest suurendatakse valemit, mis iga joone joonistab.

JPG sobib ideaalselt fotode jaoks, kuna see tihendab värvivariatsioone väga hästi, kaotades samal ajal kvaliteeti.PNG seevastu säilitab kvaliteedi (kadudeta tihendamine) ja toetab läbipaistvust, mistõttu sobib see ideaalselt läbipaistva taustaga graafika, ekraanipiltide või liideseelementide jaoks, mida ei pea liiga palju skaleerima.

SVG särab ikoonide, logode, illustratsioonide, diagrammide, graafikute, infograafikute ja lihtsate animatsioonide osas.Sellise sisu puhul on PNG-failid tavaliselt suuremad, näevad suurendatult halvemad välja ja neid ei saa CSS-iga nii paindlikult manipuleerida. Seetõttu on veebiökosüsteem omaks võtnud SVG kõigi tänapäevaste liideseelementide jaoks.

Skaleeritavate SVG-piltide levinud kasutusalad

Veebidisainis ja -arenduses kasutatakse SVG-d peamiselt elementide jaoks, mis peavad mis tahes seadmes säilitama maksimaalse teravuse.Pole haruldane, et üks sait kasutab kümneid või sadu SVG-sid, mis on jaotatud menüüde, sektsioonide, nuppude, päiste või illustratsioonide vahel.

Ikoonid on üks selgemaid näiteid SVG domineerimise kohta.Sotsiaalmeedia ikoonid, hamburgerimenüüd, tärnihinnangud, ostukorvi ikoonid… Kõik need saavad kasu formaadi skaleeritavusest. Saate sama ikooni kasutada mobiilimenüüs pisikeses suuruses ja hinnalehel tohutus suuruses, kaotamata detaile.

Ettevõtte logod on veel üks oluline kasutusalaLogo salvestamine SVG-failina tagab, et see näeb ideaalne välja sinu lemmikikoonil, menüüs, avalehe slaideril ja mis tahes trükitud materjalil. Lisaks saab ühte lähtefaili uuesti kasutada veebis, esitlustes, plakatitel ja visiitkaartidel ilma seda iga kord uuesti loomata.

SVG-d kasutatakse sageli ka infograafikas, andmegraafikas ja kohandatud illustratsioonides.Kuna sisu on vektorgraafikapõhine, näevad graafilised jooned puhtad välja, tekst püsib selge ning fail kohandub sujuvalt tahvelarvutite, mobiiltelefonide ja suurte ekraanidega.

Lõpuks võimaldavad SVG-d luua väga kergeid ja sujuvaid animatsioone.CSS-i, SMIL-i või JavaScripti abil saate animeerida ikooni, mis muudab värvi, kui selle kohal kursorit liigutate, lõputult pöörlevat laadurit või isegi graafikat, mis reageerib kerimisele või kasutaja interaktsioonile.

Skaleeritava SVG-pildi loomise tööriistad

SVG-failide genereerimiseks võite alustada nullist vektorgraafika redaktoris või teisendada olemasolevad pildid raster- või vektorvormingusse.Valik sõltub sellest, kas soovite täiesti uut kujundust või on teil juba JPG/PNG-vormingus logo, mida soovite vektoriseerida.

Kõige levinumad SVG-de kujundamise ja eksportimise programmid on Adobe Illustrator, Inkscape, CorelDRAW, Figma ja Sketch.Need kõik töötavad vektorite baasil ja võimaldavad teil salvestada SVG-vormingus, millel on erineva taseme kontroll suuruse, fontide ja ekspordi tüübi üle. Kui otsite rohkem valikuid, vaadake vektorpiltide loomise programmide loendit.

Adobe Illustrator on paljudes agentuurides ja stuudiotes professionaalne standard.See võimaldab teil joonistada pliiatsitööriistaga, korraldada kujundust kihtidena, kasutada täiustatud efekte, kvaliteetset tüpograafiat ja seejärel eksportida SVG-vormingusse, kohandades valikuid, nagu fontide manustamine või linkimine, sisemine või väline CSS-stiil ja ühilduvuse tase.

Inkscape on tasuta ja avatud lähtekoodiga alternatiiv, mis katab praktiliselt kõik, mida keskmine disainer vajab.Sellel on tööriistad kujundite, sõlmede, teksti, gradientide, filtrite ja ka otse SVG-vormingusse eksportimiseks, mida see tavaliselt ka teeb. koodi genereerida päris puhas.

Liidesekujunduses väga populaarsed Figma ja Sketch võimaldavad ikoone ja komponente eksportida ka SVG-vormingus.Need sobivad ideaalselt, kui sa juba töötad nendes tööriistades oma kasutajaliidese kallal, sest saad oma ikoonid otse koodi viia ilma vaheeta.

JPG- või PNG-piltide teisendamine SVG-vormingusse

Tihti ei alustata nullist, vaid logo või joonis on juba JPG-, PNG- või PDF-vormingus olemas ja vaja on skaleeritavat SVG-d.Sellistel juhtudel on kaks rada: automaatne vektoriseerimine rajatööriistaga või graafika käsitsi uuesti joonistamine pliiatsitööriistaga.

Automaatsed jälgimistööriistad teisendavad pikslid kiiresti vektorkujunditeks, kuid tulemustega on vastuolulised.Lihtsate logode puhul, ühevärviliste või väheste detailidega, toimivad need üsna hästi ja säästavad teie aega. Keerulise graafika puhul genereerivad need aga tuhandeid sõlmi ja väga suure, raskesti redigeeritava SVG-faili. Kui teil on vaja käsitsi meetodite kohta rohkem teada saada, vaadake Illustratori jälgimis- ja vektoriseerimistehnikaid.

Mõned spetsialiseeritud platvormid pakuvad käsitsi vektoriseerimise teenuseidNende teenuste abil laadite üles oma logo JPG-, PNG- või PDF-vormingus ja disainer joonistab selle Illustratoris käsitsi õigete fontidega ümber, saates puhta EPS/AI/SVG-faili, mis on trükkimiseks või veebis kasutamiseks valmis. See on kõige usaldusväärsem valik brändilogode jaoks, mis peavad välja nägema ideaalsed.

Kui teisendate faili teistest vektorvormingutest, näiteks EPS-ist või AI-st, säilitavad SVG-muundurid tavaliselt peaaegu kogu teabe.Sellisel juhul säilivad värvid, kujundid ja kihtide struktuur üsna täpselt, kui te ei kasuta konkreetse programmi äärmiselt spetsiifilisi efekte.

Kui allikaks on foto või väga keerukas rasterpilt, pakub automaatne vektoriseerimine harva kasulikku tulemust.Sellisel juhul on kõige mõistlikum jätta foto JPG- või WebP-vormingusse ja reserveerida SVG ikoonide, raamide, teksti või pealekantud graafiliste elementide jaoks.

Kuidas samm-sammult SVG-faili luua

Kui soovite oma skaleeritavat SVG-pilti nullist kujundada, on põhiline töövoog peaaegu kõigis vektorgraafika redaktorites üsna sarnane.Siin on üldine kokkuvõte, et saaksite seda rakendada Inkscape'is, Illustratoris või sarnastes tööriistades.

Esimene samm on luua mõistlike mõõtmetega lõuend või tööruum.Kuigi SVG on hiljem skaleeritav, on soovitatav töötada "inimlike suurustega" (näiteks 500 × 500 pikslit ikooni või 1200 × 600 pikslit päise jaoks), sest see muudab kujunduse mugavamaks ja aitab säilitada proportsioone.

Järgmisena tuleb joonistamise etappKasutage kontuuride, joonte ja kõverate joonistamiseks pliiatsi või Bezieri tööriista ning oma kujunduse loomiseks põhilisi kujunditööriistu (ristkülikud, ellipsid, hulknurgad). Iga kujund salvestatakse SVG XML-is tee või teekondade kogumina.

Nendele radadele rakendate täite- ja kontuurivärve, joone paksust, ümaraid nurki, gradiente või mustreid.Kõiki neid atribuute saab seejärel CSS-i tõlkida, seega on soovitatav mitte üle kasutada kummalisi efekte, mis brauserisse hästi ei tõlgita.

Kui kujundus on valmis, kohanda kujundust sisuga.Enamikus programmides on võimalus lõuend joonise piiridesse sobitada ja vältida tühje veeriseid; see aitab tagada, et SVG-l ei oleks ümber ebavajalikku tühikut.

Lõpuks eksportige või salvestage SVG-vormingusEkspordidialoogiboks sisaldab tavaliselt valikuid teede lihtsustamiseks, stiilide lisamiseks tekstisisese atribuutidena või CSS-ina, piltide või fontide manustamiseks jne. Veebikasutuseks on üldiselt soovitav võimalikult puhas ja kerge SVG ilma üleliigsete metaandmeteta.

SVG suuruse ja skaleerimise muutmine ilma kvaliteeti kaotamata

Selle vormingu suurepärane külg on see, et saate SVG suurust muuta ilma, et see piksliteks muutuks, kuid see ei tähenda, et te ei peaks selle skaleerimisele tähelepanu pöörama.Selle protsessi peamine omadus on vaatekast, mis määrab graafiku sisemise koordinaatsüsteemi.

SVG-failis endas näed midagi sellist nagu viewBox="0 0 100 100"See näitab, et kogu joonis on kavandatud 100x100 ühikulise ruudu sees. Kui seejärel HTML-is brauserile öelda, et SVG peaks olema 200 pikslit lai, siis brauser lihtsalt korrutab need ühikud sisu mahutamiseks.

SVG tõeliselt reageerivaks muutmiseks on tavaline, et elemendilt eemaldatakse laiuse ja kõrguse atribuudid. ja jäta alles ainult viewBox. Seejärel kontrollitakse CSS-is selle käitumist millegi nii lihtsaga nagu:

svg { kuva: inline-block; max-width: 100%; height: self; }

Kui teil on vaja mitme SVG-faili suurust hulgi muuta ja te ei soovi koodi muuta, on olemas veebitööriistad, mis toimivad SVG-de suuruse muutmise tööriistadena.Need utiliidid võimaldavad teil määrata uue suuruse protsentides või ühikutes, rakendada teisendust ja alla laadida uue skaleeritud versiooni ilma tarkvara installimata.

Kuidas veebilehele SVG-faili lisada

Kui skaleeritav SVG-pilt on olemas, on järgmine samm see brauserisse tuua.Selleks on mitu võimalust ja igaüks neist annab teile stiilide, ligipääsetavuse ja jõudluse üle erineva kontrolli taseme.

Kõige lihtsam ja otsesem viis on kasutada silti osutab välisele SVG-failileNäiteks: See on sama mehhanism nagu JPG puhul, ainult brauser teab, et ressurss on vektorpõhine.

Kui soovite rohkem kontrolli, saate SVG-koodi HTML-i sisse manustada sildi abil.Sellisel juhul kopeerite faili sisu ja kleebite selle oma lehe koodi. See võimaldab teil CSS-i abil värve muuta, klasse lisada, JavaScripti abil teatud osi manipuleerida ja ligipääsetavust parandada.

Teine võimalus, mida tänapäeval vähem kasutatakse, aga mis on endiselt kehtiv, on kasutada kas SVG laadimiseks manustatud välise ressursinaSellel on stiili ja ligipääsetavuse osas teatud piirangud, seega eelistavad praktikas peaaegu kõik või SVG tekstisiseselt.

Sisuhaldussüsteemid, näiteks WordPress, ei luba turvakaalutlustel vaikimisi SVG-failide üleslaadimist.Nende lubamine on lihtne, installides pluginaid nagu Safe SVG või SVG Support, mis puhastavad faili, et vältida pahatahtlike skriptide olemasolu ja võimaldada teil neid meediateegist kasutada nagu iga teist pilti.

SVG stiliseerimine ja animeerimine CSS-i ja koodi abil

Skaleeritava SVG-pildi üks võimsamaid eeliseid on see, et seda saab käsitleda nii, nagu oleks see osa lehe DOM-ist endast.See tähendab, et saame CSS-iga stiile rakendada ja CSS-i, SMIL-i või JavaScriptiga animatsioone luua ilma baasfaili puutumata.

Kui manustate SVG-i otse sisse (mitte nagu (väline), saate täitevärvi ja kontuuri otse CSS-iga muutaNäiteks: svg path { fill: red; stroke: blue; }. See võimaldab näiteks sama faili taaskasutada, et kuvada logo päises ühes värvis ja jaluses teises värvis.

Täite atribuut määrab kuju siseala värvi ja joon kontrollib kontuuri värvi ja paksust.Samuti saate muuta omadusi, nagu stroke-width, stroke-dasharray või stroke-linecap, et saavutada käsitsi joonistatud efekte või punktiirjooni.

Lihtsate animatsioonide jaoks on CSS enam kui piisav.Ikooni värvi saab muuta, kui selle kohal kursorit liigutada, seda pöörata, pulseerida või kerida, kasutades standardseid teisendusi ja üleminekuid.

Kui vajate midagi keerukamat, sisaldab SVG standard ise selliseid elemente nagu mis võimaldavad atribuute animeerida aegNäiteks ringi liigutamine küljelt küljele, muutes selle asukohta cx viie sekundi jooksul tsüklina, ilma et oleks vaja väliseid skripte.

Keerukate ja interaktiivsete animatsioonide jaoks võimaldab JavaScript (või spetsiifilised teegid) ühendada SVG-d kasutajasündmustega.Diagrammi osi saab klõpsates liigutada, animatsioone kerimisega sünkroonida või lehe andmete põhjal välimust muuta, avades ukse väga rikkalikele andmete visualiseeringutele.

SVG-spraidid ja jõudluse optimeerimine

Kui veebisait kasutab kümneid või sadu ikoone, siis iga SVG eraldi laadimine hõlmab palju HTTP-päringuid.Selle arvu vähendamiseks ja laadimise kiirendamiseks on väga kasulik kasutada SVG-spraite või sarnaseid rühmitamisstrateegiaid.

SVG-sprait on põhimõtteliselt suur fail, mis sisaldab palju elementide sees defineeritud ikoone.Seejärel kasutate HTML-i igas osas, kus soovite ikooni kuvada, Sel viisil laadib brauser спрайdi ainult üks kord alla ja taaskasutab ikoone sisemiselt.

See meetod vähendab märkimisväärselt serverile saadetavate päringute arvu.See vähendab latentsust ja parandab kasutajakogemust, eriti mobiilsideühenduste korral. Lisaks säilitab see võimaluse värve ja suurusi CSS-i abil muuta.

Lisaks спрайtidele on olemas ka spetsiifilised tööriistad SVG tihendamiseks ja optimeerimiseks.Utiliidid nagu SVGO või selle veebiversioon SVGOMG analüüsivad koodi, eemaldavad metaandmed, tühikud, ebavajalikud atribuudid, teekondades olevad üleliigsed punktid ja kõik, mis visuaalset tulemust ei mõjuta.

Paljudel vektoriredaktoritel on ka sisseehitatud teekonna lihtsustamise funktsioonid.Sõlmede arvu vähendamine keerukates kõverates mitte ainult ei vähenda faili suurust, vaid hõlbustab ka hilisemat redigeerimist ja hoiab ära brauseri vajaduse arvutada liiga keerulisi teid.

Lehtedel, kus lehe allosas on palju graafikat, on hea mõte kombineerida SVG-d laisa laadimise tehnikatega.Kuigi SVG-d on tavaliselt kerged, pole mõtet laadida kõiki ikoone ja graafikat korraga, mida kasutaja ei näe enne, kui ta on mitu sada pikslit kerides nähtavale jõudnud.

Ühilduvus, SEO ja ligipääsetavus SVG-s

Ühilduvuse osas on praegune olukord väga mugav: kõik tänapäevased brauserid toetavad laialdaselt SVG-d.Chrome, Firefox, Safari, Edge ja Opera kuvavad SVG-graafikat sujuvalt nii lauaarvutis kui ka mobiilis ning tõeliselt vanade brauserite levik on enamikus projektides juba väga madal.

SVG tegelik eristav tegur JPG-st või PNG-st on see, et selle sisu on tekst ja seetõttu loetav otsingumootorite ja abitehnoloogiate poolt.See teeb sellest huvitava liitlase SEO ja ligipääsetavuse jaoks, kui kasutatakse sobivaid silte ja atribuute.

Elemendi sees saate lisada ja <desc> graafiku kirjeldamiseksNeid sõlmi kasutatakse ekraanilugejatele ligipääsetava teabena ja need pakuvad failisisule semantilist konteksti, mis hõlbustab indekseerimist.

Atribuut role="img" annab abitehnoloogiatele teada, et SVG toimib pildinaja aria-labelledby saab SVG sisuga siduda ja <desc>. Keerulistel juhtudel on siiski soovitatav lisada pildile HTML-is alternatiivne tekst või kasutada alt-atribuuti <img>-s, kui lisate selle välise ressursina.

Otsingu toimivuse seisukohast vähendab optimeeritud SVG-de kasutamine lehe üldist kaalu.Vähem kilobaite tähendab lühemat laadimisaega, mis mõjutab positiivselt selliseid näitajaid nagu LCP või FCP. Google See võtab arvesse Core Web Vitalsi.

Projektides, kus on endiselt väga vanade brauseritega kasutajaid, saab rakendada varulahendusi.Näiteks samaväärse PNG-faili esitamine, kasutades või konkreetsed tingimuslaused. Praktikas on neid parandusi aga üha vähem vaja.

SVG-failide kujundamise ja haldamise parimad tavad

Skaleeritava SVG-pildi loomine ei seisne ainult "SVG-ks eksportimises", vaid hõlmab ka teatud disaini- ja kodeerimisdistsipliini.Kui pöörate tähelepanu kihtide nimetamisele, teede lihtsustamisele ja faili struktureerimisele, on seda lihtsam hallata ja see on tootmises tõhusam.

Soovitatav on hoida SVG korras, kasutades järjepidevat taanet ning sisukaid ID-sid ja klassinimesid.Näiteks on id="cart-icon" kasutamine palju kasulikum kui id="path123", kui teil on vaja rakendada CSS-ist teatud stiile või muuta elementi JavaScriptiga.

Peidetud elementide, üleliigsete kihtide ja duplikaatsete atribuutide minimeerimine on veel üks oluline tegur.Paljud otse disainiprogrammist loodud failid sisaldavad teavet, mis on veebis kasutu ja mida saab ohutult puhastada SVGO või sarnase programmiga.

Kui projektis töötatakse paljude SVG-dega, on hea mõte need korraldada loogilistesse kaustadesse, millel on ühtsed failinimed./svg/icons/, /svg/logos/ ja /svg/illustrations/ olemasolu säästab ressursside leidmisel aega ja lihtsustab optimeerimisprotsesside automatiseerimist.

Visuaalselt pidage meeles, et SVG-d peaksid hea välja nägema nii tavalistel ekraanidel kui ka suure tihedusega Retina-ekraanidel.Selgete kujundite, sobivate kontrastide ja mitte liiga väikese teksti kasutamine on oluline, et tagada loetavus igat tüüpi seadmetes.

Kui kavatsed SVG-s fonte kasutada, kaalu, kas soovid teksti kontuurideks teisendada või jätta selle reaalajas tekstiks.Selle kõverateks teisendamine tagab, et see näeb välja sama ka siis, kui kasutajal pole seda fonti installitud, kuid see kaotab ligipääsetavuse ja muutmisvõimaluse; tekstina hoidmine kaitseb semantikat, vastutasuks sõltudes saadaolevast fondist.

Hästi üles ehitatud SVG on kerge, loetav, ligipääsetav ja hõlpsasti erinevates kontekstides taaskasutatav.Heade disainitavade, optimeerimisvahendite ja HTML-i ning CSS-i integreerimise kombineerimise abil saate sellest vormingust ikoonide, logode, graafika ja animatsioonide jaoks palju kasu, parandades nii oma veebisaidi visuaalset kvaliteeti kui ka selle jõudlust ja võimet kohaneda mis tahes ekraaniga.