The Ultimate Guide til SVG

Ímyndaðu þér að þú gætir embed in mynd á vefsíðu, skala þá síðu í hvaða stærð sem er og aldrei missa myndgæði. Jæja, þú getur. Það er algerlega mögulegt, við höfum bara ekki gert það eins mikið og við ættum.

Myndir með fastum stærðum, svo sem JPG-skrám, GIF-skrár og PNG-skjölum, eiga sér stað á vefnum, en í eðli sínu er truflanir þeirra í andstöðu við hvernig vefurinn er að fara. Þegar við flytjum til móttækilegra flæðandi hönnun, því meira pirrandi verður það að þurfa að takast á við myndir sem eru í grundvallaratriðum ekki móttækileg. Það er pirrandi fyrir utan trú þegar ég átta mig á því að það sé best að æfa sig til að búa til og þjóna nokkrum mismunandi útgáfum af hverri mynd á síðunni þinni.

Ég átta mig á því að það eru góðar tæknilegar ástæður fyrir þessu. Það verður langur tími áður en einhver skapar óendanlega stigstærð, til dæmis. Hins vegar eru myndirnar ekki alls og endir-allt myndefni. Vektor grafík hefur komið mjög langt. Þeir eru enn að fara langt.

Þeir geta verið erfiðari að eignast, því ekki er hver vefur hönnuður illustrator. Myndir eru nóg og gott lager myndmál er auðvelt að finna. Vektor grafík, hins vegar, er oft af lágum gæðum, eða þú getur bara ekki fundið rétta. Leigusýningar eru dýr.

En eins og stuðningur við grafík grafík vex á netinu, þá mun notkun þeirra. Það er kominn tími fyrir alla að læra hvernig á að framkvæma þær á vefsíðum sínum og nota þær á skapandi hátt. Myndir sem móttækilegir þar sem vefsíður okkar eru framtíðin.

Mæta SVG skrána ...

Hvað er SVG og afhverju ættir þú að nota það?

Allt í lagi, fyrir newbies meðal okkar, SVG stendur fyrir Scalable Vector Graphics. SVG skrár eru frekar einfaldar hlutir, í orði. Þeir eru bara textaskrár með fullt af XML inni. Sérhver hluti af sjónrænum upplýsingum í SVG-skrá er skilgreindur með læsilegan kóða sem er síðan reiknaður og gefinn af vafranum þínum, grafík hugbúnað o.fl.

Þetta þýðir að þótt SVG skrár séu ekki eins flóknar og td mynd sem er sniðin sem JPG, þá eru þau óendanlega sveigjanlegri. Hægt er að breyta þeim handvirkt í textaritli. Þeir geta breyst með kóða, svo sem JavaScript og CSS. Þau geta verið þjappað í næstum hlægilegum litlum stærðum.

Með öðrum orðum eru þau sérstaklega hönnuð til notkunar við hliðina á annarri vefur tækni. Þau eru fullkomin fyrir okkur.

Í lok 90s kynnti Macromedia og Microsoft (og önnur fyrirtæki) VML , og þá kynnti Adobe (og önnur fyrirtæki) PGML eins og mögulegar lausnir fyrir vektor myndir á vefsíður til W3C (og hugsanlega sem valkostur við gamla PostScript sniði). W3C sagði: "Nei, við eigum að gera okkar eigin hlut; en takk fyrir hugmyndirnar! "Niðurstaðan var SVG vinnuhópur.

Í september 2001 varð SVG 1.0 opinbert W3C tilmæli og restin er saga. Eiginlega. Internet Explorer lagðist á bak við að samþykkja SVG sniði, óvart enginn. Síðan þá hafa verið uppfærslur sem miða að farsímum og fleira með skýringar.

Jafnvel nú er SVG vinnuhópurinn að búa til SVG 2 sem mun fela í sér meiri samþættingu aðlögun við hluti eins og HTML5, CSS og WOFF leturstærðina.

Það hefur stuðning

Eina útgáfan af Internet Explorer sem þú þarft að hafa áhyggjur af núna er IE8. Það er það. Allir aðrir hafa meira eða minna fullan SVG stuðning. Já, þú gætir keyrt í galla stundum, jafnvel í "góðu" vafrunum, en það er samt þess virði. Ekki aðeins mun vinna um þau halda vandamálum þínum leysa skörpum, en því meira sem við notum þessa tækni, því fleiri forritara vafrans munu styðja það.

Athuga caniuse.com til að fá nánari greiningu á því hvað virkar og hvað er ekki í hvaða vafra.

Allt er móttækilegt ... eða það ætti að vera

Internet tækni hefur gengið hátt, langt út fyrir kyrrstöðu vefsíður sem við notuðum að vita. Það er kominn tími til að myndirnar okkar náist, einfaldar og einfaldar. Þegar þú þarft að búa til tákn skaltu nota SVG. Þegar þú þarft að nota mynd, farðu á SVG ef þú getur. Ef þú vilt abstrakt, en samt einföld vefsíðu bakgrunn, notaðu SVG.

Ég er ekki aðdáandi af sjónhimnuhugbúnaðinum, sérstaklega vegna þess að ég hef ekki einn. Það er ekki öfund. Jæja, það er ekki bara öfund. Einfaldasta staðreyndin er sú að Retina skjáirnar eru farnar og gerðu að þjóna myndum sem eru miklu flóknari. SVG, sem er óendanlega stigstærð, getur hjálpað til við að draga úr vandamálinu.

Aðgengi

Notendur sem eru sjónskertir fara yfirleitt á netið með öllu í smáatriðum. Þegar venjulegar myndir verða aðdrættir, missa þeir gæði. SVG mun ekki gera það, svo af hverju ekki nýta það til að gefa sjónskerta góða reynslu?

Það getur hjálpað til við framtíðarsvörun vefsvæðisins

Tækni er alltaf að breytast. Það sem er hér í dag gæti farið í nokkurn tíma, en SVG mun líklega vera um stund, ennþá. Svo lengi sem W3C setur alþjóðlega staðla iðnaðarins virðist það að SVG muni halda áfram að vera de-facto staðall fyrir vektor grafík í vafranum. Notaðu það núna og vefsíður þínar verða settar í góðan, langan tíma.

SVG námskeið og leiðbeiningar

Svo ertu sannfærður um það. SVG er flott, það er framtíðin, það er kominn tími til að læra það. Til allrar hamingju fyrir alla, þetta er internetið. Þú veist bara að fólk hefur eytt dýrmætum klukkustundum og skapað ókeypis þjálfunarefni fyrir þá sem vilja það. Fólk sem gerir slíkt er fólkið sem gerir internetið frábært.

Þá, auðvitað, fórum við og eyddu klukkustundum í gegnum mismunandi námskeið til að finna bestu þarna úti. Þú getur þakka okkur síðar. Fyrir nú, það er að lesa til að gera!

Athugaðu: Hafðu í huga að SVG skrár eru öll XML kóða, svo mörg þessara námskeiða eru forritari-áherslu eða bara hafa mikið af kóða í þeim. Við höfum tekið þátt í báðum námskeiði með áherslu á grunnatriði, og um sérstaka, skapandi notkun fyrir SVG, svo ekki sleppa þessum hluta.

• Using SVG: Chris Coyier hefur skrifað auðvelt að skilja CSS og HTML námskeið í mörg ár á css-tricks.com. Hans grunnur á SVG er ekki öðruvísi. Ég mun fela í sér tengsl við margar grunnskýringar og námskeið, en þetta er þar sem ég myndi byrja. Þessi kennsla inniheldur grunn leiðbeiningar fyrir Adobe Illustrator notendur.
• Hvernig á að byrja með SVG: Ég myndi vera fyrirgefðu ef ég tók ekki við Eigin framlag WDD til SVG menntunar. Ever-Fantastic Sara Vieira nær til að búa til grafík, flytja þær út, hreinsa kóðann, færa kynningareiginleika á CSS-skrám og fleira.
• Upplausn Sjálfstæðis við SVG: Ef það er tengt á vefnum, þá hefur Smashing Magazine líklega grein um það. Þeir ná yfir grunnatriði SVG sniði með venjulegum stíl og athygli að smáatriðum.
• Scalable Vector Graphics (röð af greinum): Hongkiat.com er annar úrræði fyrir gæði á vefnum og grafík tengdum nám. Í stað þess að gefa aðeins eina langa grein, hafa þau birt heil röð af þeim eftir Thoriq Firdaus. Enska er stundum svolítið skortur en leiðbeiningarnar eru ennþá skýrar og auðvelt að skilja.
• Sara Soueidan: Styling and Animation Scalable Vector Graphics með CSS: Þetta er myndskeið af kynningu gefið á CSSconf ESB 2014. Í henni, Sara Soueidan afla a einhver fjöldi af ábendingar, bragðarefur, og jafnvel nokkrar járnsög til að sækja stíl og fjör til SVG á vefnum. Það er hálftíma langur, svo vertu þægilegur og haltu eitthvað til að gera minnismiða með fyrir hendi. Það er alveg þess virði.
• Flytja SVG fyrir vefinn með Adobe Illustrator CC: Adobe Illustrator notendur ættu að Skoðaðu þetta. Eitt af eigin bloggsíðum Adobe gefur nákvæmlega og ég meina mjög nákvæmar leiðbeiningar um hvernig á að flytja SVG skrár á vefnum. Lærðu hvernig á að hagræða þeim niður í minnstu skráarstærð fyrir vefinn.
• SVGBasics: Þetta allt vefsvæði er hollur til að kenna fólki hvernig á að búa til SVG grafík frá grunni með XML. Ég mæli með þessu fyrir hverjir eru að takast á við raunverulegan endalok eða jafnvel framhlið - af hvaða vefsíðu sem er. Vitandi hvernig kóðinn virkar getur farið langt að því að leysa vandamál á flugu.
• SVG Tutorial eftir Jakob Jenkov: Annar verktaki-miðlægur sett af námskeiðum, hér. Stór munur? Höfundurinn fylgir vídeóútgáfum hvers kafla. Ef þú lærir betur með því að hafa bæði myndefni og hljóð til að fara með kennslustundina þína, þá er þetta góður staður til að byrja.
• The Simple Intro til SVG Animation: Titillinn segir það allt. David Walsh útskýrir hvernig á að setja upp þinn SVG þættir fyrir fjör, hvaða eiginleiki að nota fyrir mismunandi þætti, hvaða bókasöfn að nota, og fleira. Það er ekki fullur leiðbeining, en það mun kynna þér helstu hugtök sem þarf til að hefja hreyfimyndir.
• Kynning á SVG fjör: Þessi einkatími fer í smá smáatriði um nákvæmlega hvernig á að fara um hreyfingu SVG hlutanna. Að auki fjallar það um nokkrar algengar vandamál sem þú gætir þurft að hlaupa inn þegar það er fjörugt, svo það er þess virði að lesa.
• Hvernig á að: Flytja margar tákn til SVG skrár frá Adobe Illustrator: Búa til SVG tákn í Illustrator? Halda þeim öllum í einum Illustrator skrá? Flytja út þau öll að sérstakar skrár í einum smelli.
• Búa til texta með SVG-slóðum: Er nákvæmlega það sem það segir í titlinum. Fáðu hreyfimyndirnar þínar, kannski nota það á lógóti. Það vissulega lítur nógu vel út ...
• Búa til SVG tákn með CSS3 og JavaScript: Ein stærsta notkun SVG er fyrir tákn og með góðri ástæðu. Búðu til eina skrá, notaðu það hvar sem er á vefsvæðinu þínu eða appi, í hvaða stærð sem er. Hvað meira geturðu beðið um? Þessi einkatími sýnir þér hvernig á að laga þessi tákn á sveima.
• Að búa til sveigjanlegt SVG Infographic: Infographics eru ein af uppáhalds leiðum Internetsins til að neyta staðreyndar þessa dagana. Af hverju ekki gera þau óendanlega stigstærð? Kasta í sumum fjörum og þú gætir mjög vel blásið í hugum.
• Búa til SVG HTML Burger Button: Segðu hvað þú vilt um hamborgara hnappinn, það er líklega ekki að fara neitt. Þú getur líka nota SVG og fjör til að gera það shiniest, svalasta hamborgara hnappinn sem þú getur. Þetta fjallar um hvernig á að laga slóðir og högg til að gera einn hnapp bókstaflega snúa inn í annan, svo gefðu það útlit.
• Snap.svg Dæmi og leiðbeiningar: Þetta er leiðarvísir að nota Snap.svg JavaScript bókasafnið (sjá hlutann "Tools" hér fyrir neðan) hér að neðan. Það er hannað til að hjálpa þér að byrja með að búa til SVG þætti í JS og hreyfa þær, gera þær gagnvirkar og svo framvegis.
• Inngangur að Raphaël.js: Raphaël.js er eitt af stærstu SVG-tengdum JavaScript bókasöfnum þarna úti, og Þessi grein kennir þér hvernig á að nota það. (Aftur, sjá verkfærasniðið hér að neðan.)
• Hreyfimynd SVG Táknmynd: Mönnum virðist eins og hreyfimyndar tákn mikið, svo þú getur líka lært alla aðferðir til að gera þær sem þú getur. Hér Við sjáum Snap.svg bókasafnið í aðgerð einu sinni enn, eins og höfundurinn býr til og síðan animates, spilari "spilar" á spilara.
• Útsending í CSS og SVG - Klippapían Eign og Element: Hér er a ágætur langur grein um hvernig á að nota SVG úrklippa til að búa til myndir í formum og myndum inni í gríðarlegri texta. Þú gætir hugsað að nota það til að gera stóru ímynda fyrirsagnir sem eru SEO vingjarnlegur vegna þess að leitarvél vélmenni geta lesið þau.
• Gerð SVGs Móttækilegur með CSS: Þótt SVG skrár séu óendanlega stigstærð, geta þær aðferðir sem notaðar eru til að setja þær inn á vefsíðuna stundum valdið vandamálum. Þessi einkatími frá codrops útskýrir bara hvernig á að laga ýmis vandamál sem þú getur lent í.
• Mótaáhrif áhrif með SVG: Búðu til slétt og flottan útlit líflegur sveima áhrif fyrir fyrirmynd ímynd. ( Skoðaðu kynningu. )
• SVG grunnur fyrir vafra í dag með W3C: Ekki alveg síðast, og vissulega ekki síst, höfum við auðlind sem veitt er af fólki sem kom upp með allt SVG sniði í fyrsta sæti: W3C. Það er ekki grunntutorial eða kynning. Samkvæmt formáli var það búið til fyrir fagfólk forritara, grafískir hönnuðir með "sterk tæknileg beygð" og aðrir sem ekki huga að komast niður á kvíða.
• SVG Kennsla eftir MDN: Eins og SVGBasics, þetta er frekar mikið sett af námskeiðum, sem Mozilla Developer Network býður upp á. Umfangsmikið eins og það er, þó er sjálfsögðu sjálft talin "undir þróun". Til dæmis getur þetta nú sést á síðunni "Filters", sem er tómt. Samkvæmt síðunni sjálft er kennslan á frumstigi þróunar. Ef þú ert fær um að hjálpa þér með því að klípa í og ​​skrifa málsgrein eða tvö. Auka stig fyrir að skrifa heildarsíðu.

SVG Verkfæri

Eitt af mörgum kostum að opna eðli SVG er að einhver geti búið til hugbúnað fyrir það. Það eru engar takmarkanir á leyfisveitingu eða gjöld til að greiða, bara opinn staðall fyrir fólk að nota. Eins og þú gætir búist við, hafa margir forritarar gert það nákvæmlega.

Verkfæri til að búa til og nota SVG sniði í miklu mæli. Þau eru allt frá stórum hugbúnaðarpakka sem fela í sér möguleika á að flytja SVG sem hugsun, til teiknaforrita sem nota SVG sem aðalformið og fleira.

A fljótur Google leit að "SVG verkfæri" skilar "Um 37.000.000 niðurstöður", svo þú veist að það er mikið þarna úti.

Hvar ættirðu að byrja?

Premium forrit

Stóri nöfnin í grafík sköpun styðja SVG. Adobe Illustrator,Corel Draw, jafnvel ýmsar vörur frá Xara - Já, Xara er ennþá hlutur - þeir geta allir flutt inn, breytt og vistað skrár í sniði. (Illustrator hefur verið vitað að setja nokkrar skrýtnar hluti í SVG skrár, þó að þú verður að gæta varúðar við útflutningsstillingar.)

Inkscape

Ef þú ert ekki þegar að nota vektor grafík pakki, Inkscape er frábær staður til að byrja. Búið til árið 2003 sem gaffal af annarri opinn uppspretta verkefnis sem heitir Sodipodi (sem byggðist á enn einu OSS verkefni), hefur Inkscape orðið staðall fyrir ókeypis grafík hugbúnaðar á vettvangi. Það er ekki alveg eins lögun-fyllt sem Adobe Illustrator, en það er meira en nóg fyrir flesta vektor verkefni.

Serif DrawPlus Starter Edition

Serif er fyrirtæki sem gerir nokkuð gott grafík sköpun og skrifborð útgáfa hugbúnaður. Allar helstu hugbúnaðarútboð þeirra koma með ókeypis "Byrjendaútgáfur" og vektoratáknunarforritið þeirra er engin undantekning.

Ekki láta "Byrjendaútgáfan" svíkja þig, þó. Það gæti ekki haft allt sem atvinnuminillinn gerir, en það getur oft verið í vinnunni. Nema þú ert sýndarmaður í viðskiptum, getur þessi app og mun mæta þörfum þínum ... að því tilskildu að þú sért með Windows. Því miður er það ekki kross-pallur. Einnig þarf skráning fyrir niðurhalið.

Karbon

Hluti af Calligra skrifstofuforritinu, sem er fyrst og fremst fyrir Linux, Karbon er fullkomlega lögun vektor grafík ritstjóri. Það hefur alla helstu verkfæri, og nokkrar hlutir fyrir utan. Uppsetning á Mac og Windows er erfitt núna, þó ekki ómögulegt.

PrintDesign

Nafnið hljómar eins og hugbúnaðarpakka frá 90s, ég veit, en það er reyndar nokkuð nýtt. Í raun er það eftirmaður hins gamla sK1 myndatökuforrit sem hefur verið hætt. PrintDesign er nú á "sýnishorn" stigi og hefur bæði Linux og Windows útgáfur. Það er ekki tilbúið til framleiðsluframleiðslu ennþá, en það er verkefni þess virði að horfa á.

SVG-breyta

Nafnið er svolítið á nefinu, kannski en hugbúnaðurinn er meira en hæfur. SVG-breyta Byggir eingöngu á veftækni, sérstaklega HTML5, JavaScript og CSS. Þetta þýðir að það er engin virkni á netþjóni. Hvað er meira, það er Open Source, sem þýðir að þú getur sótt það, setti það á eigin netþjóni eða jafnvel notað það af skjáborðinu.

Það er með lögun listi nógu lengi til að gera mörg skrifborð app afbrýðisamur, og keyrir hraðar en flestir þeirra, svo gefa það hvirfil.

Janvas

Janvas er eina vefur-undirstaða app á þessum lista sem er ekki stranglega frjáls. Það er þrjátíu daga réttarhald og síðan áskrift kostar 26 evrur á ári. Ef ekkert af öðrum vefuppbyggðum SVG ritstjórum gerir þig hamingjusamur, gætirðu hugsanlega íhugað það.

Teiknibúnaðurinn er háþróaður og kunnugur nóg, sérhver breytu er breytt í hliðarstikunni og þú getur vistað skjölin þín á Google Drive. Þú getur búið til sniðmát, samvinnu á teikningsskjölum og jafnvel með CSS og JS skrár sem gerðar eru til að hafa samskipti við grafíkina.

Allt í allt er það gott tilboð.

Mondrian

Lítil. Sléttur. Einfalt. Mondrian er enn annar opinn uppspretta bjóða, og það er mun minni en flestir. Það hefur ekki einu sinni textatæki ... en það gerir einfaldar teikningar mjög vel. Þú getur opnað skrár úr harða diskinum eða vefslóð, grípa innbyggða kóða fyrir vefsvæðið þitt, eða bara vistað teikninguna þína sem SVG eða PNG. Það kann ekki að vera eins háþróað og önnur forrit, en það finnst bara gaman að nota og pennaverkið finnst eðlilegt.

Teikna SVG

Teikna SVG er annar vefur-undirstaða SVG ritstjóri með öllum þeim eiginleikum sem þú ættir alltaf að þurfa. Það er sterkasta punkturinn sem virðist vera hreinn hraði sem hann hleður og dregur hlutina. Því miður er notendaviðmótið alvarlega gölluð. Enn, það er þarna og það virkar, ættir þú einhvern tíma þörf á því.

SVG bókasöfn

Hönnuðir fagna! Við höfum nokkrar tenglar hér fyrir þig líka. Eftir allt saman er SVG ekki bara annað grafík snið. Það er kóða. Það er kóða sem hægt er að tengja við eða embed in. Það má hafa samskipti við og breyst á flugu. Með stærðfræði!

Snap.svg

Smella er JS bókasafn til að búa til og hafa samskipti við SVG. Það er hannað fyrir nútíma vafra. Yup, það þýðir að það styður aðeins IE9 + ... en ef eldri vafrar eru ekki áhyggjur skaltu fara í það.

Raphaël

Raphaël, ólíkt Snap, er samhæft við eldri vafra. Í raun getur það unnið með IE6 +, Safari 3+ og Chrome 5+. Ef þú ert að þróa eitthvað fyrir fyrirtæki kerfi þar sem notendur kunna að vera á eldri vélum, til dæmis, gæti Raphaël verið besti veðmálið þitt.

jQuery SVG

Eins og SVG og jQuery? Ég er ekki mjög hissa. jQuery hefur kannski týnt sumum athyglisverðum athygli sem það hafði einu sinni, en það er enn að fara í bókasafn fyrir marga af okkur.

jQuery SVG, þá er það alveg hugsanlega tappi sem þú ert að leita að. Það hefur virkni fyrir fjör, gerð myndrit og jafnvel eftirnafn. Það er rétt, viðbætur fyrir tappi. Stuðningur við vafra er IE9 +, en eldri útgáfur af IE er hægt að nota með viðeigandi vafraforritum sem eru settar upp.

Ég myndi ekki treysta á að notendur hafi þessar viðbætur þó.

SVGMagic

SVGMagic er drop-in, jQuery-undirstaða, lausn fyrir eldri vafra (IE 7 og 8). Í stað þess að búa til sjálfkrafa myndir fyrir hverja SVG skrá sem þú notar, getur þetta tappi búið til þau á flugu. Það annast bakgrunnsmyndina bara fínt líka.

Hvernig gerir það eitthvað af þessu? Það finnur hvort vafrinn notandans geti séð SVG. Ef svo er fer það að sofa. Ef ekki, snertir það PHP-handrit á þjóninum og segir það að búa til PNG-skrá af viðkomandi SVG-myndum með nauðsynlegum stærðum.

Þegar búið er að gera PHP-skriftin sendir vefslóðirnar til þessara tímabundinna baka mynda aftur í jQuery tappann og sjálfgefna slóðirnar eru skipt út. Þetta tekur augljóslega tíma, svo þú getur valið tiltekið staðbundna mynd sem á að sýna meðan viðskipti eiga sér stað.

Ein tilgáta: það getur ekki séð um margar myndir í einu. Þú vilt ekki nota þessa tækni á síðum með fleiri en nokkrum SVG skrám.

SVG.JS

Að lokum, hér er möguleiki fyrir bæjarmælin. SVG.JS vegur í aðeins 11,8kbs þegar gzipped. Þrátt fyrir litla stærð hennar styður það glæsilega fjölda eiginleika (eins og skráð er á verkefnisins síðu):

• Teiknimyndir um stærð, stöðu, umbreytingar, lit.
• Sársaukalaust eftirnafn þökk sé uppbyggingu mátunnar
• Ýmsar gagnlegar viðbætur í boði
• Sameinað api á milli gerðar gerðir með hreyfingu, stærð, miðju
• Bindandi viðburði við þætti
• Full stuðningur við ógagnsæðar grímur og úrklippur
• Textar slóðir, jafnvel líflegur
• Element hópar og setur
• Dynamic gradient

Lestu skjöl fyrir frekari upplýsingar.

Stock SVG

Ekki er allir sýningarstjóri. Að minnsta kosti hef ég vissulega aldrei verið góður í því. Þannig verða lagermyndir að ómetanlegri auðlind. Það getur verið erfitt að finna góða hluti þó. Það sem lítur ekki út eins og Microsoft clipart er oft takmörkuð í umfangi eða dýrt.

Ekki missa von, þó. Það er mikið af efni þarna úti sem er af góðum gæðum. Ef það uppfyllir ekki fullkomlega þarfir þínar, jæja, það er vektor list. Líkurnar eru á því að hægt sé að klifra til að mæta þörfum þínum ef þú ert með grunnþekkingu á grafík grafík hugbúnaðar.

SVG getur gert meira en bara lagermyndir, þó. Þú getur líka búið til mynstur, stórkostleg bakgrunn sem ekki borða upp bandbreidd og fleira. Við skulum skoða hvað fólk hefur gert fyrir okkur:

SVG Clipart á openclipart.com

SVG, sem opið snið, hefur marga opinn áhugamenn sem aðdáendur. Þess vegna er það eitt af aðalformunum sem notuð eru í því sem gæti verið stærsta safn ókeypis myndbandalista þarna úti.

Og mikið af því er clipart-ish. Og mikið af því er áhugamaður. Það eru nokkrar góðar grafík þó, ef þú lítur út. Hey, það er ókeypis.

SVG lager

SVG lager er lítill staður, með tiltölulega lítið, en frábært safn. Það eru að mestu leyti tákn og tækjabúnaður, en þeir eru allar hágæða. Ef þú þarft annaðhvort af þessum tveimur hlutum skaltu byrja hér.

SVG auðlindir á deviantart.com

Ah DeviantArt, þessi risastór samfélag er enn að fara sterk. Höfðu í myndasafnið og leitaðu að SVG (eða smelltu á tengilinn hér að ofan). Aftur, gæði mun breytilegt, en það er gott efni þarna ef þú hefur tíma til að leita.

SVG Patterns Gallery

Lítið gallerí fullt af SVG-undirstaða mynstur. Það er hannað sem fleiri sýningar, en heimildaskráin er allt þar til þæginda.

SVG mynstur frá svgeneration.com

svgeneration.com inniheldur mikið SVG mynstur fyrir notkun þína. Síðan er með breytingartillögur fyrir hvert mynstur og þú getur breytt kóðanum beint á síðunni til að sjá breytingar þínar í aðgerð. Ekki aðeins er þetta frábær úrræði fyrir tilbúnar mynstur, en þú getur fundið út mikið um hvernig þau eru gerð í fyrsta sæti.

SVG Clipart

Listin á þetta vefsvæði er greinilega gamaldags teiknimynd stíl. Það er alveg satt, það er ekki það sem allir leita að, en það er þarna fyrir þá sem vilja að þessi klassíska finnst í myndunum sínum.

SVG Studio

SVG Studio er að bjóða upp á þúsundir af myndum með greinilega nútíma tilfinningu. Þú getur keypt þau í litlum undirhópum eða hlaðið niður öllu versluninni í einu. Það mun setja þig aftur 500 USD, sem fyrir 3000 myndir, er ekki svo slæmt samkomulag.

SVG á stærri hlutabréfum

Ég get ekki sagt mikið um listina sem boðin er á hverju vefsvæði, því það breytist mikið af framlagi án heildar stíl. Stærstu nöfnin eru istockphoto.com,shutterstock.com,bigstockphoto.com, og canstockphoto.com.

SVG Inspiration

Við getum lesið allar kynningar sem við viljum og fylgið öllum námskeiðum þarna úti. Við getum orðið sérfræðingar í hverju þætti SVG forskriftarinnar, en samt gætum við samt verið mjög leiðinlegt um það. Við verðum að skoða alla möguleika í hvaða tækni sem er til að nýta það mest.

Það er oft auðveldara sagt en gert, hins vegar. Það hjálpar oft að hafa viðmiðunarpunkt, eitthvað ótrúlegt að horfa á og sýna okkur nákvæmlega hvers konar ógnvekjandi hluti sem við getum gert með það sem við höfum. Það er hvaða staður eins Webcreme gerði fyrir vefhönnun almennt. Þetta er hvað CSS Zen Garden, og öll CSS galleríin sem komu eftir það gerðu fyrir CSS skipulag.

Frá og með, ég hef ekki fundið neinar galleríssíður tileinkað því sem hægt er að ná með SVG ásamt öðrum vefur tækni, og það gæti hjálpað. Í millitíðinni er hér sýning um ógnvekjandi efni sem við höfum fundið:

Snap birta auglýsingu

Þetta dæmi er hluti af Snap.svg safn á CodePen. Þarftu fullkomið dæmi um hvernig SVG gæti verið notað til að gjörbreyta netauglýsingum? Þetta er það.

Hugsaðu um það: Sumir auglýsingafyrirtæki selja enn auglýsingar á grundvelli punkta. Þetta er ekkert vit í aldri óendanlegs breytileika í skjástærð og Retina skjár til að ræsa. Þangað til við komum upp á betri kerfi en sjónrænar auglýsingar, gæti SVG að minnsta kosti hjálpað okkur að gera auglýsingar passar inn í móttækilegu eðli vefhönnunar.

Sjá pennann Snap birta auglýsingu eftir CJ Gammon @ cggammon ) á CodePen .

Jtop skrifborð tengi

Mozilla Developer Network, eining sem ég haldi áfram að keyra í og ​​ég er að rannsaka vefur tækni almennt, hefur einnig framleitt nokkur áhugaverð efni sem gerðar eru með SVG. Til dæmis fóru þeir og gerðu heilt skrifborð tengi byggt alfarið á veftækni eins og HTML5, JS, SVG og CSS. Það er fljótlegt, sérhannaðar, og ég vildi næstum að það væri hluti af alvöru OS.

Tími í hugleiðingu

Fært okkur með ShinyDemos (sem er síðan komið til okkar af fólki á Opera ) Tími í hugleiðingu mun bókstaflega bara leggja yfir klukku yfir lifandi fæða frá vefmyndavélinni þinni. Jæja, ef þú gefur það leyfi þitt, og þú hefur í raun myndavél, samt. En málið er að það sýnir hvernig SVG grímur er hægt að yfirlagða á næstum öllu.

oblurlay

Með blöndu af CSS, SVG og jQuery, oblurlay skapar nákvæmlega hvað nafnið gefur til kynna: óskýr yfirborð, iOS stíl. Það er jQuery tappi, svo framkvæmd er ekki erfitt, og það sýnir snyrtilega hvernig SVG síur geta sótt um alls konar hluti, ekki bara SVG hlutirnar sjálfir.

Codrops demos

Codrops (áður nefnt í kennsluhlutanum) hefur framleitt nokkuð heillandi, áhrifamikill og einfaldlega falleg kynningar til að sýna fram á hvað SVG getur gert. Hver eiga skilið eigin rétta hluti þessarar greinar, en það eru svo margar sem ég legg þeim í eitt. Ef þú lítur ekki á neitt annað úr þessum "Inspiration" kafla skaltu skoða þær. Skoðaðu kynningar og hlaða niður skrárnar. Þá fara þakka strákunum á Codrops. Þeir eiga skilið það.

Ath: Ekki eru öll þessi SVG-brennidepill, en þeir nota öll SVG grafík á einhvern hátt.

Page Loading Effects : a setja af skapandi síðu hleðsla áhrif sem nota SVG hreyfimyndir með Snap.svg. Hugmyndin er að sýna yfirborð með áhugaverðri mynd fjör meðan nýtt efni verður hlaðið.

Hugmyndir um lúmskur sveifluáhrif : Sumir skapandi og lúmskur sveifluvirkni innblástur með nútíma CSS tækni, þ.mt 3D þýða og gervi þætti. Þeir nota einnig SVG. Farðu að skoða kynningu fyrir annað sett af áhrifum.

SVG Teikning Teiknimyndir : smá tilraun sem kannar notkun SVG línu teikna fjör til að fara fram á útlit grafík eða vefsíðu þætti, herma að hlaða þeim.

Off-Canvas Valmynd Áhrif : Sumar innblástur fyrir valmyndaráhrif á striga og stíll með því að nota CSS umbreytingar og SVG slóðarmyndir.

Tooltip Styles Inspiration : lítið safn af ýmsum sveigjanlegum verkfærum og áhrifum fyrir innblástur þinn. Með því að nota CSS umbreytingar, ramma-radíus og SVG form, getum við búið til nútímalegt útlit og áhugavert tól.

Tilkynningarstíll Innblástur : Einföld hugmyndir og áhrif fyrir áberandi heimasíðu tilkynningar. Lítið handrit er notað til að sýna fram á nokkrar stíll og CSS hreyfimyndir eru notaðar fyrir áhrifin.

Inspiration for Custom Select Elements : nokkrar innblástur til að stilla sérsniðna útgáfu af völdu hlutanum. Það eru margar möguleikar og í dag erum við að skoða nokkrar hugmyndir um hvernig á að láta notandann velja val í stíl.

Inspiration for Inline Anchor Styles : Sumar innblástur fyrir skapandi og nútíma inline akkeri stíl og sveima áhrif með því að nota mismunandi aðferðir eins og gervi-umbreytingar og SVGs.

Örvælisstíll : Sumar innblástur fyrir stýrihnappana í örvum og sveimaáhrifum með því að nota SVG tákn fyrir örvarnar og CSS umbreytingar og hreyfimyndir fyrir áhrifum.

Wobbly Slideshow áhrif : skyggnur í þessari myndasýningu wobble eins og þeir flytja. Áhrifið byggist á Dribbble skot Sergey Valiukh og var gert með því að nota Snap.svg og morphing SVG slóðir ... Vinsamlegast athugaðu að þetta er mjög tilraunalega og prófað aðeins í nýjustu útgáfum af nútíma vafra.

Umbúðir það upp

SVG, en ekki enn eitt af mest notuðu myndasniðunum þarna úti, er vel skjalfest, mjög studd og það er stór hluti af framtíð Internetinu. Ef þú ert ekki að nota það sem hluti af hönnunarferlinu þínu, þá er það líklega tími til að byrja.

Valin mynd, óaðfinnanlegur vektor mynd um Shutterstock.

• ← 10 Free WordPress viðbætur fyrir febrúar 2015
• 21 Samstarf Verkfæri til að hagræða hópvinnu þína →