Kostir þess að nota Scalable Vector Graphics
Scalable Vector Graphics, eða SVG, gegna mikilvægu hlutverki í vefhönnun í dag. Ef þú ert ekki að nota SVG í vefhönnuninni þinni hérna eru nokkrar ástæður fyrir því að þú ættir að byrja að gera það, svo og fallbacks sem þú getur notað fyrir eldri vafra sem styðja ekki þessar skrár.
Upplausn
Stærsta ávinningur SVG er upplausn sjálfstæði. Vegna þess að SVG skrár eru vektor grafík í stað myndatengda rastermynda, geta þau verið breytt án þess að tapa myndgæði. Þetta er sérstaklega gagnlegt þegar þú ert að búa til móttækilegar vefsíður sem þurfa að líta vel út og vinna vel yfir fjölmörgum skjástærðum og tækjum .
SVG skrár geta verið minnkaðar upp eða niður til að koma til móts við breyttar stærð og skipulag þarfir móttækilegs vefsvæðis þíns og þú þarft ekki að hafa áhyggjur af þeim grafíkum sem hafa málamiðlun á sérhverju stigi.
Skjala stærð
Ein af áskorunum við að nota raster myndir (JPG, PNG, GIF) á móttækilegum vefsíðum er skráarstærð þessara mynda. Vegna þess að raster myndir mæla ekki eins og vektorinn gerir, þá þarftu að skila myndunum þínum á stærsta stærð sem þeir munu birtast á. Þetta er vegna þess að þú getur alltaf gert mynd minni og varðveitt gæði þess, en það sama gildir ekki um að myndum sé stærri. Niðurstaðan er sú að þú ert oft með myndir sem eru miklu stærri en þeir eru sýndir á skjánum einstaklingsins, sem þýðir að þeir þurfa því að þurfa að sækja mjög stóra skrá.
SVG fjallar um þessa áskorun. Vegna þess að vektor grafíkin er stigstærð getur þú haft mjög litlar skráarstærðir óháð því hversu stór þessi myndir gætu þurft að birtast. Þetta mun á endanum hafa jákvæð áhrif á heildarafköst síðunnar og niðurhalshraða.
CSS Styling
SVG kóða er einnig hægt að bæta beint við HTML síðu. Þetta er þekkt sem "inline SVG." Ein af ávinningi af því að nota inline SVG er að þar sem grafíkin er í raun dregin af vafranum á grundvelli kóðans þarftu ekki að gera HTTP beiðni um að sækja myndskrá. Annar ávinningur er að inline SVG er hægt að stilla með CSS.
Þarftu að breyta lit á SVG tákninu? Í stað þess að þurfa að opna þessa mynd í einhvers konar útgáfa hugbúnaðar og flytja út og hlaða skránni aftur, geturðu einfaldlega breytt SVG skrá með nokkrum línum af CSS.
Þú getur einnig notað aðrar CSS stíl á SVG grafík til að breyta þeim á svefandi ríkjum eða fyrir ákveðnum þörfum hönnun. Þú getur jafnvel búið til þessi grafík til að bæta við hreyfingu og gagnvirkni við síðu.
Teiknimyndir
Vegna þess að inline SVG skrár geta verið stíll með CSS, getur þú notað CSS hreyfimyndir á þeim eins og heilbrigður. CSS umbreytingar og umbreytingar eru tvær einfaldar leiðir til að bæta við einhverju lífi við SVG skrár. Þú getur fengið ríkur Flash-eins og upplifun á síðu án þess að þjást af þeim göllum sem koma með því að nota Flash á vefsíðum í dag.
Notar SVG
Eins og öflugur eins og SVG er, getur þessi grafík ekki skipt út fyrir annað myndsnið sem þú notar á vefsíðunni þinni. Myndir sem krefjast djúpt litadýpi þurfa áfram að vera JPG eða PNG skrá, en einfaldar myndir eins og tákn eru fullkomlega til þess fallnar að vera framkvæmdar sem SVG.
SVG getur einnig verið viðeigandi fyrir flóknari myndir, eins og lógó fyrirtækis eða línurit og töflur. Öll grafíkin munu njóta góðs af því að vera stigstærð, hægt að stilla með CSS og öðrum kostum sem taldar eru upp í þessari grein.
Stuðningur við eldri vafra
Núverandi stuðningur við SVG er mjög góð í nútíma vafra. Eina vafra sem skortir virkilega stuðning við þessa grafík eru eldri útgáfur af Internet Explorer (Version 8 og neðan) og nokkrar eldri útgáfur af Android. Allt í allt notar mjög lítill hluti af vafraþáttinum ennþá þessar vélar og þessi tala heldur áfram að minnka. Þetta þýðir að SVG er hægt að nota nokkuð örugglega á vefsíðum í dag.
Ef þú vilt veita fallback fyrir SVG, getur þú notað tól eins og Grumpicon frá Filament Group. Þessi úrræði mun taka SVG myndaskrárnar þínar og búa til PNG fallbacks fyrir eldri vafra.
Breytt af Jeremy Girard á 1/27/17