Den ultimata guiden till SVG

Tänk dig att du kan bädda in en bild på en webbsida, skala den sidan till vilken storlek som helst och förlora aldrig bildkvaliteten. Tja, det kan du. Det är helt möjligt, vi har bara inte gjort det så mycket som vi borde.

Bilder med fasta storlekar som JPG-filer, GIF och PNG har sin plats på webben, men deras inneboende statiska natur strider mot hur webben går. När vi flyttar till lyhörda, flytande mönster blir ju mer irriterande det att ta itu med bilder som är fundamentalt inte lyhörda. Det är frustrerande utan tro när jag inser att det blir bästa praxis att skapa och betjäna flera olika versioner av varje bild på din webbplats.

Jag inser att det finns goda tekniska skäl för detta. Det kommer att bli lång tid innan någon skapar ett oändligt skalande fotografi, till exempel. Bilderna är dock inte alla bilder och slutliga bilder. Vektorgrafik har kommit mycket långt. De går långt nu.

De kan vara svårare att förvärva, för inte alla webbdesigner är en illustratör. Bilder är rikliga och bra lager bilder är lätta att hitta. Vektorgrafik, å andra sidan, är ofta av låg kvalitet, eller kanske kan du bara inte hitta den rätta. Hyrande illustratörer är dyra.

Men som stöd för vektorgrafik växer på nätet, så kommer deras användning. Det är dags för alla att lära sig att implementera dem på sina webbplatser och använda dem kreativt. Bilder som lyhörda som våra webbplatser är framtiden.

Möt SVG-filen ...

Vad är SVG och varför ska du använda den?

Okej, för nybörjare bland oss ​​står SVG för skalbar vektorgrafik. SVG-filer är ganska enkla saker, teoretiskt. De är bara textfiler med en massa XML inuti. Varje bit av visuell information i en SVG-fil definieras av läsbar kod, som sedan beräknas och görs av din webbläsare, grafikprogram etc.

Det betyder att även om SVG-filer inte är så komplexa som till exempel ett fotografi formaterat som en JPG, är de oändligt mer flexibla. De kan ändras manuellt i en textredigerare. De kan ändras med kod, till exempel JavaScript och CSS. De kan komprimeras till nästan löjligt små storlekar.

Med andra ord är de speciellt utformade för att användas tillsammans med annan webbteknologi. De är perfekta för oss.

I slutet av 90-talet introducerade Macromedia och Microsoft (och andra företag) VML , och sedan presenterade Adobe (och andra företag) PGML som möjliga lösningar för vektorgrafik på webbplatser till W3C (och möjligen som alternativ till det gamla PostScript-formatet). W3C sa, "Nej, vi ska göra vår egen sak; men tack för idéerna! "Resultatet var SVG Arbetsgrupp.

I september 2001 blev SVG 1.0 en officiell W3C-rekommendation, och resten är historia. Ungefär. Internet Explorer släpar efter med att anta SVG-formatet, överraskande ingen. Sedan dess har uppdateringar gjorts mot mobila enheter och mer med förtydliganden.

Ännu nu skapar SVG-arbetsgruppen SVG 2, som kommer att innehålla mer integrationsintegration med saker som HTML5, CSS och WOFF-typsnittet.

Det har stöd

Den enda versionen av Internet Explorer måste du oroa dig för just nu är IE8. Det är allt. Alla andra har mer eller mindre fullt SVG-stöd. Ja, det kan hända att du stöter på buggar ibland, även i de "bra" webbläsarna, men det är fortfarande värt det. Inte bara kommer det att fungera runt dem, men du måste sköta dina problemlösningsförmåga, men ju mer vi använder den här tekniken, desto fler webbläsare kommer att stödja den.

Checka ut caniuse.com för en mer djupgående analys av vad som fungerar och vad som inte finns i vilka webbläsare.

Allt är lyhörd ... eller det borde vara

Internettekniken har gått långt, bortom de statiska webbplatser som vi brukade veta. Det är dags för våra bilder att komma ikapp, vanligt och enkelt. När du måste skapa en ikon, använd SVG. När du måste använda en illustration, gå till SVG om du kan. Om du vill ha en abstrakt, men fortfarande enkel webbplatsbakgrund, använd SVG.

Jag är inte ett fan av näthinnans skärmteknik, särskilt för att jag inte har en. Det är inte avundsjuk. Jo det är inte bara avundsjuk. Det enkla faktum är att retina skärmar har gått och gjort att tjäna upp bilder som är mycket mer komplicerade. SVG, som är oändligt skalbar, kan bidra till att minimera problemet.

Tillgänglighet

Användare som är synskadade surfar oftast på nätet med allt zoomat lite. När vanliga bilder zoomas in, förlorar de kvalitet. SVG kommer inte att göra det, så varför inte dra nytta av det för att ge de synskadade en kvalitetsupplevelse?

Det kan bidra till framtida bevis på din webbplats

Tekniken förändras alltid. Vad som händer idag kan vara borta på ett tag, men SVG kommer sannolikt att vara kvar ett tag ännu. Så länge W3C sätter globala industristandarder, verkar det som att SVG fortsätter att vara de facto-standarden för vektorgrafik i webbläsaren. Använd det nu, och dina webbplatser kommer att ställas in för en bra, lång tid.

SVG Tutorials & How-tos

Så du är övertygad. SVG är coolt, det är framtiden, det är dags att lära sig det. Lyckligtvis för alla, det här är internet. Du vet bara att människor har spenderat dyrbara timmar i timmar och skapar gratis träningsmaterial för alla som vill ha det. Människor som gör den typen av saker är de människor som gör Internet fantastiskt.

Då gick vi självklart och spenderade timmar genom att titta igenom de olika handledningarna för att hitta de bästa där ute. Du kan tacka oss senare. För tillfället läses det att bli gjort!

Obs! Tänk på att SVG-filer är alla XML-koder, så många av dessa handledning är utvecklingsfokuserade eller bara har mycket kod i dem. Vi har inkluderat båda handledningarna inriktade på grunderna och specifika kreativa användningsområden för SVG, så hoppa inte över den här delen.

• Använda SVG: Chris Coyier har skrivit enkla att förstå CSS och HTML-tutorials i flera år på css-tricks.com. Hans primer på SVG är inte annorlunda. Jag kommer att inkludera länkar till massor av grundläggande förklaringar och handledning, men det är här jag skulle börja. Denna handledning innehåller grundläggande instruktioner för Adobe Illustrator-användare.
• Så här börjar du med SVG: Jag skulle vara remiss om jag inte inkluderade WDD: s egna bidrag till SVG-utbildning. Den ständigt fantastiska Sara Vieira omfattar att skapa din grafik, exportera dem, städa upp koden, flytta presentationsegenskaper till CSS-filer och mer.
• Upplösning Oberoende Med SVG: Om det är webbrelaterat, har Smashing Magazine förmodligen en artikel om den. De täcker grunderna i SVG-formatet med sin vanliga stil och uppmärksamhet på detaljer.
• Skalbar vektorgrafik (en serie artiklar): Hongkiat.com är en annan resurs för kvalitativ webb- och grafikrelaterad inlärning. I stället för att bara ge en lång artikel, har de publicerat en hel serie av dem av Thoriq Firdaus. Engelska är ibland lite bristfällig, men anvisningarna är fortfarande tydliga och lätta att förstå.
• Sara Soueidan: Styling och Animering Scalable Vector Graphics med CSS: Detta är en video av en presentation ges på CSSconf EU 2014. I det ger Sara Soueidan ett antal tips, tricks och till och med några hack för att tillämpa stilar och animeringar till SVG på webben. Det är en halvtimme lång, så bli bekväm och håll något att göra anteckningar med till hands. Det är helt värt din tid.
• Exportera SVG till webben med Adobe Illustrator CC: Adobe Illustrator-användare ska kolla in det här. En av Adobes egna bloggar ger detaljerad information, och jag menar mycket detaljerade instruktioner om hur man exporterar SVG-filer till webben. Lär dig hur du optimerar dem till den minsta filstorleken för webben.
• SVGBasics: Detta hela webbplatsen är inriktad på att lära människor hur man skapar SVG-grafik från början med XML. Jag rekommenderar det här för vem som handlar om det faktiska back-end - eller till och med fronten - på alla webbplatser. Att veta hur koden fungerar kan gå långt för att lösa problem i flygningen.
• SVG Handledning av Jakob Jenkov: En annan utvecklare-centrerad uppsättning av handledning, här. Den stora skillnaden? Författaren inkluderade videouppgifter av varje avsnitt. Om du lär dig bättre genom att ha både bilder och ljud att gå med dina lektioner, är det här ett bra ställe att börja.
• Den enkla Intro till SVG Animation: Titeln säger allt. David Walsh förklarar hur man sätter upp din SVG-element för animering, vilka attribut att använda för olika element, vilka bibliotek som ska användas och mer. Det är inte en fullständig guide, men det kommer att introducera dig till de grundläggande begreppen som krävs för att börja animera.
• En introduktion till SVG-animering: Denna handledning går in i lite mer detaljerad information om exakt hur man ska handla om att animera dina SVG-objekt. Utöver det hanterar den några vanliga problem som du kan komma på när du animerar, så det är värt att läsa.
• Så här exporterar du flera ikoner till SVG-filer från Adobe Illustrator: Skapa en uppsättning SVG-ikoner i Illustrator? Håller dem alla i en Illustrator-fil? Exportera dem alla till sina separata filer med ett enda klick.
• Animera text med SVG-banor: Gör exakt vad det står i titeln. Få din animering på, Använd det kanske på en logotyp. Det är verkligen ser coolt ut ...
• Animera SVG-ikoner med CSS3 och JavaScript: En av SVGs största användningsområden är för ikoner och med god anledning. Gör en fil, använd den var som helst på din webbplats eller app, i vilken storlek som helst. Vad mer kan du begära? Denna handledning visar dig hur man animerar dessa ikoner på svävaren.
• Skapa en skalbar SVG Infographic: Infographics är en av Internetens favorit sätt att konsumera fakta idag. Varför inte gör dem oändligt skalbara? Kasta lite animering, och du kan mycket väl blåsa några sinnen.
• Gör en SVG HTML Burger Button: Säg vad du gör om hamburger-knappen, det går nog inte någonstans. Du kan också använd SVG och animering för att göra den den skinnigaste, coolaste hamburgerknappen du kan. Den här beskriver hur man kan animera vägar och streck för att göra en knapp bokstavligen omvandlas till en annan, så ge den en titt.
• Snap.svg Exempel och handledning: Detta är en guide att använda Snap.svg JavaScript-biblioteket (se avsnittet "Verktyg" nedan) nedan. Det är utformat för att hjälpa dig att komma igång med att skapa SVG-element i JS, och animera dem, göra dem interaktiva och så vidare.
• Introduktion till Raphaël.js: Raphaël.js är ett av de stora SVG-relaterade JavaScript-biblioteken där ute, och Denna artikel lär dig hur du använder den. (Återigen, se avsnittet Verktyg nedan.)
• Animerad SVG-ikon: Människor verkar som animerade ikoner mycket, så du kan också lära dig alla sätt att göra dem som du kan. Här vi ser ännu en gång Snap.svg-biblioteket, som författaren skapar och animerar sedan, en mediaspelares "play" -knapp.
• Klippning i CSS och SVG - Klippvägen Egenskap och Element: Här är a trevlig lång artikel om hur man använder SVG-klippning för att göra bilder inuti former och bilder i stor text. Du kan överväga att använda den för att göra stora snygga rubriker som är SEO-vänliga eftersom sökrobotar kan läsa dem.
• Göra SVGs Responsive With CSS: Även om SVG-filer är oändligt skalbara, kan metoderna som används för att placera dem på en webbsida ibland orsaka problem. Denna handledning från codrops förklarar hur du åtgärdar de olika problemen du kan stöta på.
• Form Hover Effect med SVG: Skapa en slät och elegant utseende animerad svängningseffekt för bildförhandsvisningar. ( Kolla in demoen. )
• En SVG-primer för dagens webbläsare av W3C: Inte riktigt sist, och inte minst, vi har en resurs som tillhandahålls av de personer som kom upp med hela SVG-formatet i första hand: W3C. Det är inte en grundläggande handledning eller en introduktion. Enligt förordet skapades det för professionella programmörer, grafiska designers med "en stark teknisk böjd", och andra som inte har något emot att komma ner till nitty gritty.
• SVG Tutorial by MDN: Som SVGBasics är det här ganska omfattande uppsättning handledning, tillhandahålls av Mozilla Developer Network. Omfattande som det är, men självstudien anses vara "under utveckling". Detta kan till exempel ses på sidan "Filters", som är tomt. Enligt själva sidan är handledningen i ett tidigt utvecklingsstadium. Om du kan, hjälp med att chippa in och skriva ett stycke eller två. Extra poäng för att skriva en hel sida.

SVG Verktyg

En av de många fördelarna med SVGs öppna natur är att alla kan göra programvara för den. Det finns inga licensbegränsningar eller avgifter att betala, bara en öppen standard för personer att använda. Som du kanske förväntar dig har många utvecklare gjort exakt det.

Verktyg för att skapa och använda SVG-format finns i överflöd. De sträcker sig från stora mjukvarupaket som inkluderar möjligheten att exportera SVG som en eftertanke, till vektorritningsappar som använder SVG som deras primära format och mer.

En snabb Google-sökning efter "SVG-verktyg" returnerar "Om 37.000.000 resultat", så du vet att det finns mycket där ute.

Var ska du då börja?

Premium applikationer

De stora namnen i grafisk skapande stödjer alla SVG. Adobe Illustrator,Corel Draw, även olika produkter från Xara - Ja, Xara är fortfarande en sak - de kan alla importera, redigera och spara filer i formatet. (Illustratorn har varit känd för att lägga ut några udda saker i SVG-filer, så du måste vara försiktig med exportinställningarna.)

Inkscape

Om du inte redan använder ett vektorgrafikpaket, Inkscape är en fantastisk plats att börja. Skapades 2003 som en gaffel till ett annat open source-projekt som heter Sodipodi (som grundades på ännu ett annat OSS-projekt), har Inkscape blivit standarden för gratis grafikkprogramvara med plattformsplattform. Det är inte lika funktionellt fyllt som Adobe Illustrator, men det är mer än tillräckligt för de flesta vektorprojekt.

Serif DrawPlus Starter Edition

serif är ett företag som gör ganska bra grafisk skapande och desktop publishing programvara. Alla deras huvudprogramvara erbjuds med gratis "Starter Editions", och deras vektorritningsapp är inget undantag.

Låt inte "Startversionen" lite lura dig, men. Det kanske inte har allt som proversionen gör, men det kan få jobbet gjort i de flesta fall. Om du inte är en illustratör av handel, kan den här appen och kommer att uppfylla dina behov ... förutsatt att du är på Windows. Tyvärr är det inte en plattform. Dessutom krävs registrering för nedladdningen.

Karbon

En del av Calligra-kontorsuiten, som är främst för Linux, Karbon är en fullfjädrad vektorgrafikredigerare. Det har alla de grundläggande verktygen, och några saker förutom. Installation på Mac och Windows är svår för närvarande, men inte omöjligt.

Printdesign

Namnet låter som ett mjukvarupaket från 90-talet, jag vet, men det är faktiskt ganska nytt. Det är faktiskt efterföljaren till den gamla sK1-illustrationappen, som har upphört. Printdesign är för närvarande i förhandsgranskningsfasen och har både Linux- och Windows-versioner. Det är inte klart för produktionsanvändning än, men det är ett projekt värt att titta på.

SVG-edit

Namnet är lite på näsan, kanske, men programvaran är mer än kapabel. SVG-edit Är helt och hållet baserat på webbteknik, speciellt HTML5, JavaScript och CSS. Det betyder att det inte finns någon serverfunktion. Dessutom är det Open Source, vilket innebär att du kan ladda ner den, lägga den på din egen server eller bara använda den från skrivbordet.

Den har en Funktionslista tillräckligt länge för att göra många en stationär app avundsjuk, och körs snabbare än de flesta av dem, så ge det en virvel.

Janvas

Janvas är den enda webbaserade appen på den här listan som inte är strikt fri. Det finns en trettiotal försöksperiod, varefter en prenumeration kostar 26 euro per år. Om ingen av de andra webbaserade SVG-redaktörerna gör dig lycklig kan du faktiskt överväga det.

Ritverktygen är avancerade och välbekanta, varje variabel kan redigeras i sidofältet och du kan spara dina dokument till Google Drive. Du kan skapa mallar, samarbeta på ritningsdokument och även inkludera CSS och JS-filer som görs för att interagera med grafiken.

Sammantaget är det ett solidt erbjudande.

Mondrian

Små. Elegant. Enkel. Mondrian är ännu en annan öppen källa erbjuder, och det är mycket mindre än de flesta. Det har inte ens ett textverktyg ... men det gör enkla ritningar mycket bra. Du kan öppna filer från hårddisken eller en URL, ta in inbäddningskoden för din webbplats, eller spara bara din ritning som SVG eller PNG. Det kanske inte är så avancerat som andra appar, men det känns bara trevligt att använda, och pennaverktyget känns naturligt.

Rita SVG

Rita SVG är en annan webbaserad SVG-editor med alla funktioner du någonsin behöver. Den starkaste punkten verkar vara den snabba hastigheten med vilken den laddas och drar saker. Tyvärr är användargränssnittet allvarligt felaktigt. Fortfarande är det där och det fungerar, om du någonsin behöver det.

SVG-bibliotek

Utvecklare glädjer! Vi har några länkar här för dig också. SVG är trots allt inte bara ett annat grafikformat. Det är kod. Det är kod som kan kopplas till eller inbäddas. Det kan interagera med och ändras på flugan. Med matte!

Snap.svg

Knäppa är ett JS-bibliotek för att generera och interagera med SVG. Den är utformad för moderna webbläsare. Yup, det betyder att det bara stöder IE9 + ... men om äldre webbläsare inte är din oro, gå för det.

Raphaël

Raphaël, till skillnad från Snap, är kompatibel med äldre webbläsare. Faktum är att det kan fungera med IE6 +, Safari 3+ och Chrome 5+. Om du utvecklar något för ett företagsystem där användare kan vara på äldre maskiner, kan Raphaël till exempel vara din bästa insats.

jQuery SVG

Gilla SVG och jQuery? Jag är inte förvånad. jQuery har kanske förlorat en del av den spotlight-uppmärksamhet som den en gång hade, men det är fortfarande ett go-to-bibliotek för många av oss.

jQuery SVG, då är det kanske det plugin du letar efter. Den har funktioner för animeringar, grafer och till och med tillägg. Det är rätt, tillägg för ett plugin. Browser support är IE9 +, men äldre versioner av IE kan användas med lämpliga webbläsare plugins installerade.

Jag skulle inte bero på att användare har dessa plugins, dock.

SVGMagic

SVGMagic är en drop-in, jQuery-baserad lösning för äldre webbläsare (IE 7 & 8). Istället för att man manuellt skapar nedgångsbilder för varje SVG-fil du använder kan det här pluginet skapa dem på fluga. Det hanterar bakgrundsbilder också bra också.

Hur gör det något av detta? Det upptäcker huruvida användarens webbläsare kan hantera SVG. Om så är fallet går det att sova. Om inte, kontaktar den ett PHP-script på serverns sida och berättar att det skapas en PNG-fil av de aktuella SVG-bilderna med nödvändiga dimensioner.

När det är klart skickar PHP-skriptet webbadresserna till dessa temporära återkommande bilder tillbaka till jQuery-plugin och standardadresserna ersätts. Detta tar självklart tid, så du kan eventuellt ange en platshållarbild som ska visas medan omvandlingen sker.

Ett tillvägagångssätt: För närvarande kan det inte hantera för många bilder samtidigt. Du vill inte använda den här tekniken på sidor med mer än några SVG-filer.

SVG.JS

Slutligen är här ett alternativ för byte-räknare. SVG.JS väger in på endast 11,8kb när gzipped. Trots sin lilla storlek stöder det ett imponerande antal funktioner (som anges på projektets sida):

• Animationer på storlek, position, omvandlingar, färg
• Smärtfri förlängning tack vare den modulära strukturen
• Olika användbara plugins tillgängliga
• Unified api mellan formtyper med flytt, storlek, centrum
• Bindande händelser till element
• Fullt stöd för opacitetsmasker och urklippsbana
• Textvägar, även animerade
• Elementgrupper och uppsättningar
• Dynamiska gradienter

Läs dokumentation för mer information.

Lager SVG

Inte alla är en illustratör. Åtminstone har jag verkligen aldrig varit bra på det. Således blir lagerillustrationer en ovärderlig resurs. Det kan dock vara svårt att hitta bra saker. Det som inte ser ut som Microsoft Clipart är ofta begränsat, eller dyra.

Förlora inte hoppet. Det finns många saker där ute som är av god kvalitet. Om det inte helt uppfyller dina behov, ja, det är vektorkonst. Chansen är att den kan tweaked för att möta dina behov om du har grundläggande kunskaper om vektorgrafikprogramvara.

SVG kan dock göra mer än bara lager illustrationer. Du kan också skapa mönster, stora fantasifulla bakgrunder som inte äter upp bandbredd och mycket mer. Låt oss ta en titt på vad människor har gjort för resten av oss:

SVG Clipart på openclipart.com

SVG, som ett öppet format, har många open source-entusiaster som fans. Som ett resultat är det ett av de primära format som används i vad som kan vara den största samlingen av gratis clip art där ute.

Och mycket av det är clipart-ish. Och mycket av det är amatörarbete. Det finns viss kvalitet grafik men om du tittar. Hej, det är gratis.

SVG-lager

SVG-lager är en liten sida med en relativt liten men utmärkt samling. Det är mestadels ikoner och apparatmockups, men de är alla av hög kvalitet. Om du behöver något av dessa två saker, börja här.

SVG resurser på deviantart.com

ah DeviantArt, den jättegemenskapen går fortfarande starkt. Gå till kategorin stock bilder och sök efter SVG (eller klicka på länken ovan). Igen kommer kvaliteten att variera, men det finns bra saker där om du har tid att titta.

SVG Patterns Gallery

Ett litet galleri fullt av SVG-baserade mönster. Den är utformad som mer av ett showcase, men källfilerna är alla där för din bekvämlighet.

SVG Mönster från svgeneration.com

svgeneration.com innehåller många SVG-mönster för din användning. Webbplatsen levereras med redigeringsalternativ för varje mönster, och du kan redigera koden direkt på sidan för att se dina ändringar i åtgärd. Det här är inte bara en bra resurs för färdiga mönster, men du kan ta reda på mycket hur de görs i första hand.

SVG Clipart

Konsten på denna sajt är tydligt gammaldags tecknad stil. Det är helt uppriktigt inte det som alla letar efter, men det finns det för dem som vill ha den klassiska känslan av sina illustrationer.

SVG Studio

SVG Studio erbjuder tusentals illustrationer med en tydligt modern känsla. Du kan köpa dem i små undergrupper, eller ladda ner hela katalogen på en gång. Det kommer att ge dig tillbaka 500 USD, vilket för 3000 illustrationer är inte så illa en överenskommelse.

SVG på de större aktörerna

Jag kan inte säga mycket om konsten som erbjuds på varje webbplats, eftersom den varierar kraftigt av bidragsgivaren utan övergripande stil. De största namnen är istockphoto.com,shutterstock.com,bigstockphoto.com, och canstockphoto.com.

SVG Inspiration

Vi kan läsa alla introduktioner som vi vill ha och följa alla handledning där ute. Vi kan bli experter i varje aspekt av SVG-specifikationen, och ändå kan vi fortfarande vara otroligt tråkiga om det. Vi måste titta på all potential i vilken teknik som helst för att göra det bästa möjliga.

Det är dock lättare sagt än gjort, dock. Det hjälper ofta att få en referenspunkt, något fantastiskt att se på, och visa oss exakt vilken typ av fantastiska saker vi kan göra med vad vi har. Det är vilka webbplatser som Webcreme gjorde för webbdesign i allmänhet. Det är vad CSS Zen Garden, och alla CSS-gallerierna som kom efter det gjorde för CSS-layouter.

Från och med hittills har jag inte hittat några galleritjänster dedikerade till vad som kan åstadkommas via SVG i kombination med annan webbteknologi, och det kan hjälpa till. Under tiden är här en showcase av fantastiska saker som vi hittat:

Snap Display Ad

Detta exempel är en del av Snap.svg insamling på CodePen. Behöver du ett perfekt exempel på hur SVG kan användas för att revolutionera onlineannonser? Detta är det.

Tänk på det: vissa annonsföretag säljer fortfarande annonser baserat på pixelstorlek. Det ger ingen mening i åldern av oändlig variation i skärmstorlekar och retina skärmar för att starta. Innan vi får ett bättre system än visuella annonser, kan SVG åtminstone hjälpa oss att göra annonser anpassade till webbdesignens lyhörda natur.

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

Jtop skrivbordsgränssnitt

Mozilla Developer Network, en enhet som jag fortsätter att köra in som jag forskar på webbteknik i allmänhet, har också skapat några intressanta saker gjorda med SVG. Till exempel gick de och gjorde ett helt skrivbordsgränssnitt baserad helt på webbtekniker som HTML5, JS, SVG och CSS. Det är snabbt, anpassningsbart, och jag önskar nästan att det var en del av ett riktigt operativsystem.

En tid av eftertanke

Bragt till oss av ShinyDemos (som i sin tur bringas till oss av folket vid Opera ) En tid av eftertanke kommer bokstavligen bara att överlappa en klocka över ett live-flöde från din webbkamera. Tja, om du ger det ditt tillstånd, och du har faktiskt en kamera, hur som helst. Men poängen är att det visar hur SVG-masker kan överläggas på nästan vad som helst.

oblurlay

Genom en kombination av CSS, SVG och jQuery, oblurlay skapar exakt vad namnet antyder: ett suddigt överlag, iOS-stil. Det är ett jQuery-plugin, så implementering är inte svårt, och det visar noggrant hur SVG-filter kan tillämpas på alla sorters saker, inte bara SVG-objekten själva.

Codrops demos

Codrops (tidigare nämnt i handledningssektionen) har producerat ett flertal fascinerande, imponerande och helt enkelt vackra demonstrationer för att visa upp vad SVG kan göra. Var och en förtjänar sin egen rätta del i den här artikeln, men det finns så många att jag sätter dem alla i ett. Om du inte tittar på något annat från denna "Inspiration" -sektion, kolla på dessa. Kolla in demoerna och ladda ner källfilerna. Gå sedan tacka killarna på Codrops. De förtjänar det.

Obs! Inte alla är SVG-fokuserade, men de använder alla SVG-grafik på något sätt.

Sidladdningseffekter : en uppsättning kreativa sidladdnings effekter som använder SVG-animationer med Snap.svg. Tanken är att visa ett överlag med en intressant form animering medan nytt innehåll laddas.

Idéer för Subtile Hover Effects : En del kreativa och subtila svängareffektinspiration med moderna CSS-tekniker, inklusive 3D-translate- och pseudo-element. De använder också SVG. Gå kolla in demo för den andra uppsättningen effekter.

SVG Drawing Animation : ett litet experiment som undersöker användningen av SVG-linjebildningsanimationer för att föregå utseendet på grafik eller webbsidor, vilket simulerar laddning av dem.

Menyeffekter på kanfas : En del inspiration för menyeffekter och stilar från kanvas som använder CSS-övergångar och SVG-bananimationer.

Tooltip Styles Inspiration : en liten samling av olika svängverktygetips och effekter för din inspiration. Genom att använda CSS-omvandlingar, gränsstrålar och SVG-former kan vi skapa moderna och intressanta verktygstips.

Meddelande Styles Inspiration : några enkla idéer och effekter för diskreta webbplatsanmälningar. Ett litet skript används för att visa vissa stilar och CSS-animationer används för effekterna.

Inspiration för Custom Select Elements : En del inspiration för styling av en anpassad version av väljelementet. Det finns många möjligheter och idag utforskar vi några idéer om hur man låter användaren välja ett val i stil.

Inspiration för Inline Anchor Styles : En del inspiration för kreativa och moderna inlineankarstilar och svängareffekter med olika tekniker som pseudo-elementövergångar och SVGs.

Pilnavigationsstilar : En del inspiration för pilnavigeringstyp och svängningseffekter med SVG-ikoner för pilarna, och CSS-övergångar och animeringar för effekterna.

Wobbly Slideshow Effekt : bilderna i det här bildspelet viflar när de flyttar. Effekten är baserad på Sergey Valiukhs Dribbble-skott och gjordes med Snap.svg och morphing SVG-banor ... Observera att detta är mycket experimentellt och testat endast i de senaste versionerna av moderna webbläsare.

Wrapping upp det

SVG, medan det inte är ett av de mest använda bildformaten där ute, är väl dokumenterat, starkt stödjande, och det är en stor del av Internetets framtid. Om du inte använder det som en del av din designprocess, är det nog dags att börja.

Utvald bild, sömlös vektorbild via Shutterstock.

• ← 10 gratis WordPress-plugins för februari 2015
• 21 Samarbetsverktyg för att effektivisera ditt samarbete →