Den ultimative vejledning til SVG

Forestil dig, at du kunne integrere et billede på en webside, skalere denne side til enhver størrelse og aldrig miste billedkvalitet. Nå, det kan du. Det er helt muligt, vi har bare ikke gjort det så meget som vi burde.

Billeder med faste størrelser som JPG-filer, GIF'er og PNG'er har deres plads på internettet, men deres iboende statiske natur er i modstrid med den måde, hvorpå nettet går. Når vi flytter til lydhør, flydende design, jo mere irriterende bliver det at have at håndtere billeder, der grundlæggende ikke er lydhør. Det er frustrerende uden tro, når jeg indser, at det bliver bedste praksis at oprette og betjene flere forskellige versioner af hvert billede på dit websted.

Jeg er klar over, at der er gode tekniske grunde til dette. Det vil vare lang tid før nogen skaber et uendeligt skaleringsbillede, for eksempel. Imidlertid er billederne ikke de bedste og alle billeder. Vektor grafik er kommet meget langt. De går langt endnu.

De kan være sværere at erhverve, fordi ikke hver webdesigner er en illustratør. Billeder er rigelige og gode stock billeder er let at finde. Vector grafik er derimod ofte af lav kvalitet, eller måske kan du bare ikke finde den rigtige. Ansættelse illustratorer er dyrt.

Men som støtte til vektorgrafik vokser online, så vil deres brug. Det er på tide for alle at lære at implementere dem på deres hjemmesider og bruge dem kreativt. Billeder som reaktive som vores hjemmesider er fremtiden.

Mød SVG-filen ...

Hvad er SVG og hvorfor skal du bruge det?

Okay, for nybegynderne blandt os står SVG for Scalable Vector Graphics. SVG-filer er ret simple ting, teoretisk. De er bare tekstfiler med en masse XML inde. Enhver visuel information i en SVG-fil er defineret af en læsbar kode, som derefter beregnes og gengives af din browser, grafiksoftware osv.

Dette betyder, at selv om SVG-filer ikke er så komplekse som for eksempel et fotografi formateret som en JPG, er de uendeligt mere fleksible. De kan ændres manuelt i et tekstredigeringsprogram. De kan ændres med kode, som f.eks. JavaScript og CSS. De kan komprimeres til næsten latterligt små størrelser.

Med andre ord er de specielt designet til at blive brugt sammen med andre webteknologier. De er perfekte for os.

I slutningen af ​​90'erne introducerede Macromedia og Microsoft (og andre virksomheder) VML , og derefter præsenterede Adobe (og andre virksomheder) PGML som mulige løsninger til vektorbilleder på websites til W3C (og muligvis som alternativer til det gamle PostScript-format). W3C sagde: "Nej, vi skal gøre vores egen ting; men tak for ideerne! "Resultatet var SVG Arbejdsgruppe.

I september 2001 blev SVG 1.0 en officiel W3C-henstilling, og resten er historie. Sort af. Internet Explorer slog sig bag ved at vedtage SVG-formatet, overraskende ingen. Siden da har der været opdateringer rettet mod mobile enheder og mere med præciseringer.

Selv nu skaber SVG-arbejdsgruppen SVG 2, som vil omfatte mere integrationsintegration med ting som HTML5, CSS og WOFF-skrifttypen.

Det har støtte

Den eneste version af Internet Explorer du skal bekymre dig om lige nu er IE8. Det er det. Alle andre har mere eller mindre fuld SVG-støtte. Ja, det kan med jævne mellemrum opstå fejl, selv i de "gode" browsere, men det er stadig værd. Ikke kun vil arbejde rundt om dem holde din problemløsning færdigheder skarpe, men jo mere vi bruger denne teknologi, jo flere browser udviklere vil støtte det.

Tjek ud caniuse.com til en mere dybtgående analyse af hvad der virker, og hvad der ikke er i hvilke browsere.

Alt er lydhørt ... eller det burde være

Internetteknologi er gået langt ud over de statiske hjemmesider, vi plejede at vide. Det er tid til vores billeder at indhente, klare og enkle. Når du skal lave et ikon, skal du bruge SVG. Når du skal bruge en illustration, skal du gå til SVG, hvis du kan. Hvis du vil have en abstrakt, men stadig simpel hjemmeside baggrund, skal du bruge SVG.

Jeg er ikke fan af nethinden skærm teknologi, især fordi jeg ikke har en. Det er ikke sjalusi. Nå, det er ikke kun jalousi. Den simple kendsgerning er, at retina skærme er gået og gjort tjener op billeder, der er meget mere komplicerede. SVG, der er uendeligt skalerbar, kan bidrage til at minimere problemet.

Tilgængelighed

Brugere, der er synshandicappede, søger generelt på internettet med alt zoomet lidt ind. Når almindelige billeder bliver zoomet ind, mister de kvalitet. SVG vil ikke gøre det, så hvorfor ikke drage fordel af det for at give de synskadede en kvalitetsoplevelse?

Det kan bidrage til fremtidssikker din hjemmeside

Teknologien ændrer sig altid. Det, der er her i dag, kan være væk om et stykke tid, men SVG vil højst sandsynligt være i et stykke tid endnu. Så længe W3C sætter globale industristandarder, ser det ud til, at SVG fortsat vil være de facto-standarden for vektorgrafik i browseren. Brug det nu, og dine hjemmesider vil blive indstillet i en god, lang tid.

SVG Tutorials & How-tos

Så du er overbevist om. SVG er køligt, det er fremtiden, det er tid til at lære det. Heldigvis for alle, dette er internettet. Du ved bare , at folk har brugt dyrebare timer om timer, hvilket skaber gratis træningsmateriale til alle, der ønsker det. Folk, der gør den slags ting, er de mennesker, der gør internettet fantastisk.

Så gik vi selvfølgelig og tilbragte timer gennem de forskellige tutorials for at finde de bedste derude. Du kan takke os senere. For nu er der læsning der skal gøres!

Bemærk: Husk, at SVG-filer er alle XML-kodes, så mange af disse tutorials er udvikler-fokuserede eller bare har meget kode i dem. Vi har inkluderet begge tutorials fokuseret på det grundlæggende, og på specifikke, kreative anvendelser til SVG, så spring ikke over denne del.

• Brug af SVG: Chris Coyier har i mange år skrevet letforståelig CSS og HTML-tutorials på css-tricks.com. Hans primer på SVG er ikke anderledes. Jeg vil inkludere links til masser af grundlæggende forklaringer og tutorials, men det er her jeg ville starte. Denne vejledning indeholder grundlæggende instruktioner til Adobe Illustrator-brugere.
• Sådan kommer du i gang med SVG: Jeg ville være remiss, hvis jeg ikke inkluderede WDD's eget bidrag til SVG uddannelse. Den evigt fantastiske Sara Vieira dækker oprette din grafik, eksporterer dem, rydder op koden, flytter præsentationsattributter til CSS-filer og meget mere.
• Opløsning Uafhængighed Med SVG: Hvis det er web-relateret, har Smashing Magazine nok en artikel om det. De dækker Grundlæggende om SVG-formatet med deres sædvanlige stil og opmærksomhed på detaljer.
• Skalerbar vektorgrafik (en serie af artikler): Hongkiat.com er en anden ressource til kvalitet web- og grafikrelateret læring. I stedet for blot at levere en lang artikel, har de udgivet en hel serie af dem af Thoriq Firdaus. Engelsk er undertiden lidt mangler, men vejledningen er stadig klar og let at forstå.
• Sara Soueidan: Styling og animering Scalable Vector Graphics med CSS: Dette er en video af en præsentation givet på CSSconf EU 2014. I den giver Sara Soueidan en række tips, tricks og endda et par hacks til at anvende stilarter og animation til SVG på nettet. Det er en halv time lang, så kom godt og hold noget for at lave noter med hånden. Det er helt værd at din tid.
• Eksportere SVG til internettet med Adobe Illustrator CC: Adobe Illustrator-brugere skal se lige det her. En af Adobes egne blogs giver detaljerede oplysninger, og jeg mener meget detaljerede instruktioner om, hvordan du eksporterer SVG-filer til internettet. Lær hvordan du optimerer dem til den mindste filstørrelse for internettet.
• SVGBasics: Dette hele hjemmesiden er dedikeret til at lære folk hvordan man opretter SVG-grafik fra bunden med XML. Jeg anbefaler dette til hvem der beskæftiger sig med den faktiske back-end - eller endda front-end - af enhver hjemmeside. At vide, hvordan koden fungerer, kan gå langt for at løse problemer i flyve.
• SVG Tutorial af Jakob Jenkov: En anden udvikler-centreret sæt af tutorials, her. Den store forskel? Forfatteren omfattede video versioner af hver sektion. Hvis du lærer dig bedre ved at have både visuelle billeder og lyd til at gå med dine lektioner, er dette et godt sted at starte.
• Den enkle Intro til SVG Animation: Titlen siger det hele. David Walsh forklarer, hvordan du konfigurerer din SVG elementer til animation, hvilke attributter at bruge til forskellige elementer, hvilke biblioteker der skal bruges, og mere. Det er ikke en komplet vejledning, men det vil introducere dig til de grundlæggende begreber, der er nødvendige for at begynde at animere.
• En introduktion til SVG animation: Denne vejledning går ind i lidt mere detaljeret om, hvordan man skal gå om at animere dine SVG objekter. Derudover behandles det nogle almindelige problemer, som du kan komme ind i, når du animerer, så det er værd at læse.
• Sådan eksporteres flere ikoner til SVG-filer fra Adobe Illustrator: Oprettelse af et sæt SVG-ikoner i Illustrator? Holder dem alle i en Illustrator-fil? Eksporter dem alle til deres separate filer med et enkelt klik.
• Animér tekst med SVG-stier: Gør præcis det, der står i titlen. Få din animation på, måske bruge det på en logotype. Det helt sikkert ser cool nok ud ...
• Animer SVG-ikoner med CSS3 og JavaScript: En af SVGs største anvendelser er til ikoner og med god grund. Lav en fil, brug den overalt på dit websted eller din app, til enhver størrelse. Hvad mere kan du bede om? Denne vejledning viser dig hvordan du animerer disse ikoner på svæverfly.
• Oprettelse af en skalerbar SVG Infographic: Infographics er en af ​​internets foretrukne måder at forbruge fakta i disse dage. Hvorfor ikke gøre dem uendeligt skalerbare? Kast nogle animationer, og du kan meget godt blæse nogle sind.
• Lav en SVG HTML Burger Button: Sig hvad du vil om hamburger-knappen, det går nok ikke overalt. Du kan lige så godt brug SVG og animation for at gøre det til den skinneste, fedeste hamburger-knap du kan. Dette dækker hvordan man kan animere stier og streger for at gøre en knap bogstaveligt til en anden, så giv det et kig.
• Snap.svg Eksempler og vejledninger: Dette er en vejledning at bruge Snap.svg JavaScript-biblioteket (se afsnittet "Værktøjer" nedenfor) nedenfor. Det er designet til at hjælpe dig med at komme i gang med at oprette SVG-elementer i JS, og animere dem, gøre dem interaktive og så videre.
• Introduktion til Raphaël.js: Raphaël.js er et af de store SVG-relaterede JavaScript-biblioteker derude og denne artikel lærer dig hvordan man bruger det. (Se venligst afsnittet Værktøjer nedenfor.)
• Animeret SVG-ikon: Folk synes at lide animerede ikoner meget, så du kan lige så godt lære hver tilgang til at lave dem, som du kan. Her vi ser endnu et øjeblik Snap.svg biblioteket, som forfatteren opretter og animerer derefter en medieafspiller "play" -knap.
• Klipning i CSS og SVG - Klipbanen Egenskab og Element: Her er en dejlig lang artikel om hvordan man bruger SVG-klipning til at lave billeder indenfor former og billeder inde i stor tekst. Du kan overveje at bruge det til at lave store fancy overskrifter, der er SEO venlige, fordi søgemaskine bots kan læse dem.
• Gør SVGs Responsive With CSS: Selv om SVG-filer er uendeligt skalerbare, kan metoderne, der bruges til at sætte dem inde i en webside, til tider forårsage problemer. Denne vejledning fra codrops forklarer bare, hvordan du løser de forskellige problemer, du måtte støde på.
• Form Hover Effekt med SVG: Lav en glat og elegant udseende animeret svæveffekt til forhåndsvisning af billeder. ( Tjek demoen. )
• En SVG-primer til dagens browsere af W3C: Ikke helt sidst, og bestemt ikke mindst, har vi en tilvejebragt ressource af de mennesker, der kom op med hele SVG-formatet i første omgang: W3C. Det er ikke en grundlæggende tutorial eller en introduktion. Ifølge forordet blev det skabt til professionelle programmører, grafiske designere med "en stærk teknisk bøjet", og andre, der ikke har noget imod at komme ned til nitty gritty.
• SVG Tutorial af MDN: Som SVGBasics er dette en ret omfattende sæt af tutorials, leveret af Mozilla Developer Network. Omfattende som det er, selv om selve tutorialen betragtes som "under udvikling". For eksempel kan dette i øjeblikket ses på siden "Filtre", som er tom. Ifølge selve siden er vejledningen i et tidligt udviklingsstadium. Hvis du kan, kan du hjælpe med at chippe ind og skrive et stykke eller to. Ekstra point til at skrive en hel side.

SVG Tools

En af de mange fordele ved SVGs åbne natur er, at alle kan lave software til det. Der er ingen licensbegrænsninger eller gebyrer til at betale, bare en åben standard for folk at bruge. Som du måske tror, ​​har mange udviklere gjort netop det.

Værktøjer til oprettelse og brug af SVG-formatet er i overflod. De spænder fra store softwarepakker, som omfatter muligheden for at eksportere SVG som en eftertanke til vektor tegning apps, der bruger SVG som deres primære format og meget mere.

En hurtig Google-søgning efter "SVG-værktøjer" returnerer "Omkring 37.000.000 resultater", så du ved, at der er meget derude.

Hvor skal du da begynde?

Premium applikationer

De store navne i grafisk oprettelse støtter alle SVG. Adobe Illustrator,Corel Draw, selv forskellige produkter fra Xara - Ja, Xara er stadig en ting - de kan alle importere, redigere og gemme filer i formatet. (Illustrator har været kendt for at sætte nogle ulige ting i SVG-filer, så du skal være forsigtig med eksportindstillingerne.)

Inkscape

Hvis du ikke allerede bruger en vektorgrafikpakke, Inkscape er et fantastisk sted at starte. Opret i 2003 som en gaffel af et andet open source-projekt kaldet Sodipodi (som var baseret på endnu et andet OSS-projekt), er Inkscape blevet standarden for gratis grafisk software på tværs af platforme. Det er ikke helt så funktionelt fyldt som Adobe Illustrator, men det er mere end nok til de fleste vektorprojekter.

Serif DrawPlus Starter Edition

Serif er et firma, der gør ret god grafisk oprettelse og desktop publishing software. Alle deres vigtigste software tilbud leveres med gratis "Starter Editions", og deres vektor tegning app er ingen undtagelse.

Lad ikke "Starter Edition" lidt narre dig selv. Det har måske ikke alt, hvad pro-versionen gør, men det kan i mange tilfælde få jobbet gjort. Medmindre du er en illustrator ved handel, kan denne app og vil opfylde dine behov ... forudsat at du er på Windows. Desværre er det ikke cross-platform. Der kræves også registrering til download.

Karbon

En del af Calligra kontorsuite, som primært er til Linux, Karbon er en fuldt udstyret vektor grafik editor. Det har alle de grundlæggende værktøjer, og et par ting udover. Installation på Mac og Windows er vanskelig i øjeblikket, men ikke umuligt.

viste mønstre

Navnet lyder som en softwarepakke fra 90'erne, jeg ved det, men det er faktisk ret nyt. Faktisk er det efterfølgeren til den gamle sK1 illustration app, som er blevet afbrudt. viste mønstre er i øjeblikket i "forhåndsvisning" fase, og har både Linux og Windows versioner. Det er ikke klar til produktion endnu, men det er et projekt værd at se på.

SVG-redigering

Navnet er måske lidt on-the-næse, men softwaren er mere end i stand. SVG-redigering Er udelukkende baseret på webteknologier, specifikt HTML5, JavaScript og CSS. Dette betyder, at der ikke er nogen server-side funktionalitet. Hvad mere er, det er Open Source, hvilket betyder at du kan downloade det, lægge det på din egen server eller endda bare bruge det fra skrivebordet.

Det har en funktionsliste lang nok til at gøre mange en desktop app jaloux og kører hurtigere end de fleste af dem, så giv det en hvirvel.

Janvas

Janvas er den eneste web-baserede app på denne liste, der ikke er strengt fri. Der er en tredive-prøveperiode, hvorefter et abonnement koster 26 euro om året. Hvis ingen af ​​de andre web-baserede SVG-redaktører gør dig glad, kan du faktisk overveje det.

Tegneværktøjerne er avancerede og velkendte nok, hver variabel kan redigeres i sidefeltet, og du kan gemme dine dokumenter til Google Drev. Du kan oprette skabeloner, samarbejde om tegningsdokumenter og endda indeholde CSS- og JS-filer, der er lavet til at interagere med grafikken.

Alt i alt er det et solidt tilbud.

Mondrian

Lille. Elegant. Enkel. Mondrian er endnu en open source tilbyder, og det er meget mindre end de fleste. Det har ikke engang et tekstværktøj ... men det gør simple tegninger meget godt. Du kan åbne filer fra harddisken eller en webadresse, tag indlægskoden til dit websted eller gemme din tegning som SVG eller PNG. Det kan ikke være så avanceret som andre apps, men det føles bare godt at bruge, og penværktøjet føles naturligt.

Tegn SVG

Tegn SVG er en anden web-baseret SVG editor med alle de funktioner, du nogensinde har brug for. Det stærkeste punkt synes at være den hurtige hastighed, hvormed den laster og trækker ting. Desværre er brugergrænsefladen alvorligt fejlfri. Stadig er det der, og det virker, hvis du nogensinde har brug for det.

SVG biblioteker

Udviklere glæder sig over! Vi har også nogle links her for dig. SVG er trods alt ikke bare et andet grafikformat. Det er kode. Det er kode, der kan knyttes til eller indlejret. Det kan interagere med og ændres i luften. Med matematik!

Snap.svg

Snap er et JS-bibliotek til generering og interaktion med SVG. Den er designet til moderne browsere. Yup, det betyder, at det kun understøtter IE9 + ... men hvis ældre browsere ikke er din bekymring, skal du gå efter det.

Raphaël

Raphaël, i modsætning til Snap, er kompatibel med ældre browsere. Faktisk kan det arbejde med IE6 +, Safari 3+ og Chrome 5+. Hvis du udvikler noget til et virksomhedssystem, hvor brugere måske er på ældre maskiner, kan Raphaël for eksempel være din bedste indsats.

jQuery SVG

Ligesom SVG og jQuery? Jeg er ikke rigtig overrasket. jQuery har måske mistet noget af den spotlight opmærksomhed, det engang havde, men det er stadig et go-to-bibliotek for mange af os.

jQuery SVG, så er det nok det plugin, du leder efter. Det har funktioner til animationer, lave grafer og endda udvidelser. Det er rigtigt, udvidelser til et plugin. Browser support er IE9 +, men ældre versioner af IE kan bruges med de relevante browser plugins installeret.

Jeg ville ikke afhænge af, at brugere har disse plugins, selvom.

SVGMagic

SVGMagic er en drop-in, jQuery-baseret løsning til ældre browsere (IE 7 & 8). I stedet for manuelt at oprette nedløbsbilleder for hver SVG-fil, du bruger, kan dette plugin generere dem på flugt. Det håndterer også baggrundsbilleder.

Hvordan gør det noget af dette? Det registrerer, om brugerens browser kan håndtere SVG. I så fald går det i seng. Hvis ikke, kontakter den et PHP-script til server-side og fortæller det om at oprette en PNG-fil af de pågældende SVG-billeder med de nødvendige dimensioner.

Når en gang er færdig, sender PHP-scriptet webadresserne til disse midlertidige tilbageførselsbilleder tilbage til jQuery-plugin'et, og standardwebadresserne erstattes. Dette tager selvfølgelig tid, så du kan eventuelt angive et stedholderbillede, der skal vises, mens konverteringen finder sted.

En advarsel: I øjeblikket kan det ikke håndtere for mange billeder på én gang. Du vil ikke bruge denne teknik på sider med mere end et par SVG-filer.

SVG.JS

Endelig er her en mulighed for byte-tællerne. SVG.JS vejer ind på kun 11,8kbs når gzipped. På trods af sin lille størrelse understøtter det et imponerende antal funktioner (som anført på projektets side):

• Animationer på størrelse, position, transformationer, farve
• Smerteløs forlængelse takket være den modulære struktur
• Forskellige nyttige plugins til rådighed
• Forenet api mellem formetyper med bevægelse, størrelse, center
• Bindende begivenheder til elementer
• Fuld støtte til uigennemsigtighedsmasker og fritlægningsveje
• Tekststier, endda animerede
• Elementgrupper og sæt
• Dynamiske gradienter

Læs dokumentation for mere info.

Stock SVG

Ikke alle er en illustrator. Jeg har i hvert fald aldrig været god til det. Således bliver lager illustrationer en uvurderlig ressource. Det kan dog være svært at finde gode ting. Hvad der ikke ser ud som Microsoft clipart er ofte begrænset i omfang eller dyrt.

Må dog ikke tabe håb. Der er mange ting derude, der er af god kvalitet. Hvis det ikke passer perfekt til dine behov, så er det vektor kunst. Chancerne er, at det kan tweaked for at imødekomme dine behov, hvis du har et grundlæggende kendskab til vektorgrafik software.

SVG kan dog gøre mere end blot lager illustrationer. Du kan også oprette mønstre, store fancy baggrunde, der ikke spiser båndbredde og meget mere. Lad os se på, hvad folk har lavet for resten af ​​os:

SVG Clipart på openclipart.com

SVG, som et åbent format, har mange open source-entusiaster som fans. Som et resultat er det et af de primære formater, der anvendes i hvad der måtte være den største samling af gratis clip art der ude.

Og meget af det er clipart-ish. Og meget af det er amatørarbejde. Der er dog nogle kvalitetsgrafik, hvis du ser. Hej, det er gratis.

SVG Stock

SVG Stock er et lille websted med en relativt lille, men fremragende samling. Det er for det meste ikoner og enhedsmockups, men de er alle af høj kvalitet. Hvis du har brug for en af ​​disse to ting, skal du starte her.

SVG ressourcer på deviantart.com

Ah DeviantArt, det gigantiske samfund går stadig stærkt. Gå til stock billeder kategori og søg efter SVG (eller klik på linket ovenfor). Igen vil kvaliteten variere, men der er gode ting der, hvis du har tid til at se.

SVG Mønstre Galleri

Et lille galleri fuld af SVG-baserede mønstre. Det er designet som mere af et showcase, men kildefilerne er alle der for din bekvemmelighed.

SVG Mønstre fra svgeneration.com

svgeneration.com indeholder mange SVG mønstre til din brug. Webstedet leveres med redigeringsindstillinger for hvert mønster, og du kan redigere koden direkte på webstedet for at se dine ændringer i handling. Ikke alene er dette en stor ressource til præfabrikerede mønstre, men du kan finde ud af meget om, hvordan de er lavet i første omgang.

SVG Clipart

Kunsten på denne side er tydelig gammeldags tegneserie stil. Det vil helt ærligt ikke være, hvad alle leder efter, men det er der for dem, der vil have den klassiske følelse af deres illustrationer.

SVG Studio

SVG Studio tilbyder tusindvis af illustrationer med en tydelig moderne følelse. Du kan købe dem i små undersæt, eller download hele deres katalog på én gang. Det vil sætte dig tilbage 500 USD, hvilket for 3000 illustrationer ikke er så slemt en aftale.

SVG på de større lagersider

Jeg kan ikke sige meget om den kunst, der tilbydes på hvert websted, fordi det varierer bredt af bidragyder uden overordnet stil. De største navne er istockphoto.com,shutterstock.com,bigstockphoto.com, og canstockphoto.com.

SVG Inspiration

Vi kan læse alle de introduktioner, vi ønsker, og følg alle vejledninger derude. Vi kan blive eksperter i hvert eneste aspekt af SVG-specifikationen, og alligevel kan vi stadig være utroligt kedelige om det. Vi skal se på alle muligheder i en given teknologi for at få mest muligt ud af det.

Det er dog lettere sagt end gjort, dog. Det hjælper ofte med at få et referencepunkt, noget fantastisk at se på, og vise os præcis, hvilke slags fantastiske ting vi kan gøre med det, vi har. Det er hvilke steder som Webcreme gjorde for webdesign generelt. Det er hvad CSS Zen Garden, og alle CSS gallerierne, der kom efter det, gjorde for CSS layouts.

Fra og med, har jeg ikke fundet nogen galleri sites dedikeret til, hvad der kan opnås via SVG kombineret med andre web-teknologier, og det kan hjælpe. I mellemtiden er her et udstillingsvindue af fantastiske ting, vi har fundet:

Snap Display Ad

Dette eksempel er en del af Snap.svg indsamling på CodePen. Har du brug for et perfekt eksempel på, hvordan SVG kan bruges til at revolutionere onlineannoncer? Dette er det.

Tænk på det: nogle annoncefirmaer sælger stadig annoncer baseret på pixelstørrelse. Det giver ingen mening i en alder af uendelig variation i skærmstørrelser, og retina skærme til at starte. Indtil vi opretter et bedre system end visuelle annoncer, kan SVG i det mindste hjælpe os med at gøre annoncerne tilpasning til webdesignets lydhørhed.

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

Jtop desktop interface

Mozilla Developer Network, en enhed, som jeg fortsætter med at køre ind som jeg undersøger webteknologier generelt, har også lavet nogle interessante ting lavet med SVG. For eksempel gik de og lavede en hel desktop-grænseflade baseret udelukkende på webteknologier som HTML5, JS, SVG og CSS. Det er hurtigt, brugerdefineret, og jeg ønsker næsten, at det var en del af et ægte OS.

En tid til eftertanke

Bragt til os af ShinyDemos (som igen bringes til os af folket på Opera ) En tid til eftertanke vil bogstaveligt talt bare overlejre et ur over et live feed fra dit webcam. Nå, hvis du giver det din tilladelse, og du har faktisk et kamera, alligevel. Men pointeret er, at det viser, hvordan SVG masker kan overlejres på næsten alt.

oblurlay

Gennem en kombination af CSS, SVG og jQuery, oblurlay skaber præcis, hvad navnet antyder: et sløret overlay, iOS-stil. Det er et jQuery-plugin, så implementering er ikke svært, og det viser pænt, hvordan SVG-filtre kan anvendes til alle slags ting, ikke kun SVG-objektene selv.

Codrops demoer

Codrops (tidligere nævnt i kapitlet om selvstudier) har produceret en række fascinerende, imponerende og simpelthen smukke demoer, der viser, hvad SVG kan gøre. Hver fortjener sin egen rette sektion i denne artikel, men der er så mange, at jeg sætter dem alle i ét. Hvis du ikke ser på noget andet fra denne "Inspiration" sektion, se på disse. Tjek demoerne, og download kildefilerne. Så tag gutterne på Codrops. De fortjener det.

Bemærk: Ikke alle disse er SVG-fokuserede, men de bruger alle med SVG-grafik på en eller anden måde.

Sideindlæser effekter : Et sæt kreative sideindlæser effekter, der bruger SVG-animationer med Snap.svg. Tanken er at vise et overlay med en interessant form animation, mens nyt indhold bliver lastet.

Idéer til subtile svingeffekter : En vis kreativ og subtil svæveffekt-inspiration ved hjælp af moderne CSS-teknikker, herunder 3D-oversæt og pseudo-elementer. De bruger også SVG. Gå tjek den demo for det andet sæt af effekter.

SVG Tegning Animation : Et lille eksperiment, der udforsker brugen af ​​SVG line drawing animationer for at forudse udseendet af grafik eller hjemmeside elementer, simulerer indlæsningen af ​​dem.

Off-Canvas Menu Effects : En vis inspiration til off-canvas menu effekter og stilarter ved hjælp af CSS overgange og SVG path animationer.

Tooltip Styles Inspiration : En lille samling af forskellige hover værktøjstip stilarter og effekter til din inspiration. Ved hjælp af CSS-transformer, grænseradius og SVG-former kan vi skabe moderne udseende og interessante værktøjstips.

Meddelelsesstile Inspiration : nogle enkle ideer og effekter for diskret hjemmeside notifikationer. Et lille script er ansat til at fremvise nogle stilarter, og CSS animationer bruges til effekterne.

Inspiration til Custom Select Elements : En vis inspiration til styling af en brugerdefineret version af vælgelementet. Der er mange muligheder, og i dag udforsker vi nogle ideer om, hvordan man skal lade brugeren vælge et valg i stil.

Inspiration til Inline Anchor Styles : En vis inspiration til kreative og moderne inline anker stilarter og svæveffekter effekter ved hjælp af forskellige teknikker som pseudo-element overgange og SVGs.

Arrow Navigation Styles : En vis inspiration til pil navigations stilarter og svæveffekter effekter ved hjælp af SVG ikoner til pilene, og CSS overgange og animationer for effekterne.

Wobbly Slideshow Effect : diasene i dette diasshow vinkler, når de bevæger sig. Effekten er baseret på Sergey Valiukhs Dribbble-skud og blev lavet ved hjælp af Snap.svg og morphing SVG-stier ... Bemærk venligst, at dette er meget eksperimentelt og testet kun i de nyeste versioner af moderne browsere.

Indpakning det

SVG, mens det endnu ikke er et af de mest udbredte billedformater derude, er veldokumenteret, stærkt understøttet, og det er en stor del af internets fremtid. Hvis du ikke bruger det som en del af din designproces, er det nok tid at starte.

Udvalgte billede, sømløs vektor billede via Shutterstock.

• ← 10 gratis WordPress-plugins til februar 2015
• 21 Samarbejdsværktøjer til at effektivisere dit teamwork →