Praktiskais ceļvedis SVG
Lai arī formāts nav īpaši jauns, SVG attēli kļūst arvien populārāki vietņu dizainā. Visas lielākās tīmekļa pārlūkprogrammas atbalsta formātu, un SVG maina domāšanas veidu un attēlu attēlošanu tīmeklim.
Kāpēc viņi ir tik populāri? Un kas tieši atšķiras no SVG faila? Šodien mums ir atbildes un viss pārējais, kas jums jāzina, lai sāktu darbu ar šo faila tipu. (Kā neliels bonuss - visi šīs ziņas attēli ir pieejami SVG vietnē Creative Market.)
Izpētiet Envato elementus
Kas ir SVG?
Mērogojama vektorgrafika jeb SVG ir uz vektoriem balstīta attēla formāts, kas izstrādāts tīmeklim. (Uzziniet vairāk par vektora versijas rastra formātiem iepriekšējā Design Shack rakstā.)
Formāta popularitāte ir palielinājusies, pateicoties augstas izšķirtspējas displejiem, kur lietotāji var redzēt katru pikseļu (ja tāds ir). Tā kā SVG ir vektora formāts, attēls tiek atveidots tādā pašā veidā un pilnīgi detalizēti neatkarīgi no izmēra.
Atzīmēšanas valodu vispirms izstrādāja globālais tīmekļa konsorcijs, kas plašāk pazīstams kā W3C, 1999. gadā. W3C definē SVG kā “iezīmēšanas valodu divdimensiju grafikas lietojumprogrammu un attēlu, kā arī ar to saistīto grafikas skriptu saskarņu aprakstam. . ” To atbalsta visi mūsdienu pārlūkprogrammas, tāpēc jums nav jāuztraucas par to, vai SVG faili tiks pareizi atveidoti, un tas darbojas neatkarīgi no ierīces veida.
Praktiski pielietojumi
Kas padara SVG tik populāru un kāpēc vairāk dizaineri to izmanto? Vienkārši tāpēc, ka tas darbojas.
SVG faili ir mazi un mērogojami. Lai gan formāts ir vispiemērotākais formām, tam ir dažādas praktiskas pielietošanas iespējas. Zīmolu logotipi, ikonas, lietotāja interfeisa elementi un daudz citu dizaina bitu var darboties SVG formātā. Lielākais bonuss ir tas, ka tie ir pārnēsātāji. Tātad SVG attēlu var izmantot gandrīz jebkura izmēra. (Daži no sīkākajiem failiem var būt tikai tik lieli.)
Arī SVG failus ir viegli manipulēt un kontrolēt. SVG var ne tikai saglabāt kā statisku attēlu, bet arī pievienot interaktivitāti un filtrus, lai attēlu padarītu vēl jautrāku. (SVG failus var animēt un krāsot.)
Šeit ir daži praktiski pielietojumi SVG lietošanai:
- Logotipi vai attēli
- Kā fona attēls
- Kā priekšmets, piemēram, poga
- Kartēšana
- Diagrammas vai zīmējumi
Parasti SVG ir vislabāk piemērots attēliem, kas laika gaitā vai pēc ierīces veida var mainīties vai mainīties, vai iekļaut animāciju vai citus dinamiskus efektus. Izmantojiet formātu vizuālajiem materiāliem, piemēram, logotipiem, skicēm, formām, grafikām un diagrammām vai citiem vienkāršiem attēliem.
Plusi, izmantojot SVG
Tātad, kāpēc jūs pārietu no uzticamā JPG vai GIF uz SVG? Ir daudz iemeslu, kāpēc šo formātu var vislabāk izmantot jūsu projektos. (Un ir arī iespējas izmantot SVG arī drukāšanai.)
- SVG ir vektora formāts. Tas vien ir svarīgi, domājot par adaptīvu dizainu, kur attēla izmēri bieži mainās atkarībā no ierīces. SVG ir pietiekami mazs, lai viens fails varētu veikt visu darbu, un lielākiem ekrāniem kvalitāte nezaudē.
- SVG attēli un uzvedība tiek definēti ar XML, kas nozīmē, ka attēlus var meklēt indeksēt, skriptēt un saspiest.
- Ar SVG attēlu var izdarīt gandrīz jebko, ko var darīt ar jebkuru citu attēlu, piemēram, iekļaujot dažādas dizaina tehnikas. Ir viegli pievienot filtrus, sajaukšanas režīmus, bur efektus, krāsu, apgriešanu un maskēšanu, ēnu nomešanu un gandrīz jebkuru citu tehniku, kas jums patīk.
- SVG faili ir pieejami.
- SVG strādā ar atvērtā tīmekļa standartiem.
- Jūs varat izveidot SVG, izmantojot uz tekstu balstītu kodu vai ar zīmēto attēlu. Tas dod zināmu brīvību atkarībā no jūsu vajadzības un kompetences līmeņa dažādās jomās.
- Failu izmēri ir niecīgi un tos var samazināt. Tas nozīmē, ka grafikas, kas, iespējams, ir bijušas lielas, nav, palielinot ielādes laiku. (Vienmēr prēmija.)
Mīnusi, izmantojot SVG
Jūs, iespējams, esat pārdots vietnē SVG pēc tam, kad esat izlasījis visas priekšrocības, vai ne? Bet ir arī daži negatīvi, kas jāņem vērā.
- Vecāki pārlūkprogrammas - piemēram, Internet Explorer 8 vai vecākas versijas - neatbalsta SVG. Jūs, iespējams, varat atrast apkārtējo darbību (vai arī tas jums var būt vienalga), taču jāzina, ka daži lietotāji var neredzēt jūsu attēlus.
- SVG nedarbojas sarežģītiem attēliem, piemēram, fotoattēliem. Tas ir formāts, kas paredzēts tikai formām un līnijām.
Kas nākamais SVG?
SVG nākotne tikai sākas. Kā pieņemts mobilā attēla formāts (un standarts), SVG izmantošana un attīstība tikai turpinās augt.
Saskaņā ar W3C teikto, “SVG 2 pašlaik tiek izstrādāts, un tas SVG pievienos jaunas lietošanas vienkāršības funkcijas, kā arī ciešāku integrāciju ar HTML, CSS un DOM, kā arī nolietojošās funkcijas, kuras neatbalsta visi pārlūkprogrammas.”
Arī citi papildinājumi tiek mesti apkārt. Drukas aparatūras uzņēmumi meklē veidus, kā labāk izmantot SVG drukāšanas procesos, un tam ir tādu nozares līderu kā Adobe un Canon atbalsts. Izmantošana kartēšanā un ĢIS arī paplašinās, ļaujot labāk kartēt un tuvināt iespējas.
Kad jūs patiešām sākat par to domāt, ir gandrīz bezgalīga iespēja izmantot un ieviest SVG projektos tīmeklī un drukātā dizainā. (Tā ir viena no vektoru formāta skaistulēm.)
SVG resursi
Tagad, kad jūs esat mazliet satraukti par SVG un redzat, kāpēc un kā tas var būt noderīgs jūsu projektiem, mums ir resursu saraksts, kas palīdzēs jums sākt.
- SVG eksportēšana uz Web, izmantojot Adobe Illustrator
- Iegulties SVG tieši HTML lapās
- Augšup un darbojas ar SVG video sēriju
- SVG profili
- CSS triki: SVG izmantošana
Secinājums
Vai jūs jau izmantojat SVG savos projektos? Ja nē, vai esat gatavs veikt izmaiņas?
SVG popularitāte pieaug gandrīz katru dienu, un tāpēc, ka tas ir atvērtā pirmkoda rīks, šīs izmaiņas un sasniegumi tiek lasīti uzreiz. Jūs neesat piesaistīts nevienam pārdevējam vai produktam, un jūs varat izveidot attēlus, kas ir pilnībā savietojami visā mūsdienu tīmeklī.
Fonda fotoattēli ar radošā tirgus atbalstu .
