Den ultimate guiden til SVG

Tenk deg at du kunne legge inn et bilde på en nettside, skalere den siden til en hvilken som helst størrelse, og aldri miste bildekvalitet. Vel, det kan du. Det er helt mulig, vi har nettopp ikke gjort det så mye som vi burde.

Bilder med faste størrelser som JPG-filer, GIF og PNG har sin plass på nettet, men deres iboende statiske natur er i konflikt med måten weben går på. Når vi flytter til lydhør, flytende design, jo mer irriterende blir det å håndtere bilder som er fundamentalt ikke lydhør. Det er frustrerende uten tro når jeg innser at det blir best praksis å lage og betjene flere forskjellige versjoner av hvert bilde på nettstedet ditt.

Jeg skjønner at det er gode tekniske grunner for dette. Det vil vare lenge før noen skaper et uendelig skaleringsbilde, for eksempel. Imidlertid er bildene ikke det beste og alle bilder. Vector grafikk har kommet en veldig lang vei. De går langt enda.

De kan være vanskeligere å skaffe seg, fordi ikke hver webdesigner er en illustratør. Bilder er rikelig og godt lager bilder er lette å finne. Vector grafikk, derimot, har ofte lav kvalitet, eller kanskje kan du bare ikke finne den rette. Ansatte illustratører er dyre.

Men som støtte for vektorgrafikk vokser på nettet, så vil deres bruk. Det er på tide for alle å lære å implementere dem på sine nettsteder, og bruke dem kreativt. Bilder som responsive som våre nettsider er fremtiden.

Møt SVG-filen ...

Hva er SVG og hvorfor skal du bruke den?

Ok, for nybegynnere blant oss står SVG for skalerbar vektorgrafik. SVG-filer er ganske enkle ting, teoretisk. De er bare tekstfiler med en gjeng med XML inne. Hver bit av visuell informasjon i en SVG-fil er definert av menneskelig lesbar kode, som deretter beregnes og gjengis av nettleseren, grafikkprogramvaren etc.

Dette betyr at selv om SVG-filer ikke er så komplekse som for eksempel et fotografi formatert som en JPG, er de uendelig mer fleksible. De kan endres manuelt i et tekstredigeringsprogram. De kan endres med kode, for eksempel JavaScript og CSS. De kan komprimeres til nesten latterlig små størrelser.

Med andre ord, de er spesielt utviklet for å brukes sammen med andre webteknologier. De er perfekte for oss.

På slutten av 90-tallet introduserte Macromedia og Microsoft (og andre selskaper) VML , og deretter presenterte Adobe (og andre selskaper) PGML som mulige løsninger for vektorbilder på nettsteder til W3C (og muligens som alternativer til det gamle PostScript-formatet). W3C sa, "Nei, vi skal gjøre vår egen ting; men takk for ideene! "Resultatet var SVG Arbeidsgruppe.

I september 2001 ble SVG 1.0 en offisiell W3C-anbefaling, og resten er historie. På en måte. Internet Explorer lagret seg bak ved å vedta SVG-formatet, overraskende ingen. Siden da har det vært oppdateringer rettet mot mobile enheter, og mer med avklaringer.

Selv nå oppretter SVG-arbeidsgruppen SVG 2, som vil inkludere mer integrasjonsintegrasjon med ting som HTML5, CSS og WOFF-skriftformatet.

Den har støtte

Den eneste versjonen av Internet Explorer du trenger å bekymre deg for akkurat nå er IE8. Det er det. Alle andre har mer eller mindre full SVG-støtte. Ja, det kan hende du får feil i noen tilfeller, selv i de "gode" nettleserne, men det er fortsatt verdt det. Ikke bare vil de jobbe rundt dem, holde problemløsningskvaliteten skarp, men jo mer vi bruker denne teknologien, vil flere nettlesere utviklere støtte den.

Sjekk ut caniuse.com for en mer grundig analyse av hva som fungerer og hva som ikke er i hvilke nettlesere.

Alt er responsivt ... eller det burde være

Internett-teknologi har gått langt, langt utover de statiske nettstedene vi pleide å vite. Det er på tide for bildene våre å komme seg opp, ren og enkel. Når du må lage et ikon, bruk SVG. Når du må bruke en illustrasjon, gå til SVG hvis du kan. Hvis du vil ha en abstrakt, men fortsatt enkel nettsidebakgrunn, bruk SVG.

Jeg er ikke en fan av retina-skjermteknologien, spesielt fordi jeg ikke har en. Det er ikke sjalusi. Vel, det er ikke bare sjalusi. Det enkle faktum er at Retina-skjermer har gått og gjort betjening av bilder som er mye mer kompliserte. SVG, som er uendelig skalerbar, kan bidra til å minimere problemet.

tilgjengelighet

Brukere som er synshemmede, surfer generelt på nettet med alt zoomet inn litt. Når vanlige bilder blir zoomet inn, mister de kvalitet. SVG vil ikke gjøre det, så hvorfor ikke dra nytte av det for å gi synskadede en kvalitetserfaring?

Det kan bidra til fremtidssikret ditt nettsted

Teknologi endrer seg alltid. Det som er her i dag kan være borte om en stund, men SVG vil trolig være rundt en stund, enda. Så lenge W3C setter globale industristandarder, virker det som at SVG vil fortsette å være de facto-standarden for vektorgrafikk i nettleseren. Bruk den nå, og nettstedene dine vil bli satt i god, lang tid.

SVG Tutorials & How-tos

Så du er overbevist. SVG er kult, det er fremtiden, det er på tide å lære det. Heldigvis for alle, dette er Internett. Du vet bare at folk har tilbrakt dyrebare timer på timer, og skaper gratis opplæringsmateriell for alle som ønsker det. Folk som gjør det slags ting, er de som gjør internett fantastisk.

Så, selvfølgelig, gikk vi og tilbrakte timer med å se gjennom de forskjellige opplæringene for å finne de beste der ute. Du kan takke oss senere. For nå er det lesing som skal gjøres!

Merk: Husk at SVG-filer er alle XML-koden, så mange av disse opplæringsprogrammene er utviklerfokuserte eller bare har mye kode i dem. Vi har tatt med begge opplæringsprogrammene fokusert på det grunnleggende, og på spesifikke, kreative bruksområder for SVG, så ikke hopp over denne delen.

• Bruke SVG: Chris Coyier har skrevet enkle å forstå CSS og HTML tutorials i mange år på css-tricks.com. Hans primer på SVG er ikke annerledes. Jeg vil inkludere koblinger til mange grunnleggende forklaringer og opplæringsprogrammer, men det er her jeg begynner. Denne opplæringen inneholder grunnleggende instruksjoner for Adobe Illustrator-brukere.
• Hvordan komme i gang med SVG: Jeg ville være remiss hvis jeg ikke inkluderte WDDs eget bidrag til SVG utdanning. Den helt fantastiske Sara Vieira dekker å lage grafikk, eksportere dem, rydde opp koden, flytte presentasjonsegenskaper til CSS-filer og mer.
• Løsning Uavhengighet Med SVG: Hvis det er web-relatert, har Smashing Magazine trolig en artikkel om det. De dekker grunnleggende om SVG-formatet med sin vanlige stil og oppmerksomhet på detaljer.
• Skalerbar vektorgrafik (en serie artikler): Hongkiat.com er en annen ressurs for kvalitet på web- og grafikkrelatert læring. I stedet for bare å gi en lang artikkel, har de publisert en hel serie av dem av Thoriq Firdaus. Engelsk er noen ganger litt mangler, men instruksjonene er fremdeles klare og enkle å forstå.
• Sara Soueidan: Styling og animering Scalable Vector Graphics med CSS: Dette er en video av en presentasjon gitt på CSSconf EU 2014. I den gir Sara Soueidan en rekke tips, triks og til og med noen hack for å bruke stiler og animasjoner til SVG på nettet. Det er en halv time lang, så bli skjegg og hold noe å lage notater med på hånden. Det er helt verdt tiden din.
• Eksporterer SVG til nettet med Adobe Illustrator CC: Adobe Illustrator-brukere bør Sjekk ut dette. En av Adobes egne blogger gir detaljert informasjon, og jeg mener veldig detaljerte, instruksjoner om hvordan du eksporterer SVG-filer til nettet. Lær hvordan du optimaliserer dem til den minste filstørrelsen på nettet.
• SVGBasics: Dette hele nettstedet er dedikert til å lære folk hvordan man lager SVG-grafikk fra bunnen av med XML. Jeg anbefaler dette for hvem som arbeider med den faktiske back-end - eller til og med front-end - av ethvert nettsted. Å vite hvordan koden fungerer kan gå langt for å løse problemer i fly.
• SVG Tutorial fra Jakob Jenkov: En annen utvikler-sentrisk sett med opplæringsprogrammer, her. Den store forskjellen? Forfatteren inneholdt videoversjoner av hver seksjon. Hvis du lærer deg bedre ved å ha både visuals og lyd å gå med leksjonene dine, er dette et godt sted å starte.
• Den enkle Intro til SVG Animasjon: Tittelen sier alt. David Walsh forklarer hvordan du setter opp din SVG-elementer for animasjon, hvilke attributter som skal brukes til forskjellige elementer, hvilke biblioteker som skal brukes, og mer. Det er ikke en full guide, men det vil introdusere deg til de grunnleggende konseptene som er nødvendige for å begynne å animere.
• En introduksjon til SVG animasjon: Denne opplæringen går inn i litt mer detaljert informasjon om hvordan du skal gå om å animere SVG-objektene dine. På toppen av det adresserer det noen vanlige problemer som du kan komme inn i når du animerer, så det er verdt å lese.
• Slik: Eksporter flere ikoner til SVG-filer fra Adobe Illustrator: Opprett et sett med SVG-ikoner i Illustrator? Holder dem alle i en Illustrator-fil? Eksporter dem alle til sine separate filer med ett enkelt klikk.
• Animer tekst med SVG-stier: Gjør akkurat det som står i tittelen. Få animasjonen din på, kanskje bruk den på en logotype. Det sikkert ser kult nok ut ...
• Animer SVG-ikoner med CSS3 og JavaScript: En av SVGs største bruksområder er for ikoner, og med god grunn. Lag en fil, bruk den hvor som helst på nettstedet ditt eller i appen, uansett størrelse. Hva mer kan du be om? Denne opplæringen viser deg hvordan du animerer disse ikonene på svingeren.
• Opprette en skalerbar SVG Infographic: Infographics er en av internettets favoritt måter å konsumere fakta i disse dager. Hvorfor ikke gjøre dem uendelig skalerbare? Kast litt animasjon, og du kan godt blåse noe sinn.
• Å lage en SVG HTML Burger Button: Si hva du vil om hamburger-knappen, det går nok ikke hvor som helst. Du kan også bruk SVG og animasjon for å gjøre den den skinneste, kuleste hamburgerknappen du kan. Dette dekker hvordan å animere stier og streker for å få en knapp til å bli en annen, så gi den en titt.
• Snap.svg Eksempler og opplæringsprogrammer: Dette er en veiledning å bruke Snap.svg JavaScript-biblioteket (se delen "Verktøy" nedenfor) nedenfor. Den er designet for å hjelpe deg med å komme i gang med å lage SVG-elementer i JS, og animere dem, gjøre dem interaktive og så videre.
• Introduksjon til Raphaël.js: Raphaël.js er et av de store SVG-relaterte JavaScript-bibliotekene der ute, og denne artikkelen lærer deg hvordan du bruker den. (Igjen, se Verktøy delen nedenfor.)
• Animert SVG-ikon: Folk ser ut som animerte ikoner mye, så du kan også lære alle tilnærminger til å lage dem som du kan. Her Vi ser på Snap.svg-biblioteket enda en gang, som forfatteren oppretter, og deretter animerer, en medieavspiller "play" -knapp.
• Klipping i CSS og SVG - Klippestien Egenskap og Element: Her er en fin lang artikkel om hvordan du bruker SVG-klipping for å lage bilder i former, og bilder i stor tekst. Du kan vurdere å bruke den til å lage store fancy overskrifter som er SEO-vennlige fordi søkemotoren kan lese dem.
• Å lage SVGs Responsive With CSS: Selv om SVG-filer er uendelig skalerbare, kan metodene som brukes til å sette dem inn i en nettside, noen ganger føre til problemer. Denne opplæringen fra codrops forklarer hvordan du løser de ulike problemene du kan støte på.
• Form Hover Effect med SVG: Lag en jevn og stilig utseende animert svever effekt for forhåndsvisning av bilder. ( Sjekk ut demoen. )
• En SVG-primer for dagens browsere av W3C: Ikke helt sist, og absolutt ikke minst, har vi en ressurs gitt av folkene som kom opp med hele SVG-formatet i utgangspunktet: W3C. Det er ikke en grunnleggende opplæring eller en introduksjon. I følge forordet ble det laget for profesjonelle programmerere, grafiske designere med "en sterk teknisk bøyd", og andre som ikke har noe imot å komme seg ned til nitty gritty.
• SVG Tutorial fra MDN: Som SVGBasics, er dette en ganske omfattende sett med opplæringsprogrammer, levert av Mozilla Developer Network. Omfattende som det er, selvfølgelig, er selvstudiet vurdert som "under utvikling". For eksempel kan dette for øyeblikket ses på siden "Filters", som er tom. Ifølge selve siden er opplæringen i et tidlig utviklingsstadium. Hvis du er i stand, kan du hjelpe deg med å chippe inn og skrive et avsnitt eller to. Ekstra poeng for å skrive en hel side.

SVG Tools

En av de mange fordelene ved SVGs åpne natur er at alle kan lage programvare for det. Det er ingen lisensbegrensninger eller avgifter å betale, bare en åpen standard for folk å bruke. Som du kanskje regner med, har mange utviklere gjort akkurat det.

Verktøy for å opprette og bruke SVG-formatet er i overflod. De spenner fra store programvarepakker som inkluderer muligheten til å eksportere SVG som en ettertanke, til vektor tegneapper som bruker SVG som deres primære format, og mer.

Et raskt Google-søk etter "SVG-verktøy" returnerer "Om 37.000.000 resultater", så du vet at det er mye der ute.

Hvor skal du da begynne?

Premium applikasjoner

De store navnene i grafikkopprettelsen støtter alle SVG. Adobe Illustrator,Corel Draw, selv forskjellige produkter fra Xara - Ja, Xara er fortsatt en ting - de kan alle importere, redigere og lagre filer i formatet. (Illustrator har vært kjent for å sette noen merkelige ting i SVG-filer, men du må derfor være forsiktig med eksportinnstillingene.)

Inkscape

Hvis du ikke allerede bruker en vektorgrafikpakke, Inkscape er et fantastisk sted å starte. Opprettet i 2003 som en gaffel av et annet åpen kildekode-prosjekt, kalt Sodipodi (som var basert på enda et OSS-prosjekt), har Inkscape blitt standarden for gratis, grafisk programvare på tvers av plattformer. Det er ikke helt så funksjonsfylt som Adobe Illustrator, men det er mer enn nok for de fleste vektorprosjekter.

Serif DrawPlus Starter Edition

Serif er et selskap som lager ganske god grafikkopprettelse og desktop publishing programvare. Alle de viktigste programvarene deres leveres med gratis "Starter Editions", og deres vektor tegneapp er ikke noe unntak.

Ikke la "Starter Edition" lure deg, skjønt. Det kan ikke ha alt proversjonen gjør, men det kan få jobben gjort i de fleste tilfeller. Med mindre du er en illustrator ved handel, kan denne appen og vil møte dine behov ... forutsatt at du er på Windows. Dessverre er det ikke kryssplattform. Også, registrering er nødvendig for nedlastingen.

Karbon

En del av Calligras kontorpakke, som hovedsakelig er for Linux, Karbon er en fullverdig vektorgrafikredigerer. Det har alle de grunnleggende verktøyene, og noen få ting dessuten. Installasjon på Mac og Windows er vanskelig for tiden, men ikke umulig.

PrintDesign

Navnet høres ut som en programvarepakke fra 90-tallet, jeg vet, men det er faktisk ganske nytt. Faktisk er det etterfølgeren til den gamle sK1 illustrasjonsappen, som er utgått. PrintDesign er for øyeblikket i "forhåndsvisning" -fasen, og har både Linux- og Windows-versjoner. Det er ikke klar for produksjon, men det er et prosjekt verdt å se på.

SVG-redigering

Navnet er litt på nesen, kanskje, men programvaren er mer enn kapabel. SVG-redigering Er basert helt på webteknologi, spesielt HTML5, JavaScript og CSS. Dette betyr at det ikke er noen server-side funksjonalitet. I tillegg er det åpen kildekode, som betyr at du kan laste den ned, sette den på egen server, eller bare bruke den fra skrivebordet.

Den har en funksjonsliste lenge nok til å gjøre mange en desktop app sjalu, og går raskere enn de fleste av dem, så gi det en virvel.

Janvas

Janvas er den eneste nettbaserte appen på denne listen som ikke er strengt fri. Det er en tretti-dagers prøveperiode, hvoretter et abonnement koster 26 euro per år. Hvis ingen av de andre nettbaserte SVG-redaktørene gjør deg glad, kan du faktisk vurdere det.

Tegneverktøyene er avanserte og kjent nok, hver variabel er redigerbar i sidefeltet, og du kan lagre dokumentene dine til Google Disk. Du kan opprette maler, samarbeide på tegningsdokumenter, og til og med inkludere CSS og JS-filer laget for å samhandle med grafikken.

Alt i alt er det et solid tilbud.

Mondrian

Liten. Elegant. Enkel. Mondrian er enda en åpen kilde tilbyr, og det er mye mindre enn de fleste. Det har ikke engang et tekstverktøy ... men det gjør enkle tegninger veldig bra. Du kan åpne filer fra harddisken eller en nettadresse, ta tak i den integrerte koden for nettstedet ditt, eller bare lagre tegningen som SVG eller PNG. Det kan ikke være så avansert som andre apps, men det føles bare fint å bruke, og pennverktøyet føles naturlig.

Tegn SVG

Tegn SVG er en annen web-basert SVG-editor med alle funksjonene du noensinne trenger. Det sterkeste punktet synes å være den hurtige hastigheten som den laster og trekker ting på. Dessverre er brukergrensesnittet imidlertid alvorlig feil. Likevel er det der og det fungerer, bør du noen gang trenge det.

SVG-biblioteker

Utviklere gleder seg! Vi har noen lenker her for deg også. SVG er jo ikke bare et annet grafikkformat. Det er kode. Det er kode som kan kobles til eller innebygd. Det kan samhandles med og endres i farten. Med matte!

Snap.svg

Snap er et JS-bibliotek for å generere og samhandle med SVG. Den er designet for moderne nettlesere. Yup, det betyr at den bare støtter IE9 + ... men hvis eldre nettlesere ikke er din bekymring, gå for det.

Raphaël

Raphaël, i motsetning til Snap, er kompatibel med eldre nettlesere. Faktisk kan det fungere med IE6 +, Safari 3+ og Chrome 5+. Hvis du utvikler noe for et bedriftssystem der brukere kan være på eldre maskiner, kan Raphaël for eksempel være din beste innsats.

jQuery SVG

Som SVG og jQuery? Jeg er ikke veldig overrasket. jQuery har kanskje mistet noen av spotlight oppmerksomhet som den en gang hadde, men det er fortsatt et go-to-bibliotek for mange av oss.

jQuery SVG, så er det muligens pluginet du leter etter. Den har funksjoner for animasjoner, lage grafer og til og med utvidelser. Det er riktig, utvidelser for et plugin. Nettleserstøtte er IE9 +, men eldre versjoner av IE kan brukes med de aktuelle nettleserpluggene installert.

Jeg ville ikke være avhengig av at brukerne har disse pluginene, skjønt.

SVGMagic

SVGMagic er en drop-in, jQuery-basert løsning for eldre nettlesere (IE 7 og 8). I stedet for å manuelt lage nedbaksbilder for hver SVG-fil du bruker, kan dette pluginet generere dem på fluen. Det håndterer også bakgrunnsbilder.

Hvordan gjør det noe av dette? Det oppdager om brukerens nettleser kan håndtere SVG. I så fall går det å sove. Hvis ikke, kontakter den et PHP-script på server-siden og forteller det å opprette en PNG-fil av de aktuelle SVG-bildene med de nødvendige dimensjonene.

Når en gang er ferdig, sender PHP-skript nettadressene til disse midlertidige nedlastingsbildene tilbake til jQuery-pluginet, og standardadressene blir erstattet. Dette tar tydeligvis tid, så du kan eventuelt angi et plassholderbilde som skal vises mens konverteringen finner sted.

En advarsel: for øyeblikket kan det ikke håndtere for mange bilder samtidig. Du vil ikke bruke denne teknikken på sider med mer enn noen få SVG-filer.

SVG.JS

Til slutt, her er et alternativ for byte-tellere. SVG.JS veier inn på bare 11,8kbs når gzipped. Til tross for sin lille størrelse støtter den et imponerende antall funksjoner (som oppført på prosjektets side):

• Animasjoner på størrelse, posisjon, transformasjoner, farge
• Smerteløs forlengelse takket være den modulære strukturen
• Ulike nyttige plugins tilgjengelig
• Forenet api mellom formetyper med bevegelse, størrelse, senter
• Bindende hendelser til elementer
• Full støtte for opasitetsmasker og utklippsstier
• Tekstbaner, selv animerte
• Elementgrupper og sett
• Dynamiske gradienter

Les dokumentasjon for mer info.

Stock SVG

Ikke alle er en illustratør. Jeg har i hvert fall aldri vært bra på det. Dermed blir lagerillustrasjoner en uvurderlig ressurs. Det kan imidlertid være vanskelig å finne gode ting, skjønt. Det som ikke ser ut som Microsoft clipart, er ofte begrenset, eller dyrt.

Ikke tap håpet, skjønt. Det er mange ting der ute som er av god kvalitet. Hvis det ikke passer perfekt til dine behov, vel, det er vektorkunst. Sjansen er at den kan tweaked for å dekke dine behov hvis du har grunnleggende kunnskap om vektorgrafikprogramvare.

SVG kan gjøre mer enn bare lager illustrasjoner, skjønt. Du kan også lage mønstre, store fancy bakgrunner som ikke spiser opp båndbredde og mer. La oss se på hva folk har gjort for resten av oss:

SVG Clipart på openclipart.com

SVG, som et åpent format, har mange open source-entusiaster som fans. Som et resultat er det et av de primære formatene som brukes i det som kan være den største samlingen av gratis utklippsbilder der ute.

Og mye av det er clipart-ish. Og mye av det er amatørarbeid. Det er noen kvalitetsgrafikk skjønt, hvis du ser. Hei, det er gratis.

SVG lager

SVG lager er et lite nettsted, med en relativt liten, men utmerket samling. Det er for det meste ikoner og enheter mockups, men de er av høy kvalitet. Hvis du trenger noen av disse to tingene, start her.

SVG ressurser på deviantart.com

ah DeviantArt, det gigantiske samfunnet går fortsatt sterkt. Gå til kategorien lagerbilder og søk etter SVG (eller klikk på lenken over). Igjen, kvaliteten vil variere, men det er gode ting der hvis du har tid til å se.

SVG Mønstre Galleri

Et lite galleri full av SVG-baserte mønstre. Den er designet som mer av et showcase, men kildefilene er alle der for din bekvemmelighet.

SVG Mønstre fra svgeneration.com

svgeneration.com inneholder mange SVG mønstre for din bruk. Nettstedet leveres med redigeringsalternativer for hvert mønster, og du kan redigere koden direkte på nettstedet for å se endringene i handlingen. Ikke bare er dette en stor ressurs for prefabrikkerte mønstre, men du kan finne ut mye om hvordan de er laget i utgangspunktet.

SVG Clipart

Kunsten på denne siden er tydelig gammeldags tegneserie stil. Det vil helt ærlig, ikke være det som alle leter etter, men det er der for de som vil ha den klassiske følelsen av deres illustrasjoner.

SVG Studio

SVG Studio tilbyr tusenvis av illustrasjoner med en tydelig moderne følelse. Du kan kjøpe dem i små undergrupper, eller laste ned hele katalogen på en gang. Det vil sette deg tilbake 500 USD, som for 3000 illustrasjoner er ikke så ille en avtale.

SVG på de større aksjene

Jeg kan ikke si mye om kunsten som tilbys på hvert nettsted, fordi det varierer mye av bidragsyteren uten generell stil. De største navnene er istockphoto.com,shutterstock.com,bigstockphoto.com, og canstockphoto.com.

SVG Inspirasjon

Vi kan lese alle introduksjonene vi ønsker, og følg alle opplæringsprogrammer der ute. Vi kan bli eksperter på hvert aspekt av SVG-spesifikasjonen, og likevel kan vi fortsatt være utrolig kjedelige om det. Vi må se på alt potensialet i en hvilken som helst teknologi for å få mest mulig ut av det.

Det er ofte lettere sagt enn gjort, men. Det hjelper ofte å ha et referansepunkt, noe som er utrolig å se på, og vise oss nøyaktig hva slags fantastiske ting vi kan gjøre med det vi har. Det er hvilke nettsteder som Webcreme gjorde for webdesign generelt. Det er hva CSS Zen Garden, og alle CSS-galleriene som kom etter det, gjorde for CSS-layouter.

Fra og med, har jeg ikke funnet noen galleri sider dedikert til hva som kan oppnås via SVG kombinert med andre webteknologier, og det kan hjelpe. I mellomtiden er her et showcase av fantastiske ting vi har funnet:

Snap Display Ad

Dette eksemplet er en del av Snap.svg samling på CodePen. Trenger du et perfekt eksempel på hvordan SVG kan brukes til å revolusjonere onlineannonser? Det var det.

Tenk på det: Noen annonseselskaper selger fortsatt annonser basert på pixelstørrelse. Dette gir ingen mening i en alder av uendelig variasjon i skjermstørrelser, og Retina-skjermer for å starte opp. Inntil vi kommer opp med et bedre system enn visuelle annonser, kan SVG i det minste hjelpe oss med å få annonser til å passe inn i den responsive naturen til webdesign.

Se pennen Snap Display Ad av CJ Gammon ( @cjgammon ) på CodePen .

Jtop skrivebordet grensesnitt

Mozilla Developer Network, en enhet som jeg fortsetter å løpe inn som jeg undersøker webteknologier generelt, har også produsert noen interessante ting laget med SVG. For eksempel gikk de og laget et helt skrivebordsgrensesnitt basert helt på webteknologier som HTML5, JS, SVG og CSS. Det er raskt, tilpassbart, og jeg ønsker nesten at det var en del av et ekte OS.

En tid for refleksjon

Brakt til oss av ShinyDemos (som i sin tur bringes til oss av folket på Opera ) En tid for refleksjon vil bokstavelig talt bare overlappe en klokke over en levende feed fra webkameraet ditt. Vel, hvis du gir det din tillatelse, og du har faktisk et kamera, uansett. Men poenget er at det viser hvordan SVG-masker kan overlegges på nesten alt.

oblurlay

Gjennom en kombinasjon av CSS, SVG og jQuery, oblurlay skaper nøyaktig hva navnet heter: et uklart overlegg, iOS-stil. Det er en jQuery-plugin, så implementering er ikke vanskelig, og det viser pent hvordan SVG-filtre kan brukes på alle slags ting, ikke bare SVG-objektene selv.

Codrops demoer

Codrops (tidligere nevnt i opplæringsdelen) har produsert ganske mange fascinerende, imponerende og ganske enkle demoer for å vise frem hva SVG kan gjøre. Hver fortjener sin egen rette del i denne artikkelen, men det er så mange at jeg setter dem alle i ett. Hvis du ikke ser på noe annet fra denne "Inspirasjon" -delen, se på disse. Sjekk ut demoene, og last ned kildefilene. Så takk gutta på Codrops. De fortjener det.

Merk: Ikke alle disse er SVG-fokuserte, men de bruker alle SVG-grafikk på noen måte.

Sidelastende effekter : Et sett med kreative sidelastingseffekter som bruker SVG-animasjoner med Snap.svg. Tanken er å vise et overlegg med en interessant form animasjon mens nytt innhold blir lastet.

Ideer for subtile bøyeffekter : Noen kreative og subtile svever effekt inspirasjon ved hjelp av moderne CSS teknikker inkludert 3D translate og pseudo elementer. De bruker også SVG. Gå sjekk ut demo for det andre settet av effekter.

SVG Tegning Animasjon : Et lite eksperiment som utforsker bruken av SVG-linjetegning-animasjoner for å forutse utseendet på grafikk eller nettsideelementer, simulerer lastingen av dem.

Off-Canvas Meny Effects : Noen inspirasjon for meny effekter og stiler fra kanvasen ved hjelp av CSS-overganger og SVG-bananimasjoner.

Tooltip Styles Inspirasjon : En liten samling av ulike hoververktøystip-stiler og effekter for din inspirasjon. Ved hjelp av CSS-transformasjoner, kantlinje og SVG-former kan vi lage moderne og interessante verktøytips.

Meldingsstiler Inspirasjon : Noen enkle ideer og effekter for diskret websidevarsler. Et lite skript er ansatt for å vise noen stilarter, og CSS-animasjoner brukes til effektene.

Inspirasjon for egendefinerte valgelementer : litt inspirasjon for styling av en tilpasset versjon av seleksjonselementet. Det er mange muligheter, og i dag utforsker vi noen ideer om hvordan man skal la brukeren velge et valg i stil.

Inspirasjon for Inline Anchor Styles : litt inspirasjon for kreative og moderne inline anker stiler og svever effekter ved hjelp av ulike teknikker som pseudo-element overganger og SVGs.

Pilnavigasjonsstiler : Noen inspirasjon for pilnavigeringsstiler og sveveeffekter ved hjelp av SVG-ikoner for pilene, og CSS-overganger og animasjoner for effektene.

Wobbly Slideshow Effect : lysbildene i denne lysbildeserien vri når de beveger seg. Effekten er basert på Sergey Valiukhs Dribbble-skudd og ble laget ved hjelp av Snap.svg og morphing SVG-stier ... Vær oppmerksom på at dette er svært eksperimentelt og testet bare i de nyeste versjonene av moderne nettlesere.

Wrapping det opp

SVG, mens det ennå ikke er et av de mest brukte bildeformatene der ute, er godt dokumentert, støttet sterkt, og det er en stor del av Internettets fremtid. Hvis du ikke bruker det som en del av designprosessen din, er det nok tid å starte.

Utvalgt bilde, sømløs vektorbilde via Shutterstock.

• ← 10 gratis WordPress-plugins for februar 2015
• 21 Samarbeidsverktøy for å effektivisere samarbeidet ditt →