Kako stvoriti skalabilnu SVG sliku za web

Ako radite sa slikama za web, prije ili kasnije morat ćete stvoriti skalabilnu SVG sliku koja izgleda savršeno na bilo kojem zaslonu, brzo se učitava i ne utječe negativno na performanse vaše web-lokacije. Tipični PNG ili JPG će poslužiti 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 zapravo potrebna vektorska grafika.

SVG (Scalable Vector Graphics) postao je zvjezdani format za logotipe, ikone, ilustracije, infografike i jednostavne animacije . To su XML tekstovi koje preglednik interpretira i prikazuje u stvarnom vremenu, omogućujući im skaliranje bez gubitka kvalitete, modificiranje CSS-om ili JavaScriptom te optimizaciju 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 (Skalable 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.

Ova metoda osigurava da ista SVG datoteka izgleda jednako oštro na mobilnom uređaju, 4K monitoru ili billboardu . Nema piksela za rastezanje ili interpolaciju; ono što se mijenja jesu matematički principi koji definiraju oblike. Nadalje, budući da je tekstualna, 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 neovisni su 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-ove, iako s nekim ograničenjima vrlo naprednih značajki.

Međutim, SVG-ovi nisu univerzalno rješenje za svaku vrstu slike . Kada se radi sa složenim fotografijama, s milijunima boja i puno detalja, dobro komprimirani JPG je obično učinkovitiji. Pokušaj vektorizacije cijele fotografije često rezultira ogromnim SVG-om, teškim za optimizaciju i nepraktičnim 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, bitno je 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 svojoj vektorskoj komponenti) opisuju matematičke oblike.

Na rasterskoj slici, ako je značajno povećate, pikseli postaju vidljivi, što rezultira tipičnim efektom "stepeništa" . Ovaj gubitak kvalitete je neizbježan kada pokušavate 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, uz cijenu određenog gubitka 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 moraju održati maksimalnu oštrinu na bilo kojem uređaju . Nije neuobičajeno da jedna web stranica koristi desetke ili čak stotine SVG-ova raspoređenih po izbornicima, odjeljcima, gumbima, zaglavljima ili ilustracijama.

Ikone su jedan od najjasnijih primjera gdje SVG zaista blista . Ikone društvenih mreža, jelovnici s hamburgerima, 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š jedan kritičan slučaj upotrebe . Spremanje vašeg 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. Nadalje, 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 ostaje 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 pri zadržavanju pokazivača miša, 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 logotip u JPG/PNG formatu koji želite vektorizirati.

Najčešći programi za dizajniranje i izvoz SVG-ova su Adobe Illustrator, Inkscape, CorelDRAW, Figma i Sketch . Svi oni rade s vektorima i omogućuju vam spremanje kao SVG-a 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 slojeve, korištenje naprednih efekata, visokokvalitetne tipografije, a zatim izvoz u SVG, podešavanje opcija kao što su ugrađivanje ili povezivanje fontova, interno ili eksterno CSS stiliziranje i razina kompatibilnosti.

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

Figma i Sketch, vrlo popularni u UI dizajnu, također vam omogućuju izvoz ikona i komponenti kao SVG . Savršeni su ako već radite na svom UI-ju u ovim alatima jer možete uvesti svoje ikone izravno u svoj kod bez ikakvih međukoraka.

Pretvori JPG ili PNG slike u SVG

Često ne počinjete od nule; već imate logotip ili crtež u JPG, PNG ili PDF formatu i potreban vam je skalabilni SVG . U tim slučajevima postoje dvije mogućnosti: automatski ga vektorizirati alatom za putanju ili ručno ponovno nacrtati grafiku alatom za olovku.

Alati za automatsko praćenje brzo pretvaraju piksele u vektorske oblike, ali s mješovitim rezultatima . Za jednostavne, jednobojne logotipe ili one s malo detalja, oni funkcioniraju prilično dobro i štede vam vrijeme. Međutim, kod složene grafike generiraju tisuće čvorova i vrlo veliku SVG datoteku koju je teško uređivati. Ako trebate dublje istražiti ručne metode, pregledajte tehnike praćenja i vektorizacije u Illustratoru.

Neke specijalizirane platforme nude usluge ručne vektorizacije . S tim uslugama prenosite 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. Ovo je najpouzdanija opcija za logotipe brendova koji moraju biti savršeni.

Ako pretvarate iz drugih vektorskih formata poput EPS-a ili AI-a, SVG pretvarači obično čuvaju gotovo sve informacije . U tom slučaju, boja, oblici i struktura slojeva održavaju se prilično vjerno, sve dok ne koristite efekte koji su izrazito specifični za određeni program.

Kada je izvor fotografija ili vrlo složena rasterska slika, automatska vektorizacija rijetko daje koristan rezultat . U ovom scenariju, najrazumniji pristup 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 prilično je sličan u gotovo svim vektorskim uređivačima . Evo općeg sažetka kako biste ga mogli primijeniti u Inkscapeu, Illustratoru ili sličnim alatima.

Prvi korak je stvaranje platna ili radne površine s razumnim dimenzijama . Iako će SVG kasnije biti skalabilan, najbolje je raditi s "ljudskim veličinama" (na primjer, 500 × 500 px za ikonu ili 1200 × 600 px za zaglavlje), jer to olakšava proces dizajniranja i pomaže u održavanju proporcija.

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

Na te putanje možete primijeniti boje ispune i poteza, debljine linija, zaobljene kutove, gradijente ili uzorke . Svi se ovi atributi zatim mogu prevesti u CSS, stoga je preporučljivo ne pretjerivati ​​s neobičnim efektima koji se možda neće dobro prevesti u preglednik.

Nakon što je vaš dizajn spreman, prilagodite radnu površinu sadržaju . Većina programa ima opciju pričvršćivanja platna na granice crteža i izbjegavanja praznih margina; to pomaže u sprječavanju nepotrebnog bijelog prostora oko SVG-a.

Konačno, izvezite ili spremite kao SVG . Dijaloš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 i tako dalje. Za web upotrebu općenito želite SVG koji je što čišći i laganiji, bez nepotrebnih metapodataka.

Promijenite veličinu i skalirajte SVG bez gubitka kvalitete

Izvrsna stvar kod ovog 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 je skaliran . Ključni atribut u ovom procesu je viewBox , koji definira unutarnji koordinatni sustav grafike.

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

Da bi SVG bio zaista responzivan, uobičajena praksa je ukloniti atribute širine i visine iz elementa `<svg>` i ostaviti 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 kao postotka ili u 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 ubaciti je u preglednik . Postoji nekoliko načina za to, a svaki vam daje različitu razinu kontrole nad stilovima, pristupačnošću i performansama.

Najjednostavniji i najizravniji način je korištenje oznake <img> koja upućuje na vanjsku SVG datoteku . Na primjer: <img src="logo.svg" alt="Brand logo">. Mehanizam je isti kao i kod JPG-a, osim što preglednik prepoznaje da je resurs vektorski.

Ako želite veću kontrolu, SVG kôd možete ugraditi izravno u HTML pomoću oznake `<svg>` . U tom slučaju kopirate sadržaj datoteke i lijepite ga u kôd 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, manje uobičajena, ali i dalje valjana opcija je korištenje `<object>` ili `<embed>` za učitavanje SVG-a kao ugrađenog vanjskog resursa . To ima neka ograničenja u pogledu stila i pristupačnosti, pa u praksi gotovo svi preferiraju `<img>` ili inline SVG.

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 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 najsnažnijih prednosti skalabilne SVG slike je ta što se može tretirati 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 `<img>`), možete izravno promijeniti boje ispune i obrisa pomoću CSS-a . Na primjer: `svg path { fill: red; stroke: blue; }`. To vam omogućuje, na primjer, da ponovno upotrijebite istu datoteku za prikaz logotipa u jednoj boji u zaglavlju i drugoj boji u podnožju.

Atribut fill definira boju unutrašnjosti oblika, a stroke kontrolira boju i debljinu obrisa . Također možete mijenjati svojstva poput stroke-width, stroke-dasharray ili stroke-linecap kako biste postigli ručno crtane efekte ili isprekidane linije.

Za jednostavne animacije, CSS je više nego dovoljan . Možete promijeniti boju ikone prilikom zadržavanja miša, rotiranja, pulsiranja ili pomicanja pomoću standardnih transformacija i prijelaza.

Ako vam treba nešto složenije, sam SVG standard uključuje elemente poput `<animate>` koji vam omogućuju animiranje atributa tijekom vremena . Na primjer, možete natjerati krug da se pomiče s jedne strane na drugu, mijenjajući svoj položaj (`cx`) pet sekundi u petlji, bez potrebe za vanjskim skriptama.

Za složene i interaktivne animacije, JavaScript (ili specifične biblioteke) omogućuje vam povezivanje SVG-a s korisničkim događajima . Možete pomicati dijelove grafike klikom, sinkronizirati animacije s pomicanjem ili mijenjati 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 svake SVG datoteke zasebno rezultira mnogim HTTP zahtjevima . 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 biti velika datoteka koja sadrži mnogo ikona definiranih unutar elemenata `<symbol>` . Zatim, u svakom dijelu HTML-a gdje želite prikazati ikonu, koristite `<svg><use xlink:href="#id-of-icon"></use></svg>`. Na taj način preglednik preuzima sprite samo jednom i ponovno koristi ikone interno.

Ova tehnika značajno smanjuje broj zahtjeva prema poslužitelju , smanjujući latenciju i poboljšavajući 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-a analiziraju kod, uklanjaju metapodatke, razmake, nepotrebne atribute, suvišne točke u putanjama i sve ostalo što ne utječe na vizualni rezultat.

Mnogi vektorski urednici također uključuju ugrađene značajke pojednostavljenja putanja . Smanjenje 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 previše slož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 pomakne 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 i na stolnim računalima i na mobilnim uređajima, a penetracija doista zastarjelih preglednika sada 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 . To ga čini vrijednim alatom za SEO i pristupačnost, pod uvjetom da se koriste odgovarajuće oznake i atributi.

Unutar elementa <svg> možete uključiti <title> i <desc> za opis grafike . Ovi čvorovi se koriste kao informacije dostupne čitačima 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 `<title>` i `<desc>`. U složenim slučajevima, i dalje je preporučljivo uključiti alternativni tekst u HTML ili koristiti `alt` u `<img>` ako ga umećete kao vanjski resurs.

S gledišta performansi pretraživanja, korištenje optimiziranih SVG-ova smanjuje ukupnu težinu stranice . Manje kilobajta znači brže vrijeme učitavanja, što pozitivno utječe na metrike poput LCP-a i FCP-a koje Google uzima u obzir u svojim Core Web Vitals.

U projektima gdje korisnici još uvijek imaju vrlo stare preglednike, mogu se implementirati rezervna rješenja . Na primjer, posluživanje ekvivalentnog PNG-a pomoću `<picture>` ili specifičnih uvjetnih naredbi. Međutim, u praksi su ova zaobilazna rješenja sve manje potrebna.

Najbolje prakse pri dizajniranju i upravljanju SVG datotekama

Stvaranje skalabilne SVG slike nije samo "izvoz u SVG"; ono također uključuje određenu disciplinu u dizajnu i kodiranju . Ako obratite pozornost 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 da SVG bude organiziran, s dosljednim uvlačenjem i smislenim nazivima ID-ova i 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 mogu se sigurno očistiti pomoću SVGO-a ili sličnog alata.

Prilikom rada s mnogo SVG-ova u projektu, najbolje ih je organizirati u logičke mape s dosljednim nazivima datoteka . Mape poput /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 SVG-ovi moraju izgledati dobro i na standardnim zaslonima i na Retina zaslonima visoke gustoće . Rad s jasnim oblicima, odgovarajućim kontrastom 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 mogućnosti pristupačnosti i uređivanja; zadržavanje kao teksta štiti semantiku, ali uz cijenu ovisnosti 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 s HTML-om i CSS-om, možete puno toga dobiti od ovog formata za ikone, logotipe, grafiku i animacije, poboljšavajući vizualnu kvalitetu vaše web stranice i njezine performanse i responzivnost na svim veličinama zaslona.