Kako stvoriti skalabilnu SVG sliku za web

Ako radite sa slikama za web, prije ili kasnije morat ćete stvoriti skalabilnu SVG sliku. Mora izgledati savršeno na bilo kojem zaslonu, brzo se učitavati i ne smije negativno utjecati na performanse vaše web-lokacije. Tipični PNG ili JPG-ovi funkcioniraju u mnogim situacijama, ali kada vaš logotip izgleda mutno na 4K televizoru ili vaše ikone izgube oštrinu na novom mobilnom uređaju, tada shvatite da vam je stvarno potrebna vektorska grafika.

SVG (Scalable Vector Graphics) postao je zvjezdani format za logotipe, ikone, ilustracije, infografike i lagane animacije.To su XML tekstovi koje preglednik interpretira i prikazuje u stvarnom vremenu, tako da se mogu skalirati bez gubitka kvalitete, modificirati CSS-om ili JavaScriptom te optimizirati za SEO i pristupačnost. Pogledajmo jasno i sažeto kako format funkcionira, kako ih stvoriti od nule ili iz JPG/PNG datoteke, kako ih integrirati u svoju web stranicu i kako izvući maksimum iz njih.

Što je SVG datoteka i zašto je skalabilna?

SVG je kratica za Scalable Vector Graphics, što znači vektorsku grafiku koja se može skalirati bez gubitka definicije.Za razliku od JPG-a ili PNG-a, koji pohranjuju informacije za svaki piksel, SVG pohranjuje upute za crtanje - linije, krivulje, boje i položaje - u obliku XML koda. Preglednik čita te upute i "ponovno crta" sliku u rezoluciji koju zahtijeva uređaj.

Ovaj način rada osigurava da ista SVG datoteka izgleda jednako oštro na mobilnom telefonu, 4K monitoru ili billboardu.Nema piksela za rastezanje ili interpolaciju; ono što se mijenja veličina su matematički principi koji definiraju oblike. Nadalje, budući da je riječ o tekstu, datoteka se može otvoriti i uređivati ​​bilo kojim uređivačem koda, automatizirati, komprimirati, pa čak i manipulirati pomoću JavaScripta.

SVG-ovi su neovisni o rezoluciji, vrlo lagani za jednostavnu grafiku i kompatibilni sa svim modernim preglednicima.Chrome, Firefox, Safari, Edge i Opera godinama izvorno podržavaju format. Čak i Internet Explorer 9 i novije verzije prihvaćaju SVG, iako s nekim ograničenjima na vrlo napredne značajke.

Međutim, SVG-ovi nisu čarobni štapić za sve vrste slika.Kada se radi o složenim fotografijama, s milijunima boja i puno detalja, dobro komprimirani JPG je obično učinkovitiji. Pokušaj vektorizacije cijele fotografije obično generira ogromnu SVG datoteku, teško optimizirati i nepraktičnu za stvarnu upotrebu.

Rasterski vs. vektorski: razlike između SVG-a, JPG-a i PNG-a

Da biste razumjeli kada je prikladno stvoriti skalabilnu SVG sliku, morate jasno razumjeti razliku između rasterskih i vektorskih slika.JPG, PNG i GIF su bitmap formati: pohranjuju mrežu piksela s fiksnim bojama. SVG, EPS, AI ili PDF (u svom vektorskom dijelu) opisuju matematičke oblike.

Na rasterskoj slici, ako previše povećate veličinu, pikseli postaju vidljivi i pojavljuje se tipičan efekt "stepeništa".Taj gubitak kvalitete je neizbježan kada pokušate nametnuti rezoluciju koju izvorna slika nema. Nasuprot tome, SVG se može povećati koliko god želite jer se povećava formula koja crta svaku liniju.

JPG je idealan za fotografije jer vrlo dobro komprimira varijacije boja, ali uz gubitak kvalitete.PNG, s druge strane, održava kvalitetu (kompresija bez gubitaka) i podržava transparentnost, što ga čini savršenim za grafiku s prozirnim pozadinama, snimke zaslona ili elemente sučelja koji se ne moraju previše skalirati.

SVG blista kada su u pitanju ikone, logotipi, ilustracije, dijagrami, grafikoni, infografike i jednostavne animacije.Za ovu vrstu sadržaja, PNG datoteke obično su veće, izgledaju lošije kada se uvećaju i ne mogu se fleksibilno manipulirati CSS-om. Zato je web ekosustav prihvatio SVG za sve moderne elemente sučelja.

Uobičajene upotrebe skalabilnih SVG slika

U web dizajnu i razvoju, SVG se prvenstveno koristi za elemente koji trebaju održati maksimalnu oštrinu na bilo kojem uređaju.Nije neuobičajeno da jedna stranica koristi desetke ili stotine SVG-ova raspoređenih po izbornicima, odjeljcima, gumbima, zaglavljima ili ilustracijama.

Ikone su jedan od najjasnijih primjera gdje SVG dominira.Ikone društvenih mreža, jelovnici za hamburgere, ocjene zvjezdicama, ikone košarica za kupnju… Sve one imaju koristi od skalabilnosti formata. Možete koristiti istu ikonu u maloj veličini na mobilnom izborniku i ogromnoj veličini na stranici s cijenama bez gubitka ikakvih detalja.

Korporativni logotipi su još jedna ključna upotrebaSpremanje logotipa kao SVG osigurava da će izgledati savršeno na vašoj favicon ikoni, izborniku, klizaču početne stranice i bilo kojem tiskanom materijalu. Osim toga, jedna izvorna datoteka može se ponovno koristiti za web, prezentacije, postere i posjetnice bez potrebe da je svaki put ponovno izrađujete.

SVG se također često koristi u infografikama, podatkovnoj grafici i prilagođenim ilustracijama.Budući da je sadržaj vektorski, grafičke linije izgledaju čisto, tekst može ostati oštar, a datoteka se besprijekorno prilagođava tabletima, mobilnim telefonima i velikim ekranima.

Konačno, SVG-ovi vam omogućuju stvaranje vrlo laganih i fluidnih animacija.Možete animirati ikonu koja mijenja boju kada zadržite pokazivač iznad nje, program za učitavanje koji se beskonačno rotira ili čak grafiku koja reagira na pomicanje ili interakciju korisnika pomoću CSS-a, SMIL-a ili JavaScripta.

Alati za stvaranje skalabilne SVG slike

Za generiranje SVG datoteka možete početi od nule u vektorskom editoru ili pretvoriti postojeće slike u rasterski ili vektorski format.Izbor će ovisiti o tome želite li potpuno novi dizajn ili već imate logo u JPG/PNG formatu koji želite vektorizirati.

Najčešći programi za dizajniranje i izvoz SVG-a su Adobe Illustrator, Inkscape, CorelDRAW, Figma i Sketch.Svi rade s vektorima kao bazom i omogućuju vam spremanje u SVG formatu s različitim razinama kontrole nad veličinom, fontovima i vrstom izvoza. Ako tražite više opcija, pogledajte popis programa za izradu vektorskih slika.

Adobe Illustrator je profesionalni standard u mnogim agencijama i studijima.Omogućuje vam crtanje alatom Pen, organiziranje dizajna u slojevima, korištenje naprednih efekata, visokokvalitetne tipografije, a zatim izvoz u SVG, podešavanje opcija kao što su ugrađivanje ili povezivanje fontova, interni ili eksterni CSS stil i razina kompatibilnosti.

Inkscape je besplatna alternativa otvorenog koda koja pokriva gotovo sve što prosječnom dizajneru treba.Ima alate za oblike, čvorove, tekst, gradijente, filtere, a također i direktan izvoz u SVG, koji obično također... generirati kod prilično čisto.

Figma i Sketch, vrlo popularni u dizajnu sučelja, također omogućuju izvoz ikona i komponenti kao SVG.Savršeni su ako već radite na svom korisničkom sučelju u ovim alatima jer ikone možete prenijeti izravno u kod bez međukoraka.

Pretvori JPG ili PNG slike u SVG

Često ne počinjete od nule, već već imate logotip ili crtež u JPG, PNG ili PDF formatu i potreban vam je skalabilni SVG.U tim slučajevima postoje dvije putanje: automatska vektorizacija alatom za putanje ili ručno crtanje grafike alatom Pen.

Alati za automatsko praćenje brzo pretvaraju piksele u vektorske oblike, ali s nedosljednim rezultatima.Za jednostavne logotipe, u jednoj boji ili s malo detalja, funkcioniraju prilično dobro i štede vam vrijeme. Međutim, za složenu grafiku generiraju tisuće čvorova i vrlo veliku, teško uređivanu SVG datoteku. Ako trebate dublje istražiti ručne metode, pregledajte tehnike praćenja i vektorizacije u Illustratoru.

Neke specijalizirane platforme nude usluge ručne vektorizacijeS ovim uslugama, prenesete svoj logotip u JPG, PNG ili PDF formatu, a dizajner ga ručno precrtava u Illustratoru koristeći ispravne fontove, isporučujući čistu EPS/AI/SVG datoteku spremnu za ispis ili web. To je najpouzdanija opcija za logotipe brendova koji moraju izgledati savršeno.

Ako pretvarate iz drugih vektorskih formata kao što su EPS ili AI, SVG pretvarači obično čuvaju gotovo sve informacije.U ovom slučaju, boja, oblici i struktura slojeva održavaju se prilično vjerno, sve dok ne koristite izrazito specifične efekte iz određenog programa.

Kada je izvor fotografija ili vrlo složena rasterska slika, automatska vektorizacija rijetko nudi koristan rezultat.U ovom scenariju, najrazumnije je zadržati fotografiju u JPG ili WebP formatu, a SVG rezervirati za ikone, okvire, tekst ili preklopljene grafičke elemente.

Kako korak po korak stvoriti SVG datoteku

Ako želite dizajnirati vlastitu skalabilnu SVG sliku od nule, osnovni tijek rada je prilično sličan u gotovo svim vektorskim editorima.Evo općeg sažetka kako biste ga mogli primijeniti u Inkscapeu, Illustratoru ili sličnim alatima.

Prvi korak je stvaranje platna ili radnog prostora razumnih dimenzijaIako će SVG kasnije biti skalabilan, preporučljivo je raditi s "ljudskim veličinama" (na primjer, 500×500 px za ikonu ili 1200×600 px za zaglavlje), jer to dizajn čini ugodnijim i pomaže u održavanju proporcija.

Sljedeća je faza crtanjaZa crtanje obrisa, linija i krivulja koristite alat Pen ili Bezier, a za izradu dizajna osnovne alate za oblike (pravokutnike, elipse, poligone). Svaki oblik bit će zabilježen kao putanja ili skup putanja u SVG XML-u.

Na ove putanje primjenjujete boje ispune i poteza, debljine linija, zaobljene kutove, gradijente ili uzorke.Svi ovi atributi se zatim mogu prevesti u CSS, stoga je preporučljivo ne pretjerivati ​​s neobičnim efektima koji se ne prevode dobro u pregledniku.

Nakon što je vaš dizajn spreman, prilagodite radnu površinu sadržaju.U većini programa postoji opcija prilagođavanja platna granicama crteža i izbjegavanja praznih margina; to pomaže osigurati da SVG nema nepotrebnog bijelog prostora oko sebe.

Na kraju, izvezite ili spremite kao SVGDijaloški okvir za izvoz obično uključuje opcije za pojednostavljenje putanja, uključivanje stilova kao ugrađenih atributa ili kao CSS, ugrađivanje slika ili fontova itd. Za web upotrebu općenito je poželjan najčišći i najlakši mogući SVG, bez suvišnih metapodataka.

Promijenite veličinu i skalirajte SVG bez gubitka kvalitete

Izvrsna stvar kod formata je što možete promijeniti veličinu SVG-a bez da postane pikseliziran, ali to ne znači da ne biste trebali obraćati pažnju na to kako se skalira.Ključni atribut u ovom procesu je viewBox, koji definira unutarnji koordinatni sustav grafa.

U samoj SVG datoteci vidjet ćete nešto poput viewBox="0 0 100 100"To ukazuje na to da je cijeli crtež dizajniran unutar kvadrata veličine 100x100 jedinica. Ako zatim u HTML-u kažete pregledniku da SVG treba biti širok 200px, preglednik jednostavno množi te jedinice kako bi odgovarao sadržaju.

Da bi SVG bio zaista responzivan, uobičajena je praksa ukloniti atribute širine i visine iz elementa. i ostavite samo viewBox. Zatim se u CSS-u njegovo ponašanje kontrolira nečim jednostavnim poput:

svg { prikaz: inline-block; maksimalna širina: 100%; visina: sama; }

Ako trebate skupno promijeniti veličinu mnogo SVG-ova i ne želite dirati kod, postoje online alati koji djeluju kao alati za "promjenu veličine" SVG-ova.Ovi uslužni programi omogućuju vam definiranje nove veličine u postocima ili jedinicama, primjenu transformacije i preuzimanje nove skalirane verzije, bez potrebe za instaliranjem bilo kakvog softvera.

Kako umetnuti SVG na web stranicu

Nakon što imate skalabilnu SVG sliku, sljedeći korak je unijeti je u preglednik.Postoji nekoliko načina za to, a svaki vam daje drugačiju razinu kontrole nad stilovima, pristupačnošću i performansama.

Najosnovniji i najizravniji način je korištenje oznake pokazujući na vanjsku SVG datotekuNa primjer: To je isti mehanizam kao i kod JPG-a, samo preglednik zna da je resurs vektorski.

Ako želite veću kontrolu, možete ugraditi sam SVG kod unutar HTML-a pomoću oznakeU tom slučaju kopirate sadržaj datoteke i lijepite ga u kod svoje stranice. To vam omogućuje promjenu boja pomoću CSS-a, dodavanje klasa, manipuliranje određenim dijelovima pomoću JavaScripta i poboljšanje pristupačnosti.

Druga mogućnost, danas manje korištena, ali i dalje valjana, jest korištenje ili učitati SVG kao ugrađeni vanjski resursIma neka ograničenja u pogledu stila i pristupačnosti, pa u praksi gotovo svi preferiraju ili SVG u tekstu.

Sustavi za upravljanje sadržajem poput WordPressa ne dopuštaju prijenos SVG datoteka prema zadanim postavkama iz sigurnosnih razloga.Lako ih je omogućiti instaliranjem dodataka poput Safe SVG ili SVG Support, koji dezinficiraju datoteku kako bi spriječili da sadrži zlonamjerne skripte i omogućuju vam da ih koristite iz medijske biblioteke baš kao i bilo koju drugu sliku.

Stilizirajte i animirajte SVG pomoću CSS-a i koda

Jedna od najmoćnijih prednosti skalabilne SVG slike je ta što se s njom može postupati kao da je dio samog DOM-a stranice.To znači da možemo primijeniti stilove pomoću CSS-a i stvoriti animacije pomoću CSS-a, SMIL-a ili JavaScripta bez dodirivanja osnovne datoteke.

Ako ugradite SVG inline (ne kao (vanjski), boju ispune i obris možete promijeniti izravno pomoću CSS-aNa primjer: svg path { fill: red; stroke: blue; }. To omogućuje, na primjer, ponovnu upotrebu iste datoteke za prikaz logotipa u jednoj boji u zaglavlju i drugoj boji u podnožju.

Atribut ispune definira boju unutarnjeg područja oblika, a atribut poteza kontrolira boju i debljinu obrisa.Također možete mijenjati svojstva kao što su širina poteza, širina poteza-dasharray ili širina poteza-linecap kako biste postigli ručno crtane efekte ili isprekidane linije.

Za jednostavne animacije, CSS je više nego dovoljan.Ikonu možete promijeniti boju kada zadržite pokazivač iznad nje, rotirate je, pulsirate ili pomičete pomoću standardnih transformacija i prijelaza.

Ako vam treba nešto složenije, sam SVG standard uključuje elemente kao što su koji omogućuju animiranje atributa u el tiempoNa primjer, pomicanje kruga s jedne strane na drugu, mijenjajući njegov položaj cx tijekom pet sekundi, u petlji, bez potrebe za vanjskim skriptama.

Za složene i interaktivne animacije, JavaScript (ili specifične biblioteke) omogućuje povezivanje SVG-a s korisničkim događajima.Dijelove grafikona možete pomicati klikom, sinkronizirati animacije s pomicanjem ili promijeniti izgled na temelju podataka koje stranica prima, otvarajući vrata vrlo bogatim vizualizacijama podataka.

SVG spriteovi i optimizacija performansi

Kada web stranica koristi desetke ili stotine ikona, učitavanje svakog SVG-a zasebno uključuje mnogo HTTP zahtjeva.Kako bi se smanjio taj broj i ubrzalo učitavanje, vrlo je korisno koristiti SVG spriteove ili slične strategije grupiranja.

SVG sprite je u osnovi velika datoteka koja sadrži mnogo ikona definiranih unutar elemenata.Zatim, u svakom dijelu HTML-a gdje želite prikazati ikonu, koristite Na taj način, preglednik preuzima sprite samo jednom i ponovno koristi ikone interno.

Ova tehnika značajno smanjuje broj zahtjeva prema poslužitelju.To smanjuje latenciju i poboljšava korisničko iskustvo, posebno na mobilnim vezama. Nadalje, i dalje zadržavate mogućnost promjene boja i veličina pomoću CSS-a.

Osim spriteova, postoje i specifični alati za kompresiju i optimizaciju SVG-a.Uslužni programi poput SVGO-a ili njegove web verzije SVGOMG analiziraju kod, uklanjaju metapodatke, razmake, nepotrebne atribute, suvišne točke u putanjama i sve što ne utječe na vizualni rezultat.

Mnogi vektorski urednici također uključuju ugrađene značajke pojednostavljenja putanjaSmanjenje broja čvorova u složenim krivuljama ne samo da smanjuje veličinu datoteke, već i olakšava naknadno uređivanje i sprječava preglednik da mora izračunati pretjerano zamršene putanje.

Na stranicama s mnogo grafike ispod pregiba, dobra je ideja kombinirati SVG s tehnikama lijenog učitavanja.Iako su SVG-ovi obično lagani, nema smisla učitavati sve ikone i grafiku odjednom koje korisnik neće vidjeti dok ne skrola nekoliko stotina piksela.

Kompatibilnost, SEO i pristupačnost u SVG-u

Što se tiče kompatibilnosti, trenutna situacija je vrlo povoljna: svi moderni preglednici široko podržavaju SVG.Chrome, Firefox, Safari, Edge i Opera besprijekorno prikazuju SVG grafiku na stolnim računalima i mobilnim uređajima, a penetracija doista starih preglednika već je vrlo niska u većini projekata.

Prava razlika između SVG-a i JPG-a ili PNG-a jest ta što je njegov sadržaj tekst i stoga ga tražilice i pomoćne tehnologije mogu čitati.Zbog toga je zanimljiv saveznik za SEO i pristupačnost, ako se koriste odgovarajuće oznake i atributi.

Unutar elementa možete uključiti i <desc> za opis grafaOvi čvorovi se koriste kao dostupne informacije za čitače zaslona, ​​a također pružaju semantički kontekst sadržaju datoteke, što olakšava indeksiranje.

Atribut role="img" govori pomoćnim tehnologijama da SVG djeluje kao slika, a aria-labelledby može povezati SVG sa sadržajem i <desc>. U složenim slučajevima, i dalje je preporučljivo popratiti sliku alternativnim tekstom u HTML-u ili koristiti alt u <img> ako ga umetnete kao vanjski resurs.

S gledišta performansi pretraživanja, korištenje optimiziranih SVG-ova smanjuje ukupnu težinu stranice.Manje kilobajta znači kraće vrijeme učitavanja, što pozitivno utječe na metrike poput LCP-a ili FCP-a. Google Uzima u obzir unutar Core Web Vitalsa.

U projektima gdje još uvijek postoje korisnici s vrlo starim preglednicima, mogu se implementirati rezervna rješenja.Na primjer, posluživanje ekvivalentnog PNG-a pomoću ili specifične uvjetne odredbe. Međutim, u praksi su te ispravke sve rjeđe potrebne.

Najbolje prakse pri dizajniranju i upravljanju SVG datotekama

Stvaranje skalabilne SVG slike nije samo "izvoz u SVG", već uključuje i određenu disciplinu dizajna i kodiranja.Ako pazite na to kako imenujete slojeve, pojednostavljujete putanje i strukturirate datoteku, bit će je lakše održavati i učinkovitija u produkciji.

Preporučuje se održavanje SVG-a urednim, s dosljednim uvlačenjem i smislenim ID-ovima i nazivima klasa.Na primjer, korištenje id="cart-icon" je puno korisnije od id="path123" kada trebate primijeniti određene stilove iz CSS-a ili izmijeniti element pomoću JavaScripta.

Minimiziranje skrivenih elemenata, redundantnih slojeva i dupliciranih atributa još je jedna ključna stvar.Mnoge datoteke generirane izravno iz programa za dizajn sadrže informacije koje su beskorisne na webu i koje se mogu sigurno očistiti pomoću SVGO-a ili sličnog programa.

Prilikom rada s mnogo SVG-ova u projektu, dobra je ideja organizirati ih u logičke mape s dosljednim nazivima datoteka.Posjedovanje /svg/icons/, /svg/logos/ i /svg/illustrations/ uštedjet će vam vrijeme pri pronalaženju resursa i olakšati automatizaciju procesa optimizacije.

Vizualno, imajte na umu da bi SVG-ovi trebali izgledati dobro i na konvencionalnim zaslonima i na Retina zaslonima visoke gustoće.Rad s jasnim oblicima, odgovarajućim kontrastima i tekstom koji nije premalen ključan je za osiguranje čitljivosti na svim vrstama uređaja.

Ako ćete koristiti fontove unutar SVG-a, razmislite želite li pretvoriti tekst u obrise ili ga zadržati kao aktivni tekst.Pretvaranje u krivulje osigurava da će izgledati isto čak i ako korisnik nema instaliran taj font, ali gubi pristupnost i mogućnost uređivanja; zadržavanje kao teksta štiti semantiku, u zamjenu za ovisnost o dostupnom fontu.

Dobro konstruiran SVG je lagan, čitljiv, pristupačan i jednostavan za ponovnu upotrebu u različitim kontekstima.Kombiniranjem dobrih dizajnerskih praksi, alata za optimizaciju i pravilnom integracijom u HTML i CSS, možete puno postići ovim formatom za ikone, logotipe, grafiku i animacije, poboljšavajući vizualnu kvalitetu vaše web stranice i njezine performanse te sposobnost prilagodbe bilo kojem ekranu.