Innehåll
- 01. Synkroniserad animering och ljud
- 02. Animerade världens landmärken återskapas i SVG
- 03. SVG-filter på HTML5-video
- 04. Lägga till en tredje dimension i SVG-grafik
- 05. Rendering av vektorgrafik i SVG vs Flash
- 06. En interaktiv SVG-pussel
- 07. SVG UI Components: en HTML5-textfält
- 08. Tillämpa SVG-masker över HTML5-video
- 09. Sökvägar till kartor med SVG och Raphael
- 10. Dekonstruera Trajan-kolumner med SVG
- 11. Animerad Rube Goldberg-maskin i SVG
- 12. Interaktivt vykort från Irland i SVG
- 13. Brottslighet och fattigdom interaktiv SVG-karta
- 14. Animerade texter i SVG
- 15. Analys med Raphael och SVG
- 16. Visuell representation av Twitter-anslutningar
- 17. Blobular
- 18. Den läskiga munnen i SVG
- 19. Animerad SVG-klocka
- 20. Interaktiv SVG på iPad
- Gillade detta? Läs dessa!
SVG (eller Scalable Vector Graphics) är ett XML-baserat filformat som gör det möjligt för utvecklare och designers att skapa högkvalitativa, dynamiska grafik- och grafiska applikationer med hög precision.
Alla moderna webbläsare stöder rendering av SVG: för äldre webbläsare som IE6, 7 och 8 utan inbyggt stöd kan du dock falla tillbaka på flerfyllningar som SVG Web som använder Flash för att återge innehåll. Detta gör att du enkelt kan rikta in dig på de flesta användare online utan att oroa dig för kompatibilitetsproblem.
För mobila webbutvecklare som undrar om kompatibilitet är jag glad att kunna rapportera att iOS 3.2+, Opera Mini 5+, Opera Mobile 10+ och Android 3+ också stöder återgivning av SVG-grafik direkt. Eftersom det finns några likheter mellan vad canvas> -elementet och SVG har att erbjuda, undrar utvecklare ofta vilka av dessa de ska välja att använda. Svaret på denna oro är faktiskt båda.
Canvas erbjuder en högpresterande duk som är bäst lämpad för att rendera rastergrafik för spel som sprites, bildredigering och applikationer som kräver funktioner för manipulation per pixel. Tyvärr försämras arbetsytan för canvasappar när upplösningarna ökar och rekommenderas inte för användning i helskärmsgränssnitt.
SVG är upplösningsoberoende, vilket gör den idealisk för rendering av gränssnittskomponenter, animationer och applikationer över olika plattformar där varje element måste vara tillgängligt via DOM. Enligt canvas> kan det sakta ner när komplexiteten ökar, men fungerar fortfarande mycket bra för att skapa mycket interaktiva användarupplevelser.
Vi kommer att ta en titt på 20 utmärkta exempel på SVG-användning ute i naturen, så starta en modern webbläsare och kolla in demos nedan.
- Läs alla våra webbdesignartiklar här
01. Synkroniserad animering och ljud
En stor anledning till att designers och utvecklare ursprungligen strömmade till att använda Flash var dess enkelhet att skapa uppslukande, animerade användarupplevelser med en respektabel bildhastighet.
Nu när vi förstår hur kraftfulla, vektorbaserade upplevelser i webbläsaren kan vara när de paras ihop med andra multimedia (som ljudtaggen), kan vi börja skapa saker som denna demo av Vincent Hardy: en synkroniserad ljud- och grafisk animering som kombinerar SVG , JavaScript och en simulerad 'kamera'. Ett bra exempel på SVG i aktion - inte dåligt för något som inte kräver plug-ins från tredje part!
02. Animerade världens landmärken återskapas i SVG
Ett av de verkliga testerna för att jämföra befintliga metoder för att uppnå en uppgift med nya är att utvärdera hur långt du kan ta replikera ett exempel på vad som redan finns där ute.
Det var precis vad Marek Raida gjorde när han såg en Flash-banner med flera världsmärken som animerade i hörnet på en sida och bestämde sig för att försöka återskapa den i SVG. Resultatet av hans ansträngningar är en lätt demo som klockar in på en filstorlek som är 33 procent mindre än Flash-alternativet. Det här exemplet på SVG lyckas se mycket bättre ut och är inte så svårt att koda själv heller!
03. SVG-filter på HTML5-video
Medan SVG erbjuder mycket kraft i vektorgrafikutrymmet, har det också ett antal kreativa användningsområden utanför det. I den här demonstrationen demonstrerar Paul Irish (från Google Chrome dev relations team) hur du kan kombinera SVG och CSS för att producera några ganska spektakulära visuella filter för videoinnehåll. Suddighetseffekten är möjligen den mest intressanta men andra effekter som att vända raminnehållet är också ganska intressanta bevis på konceptet.
04. Lägga till en tredje dimension i SVG-grafik
Närhelst ämnet grafisk rendering i webbläsaren diskuteras är det omöjligt att undvika att prata om nivån på tillgängliga 2D- och 3D-funktioner. Effekten på onlinespel som detta presenterar är tillräckligt för att få många designers och utvecklare att uppmärksamma, så hur kan SVG hjälpa oss med detta?
I det här nästa exemplet av SVG av Nicolas Debeissat presenteras en teknik för att simulera trovärdiga 3D-perspektiv till objekt med hjälp av några JavaScript-trick och SVG-vektorer. Var noga med att kolla in rullgardinsmenyn på sidan eftersom det finns många exempel tillgängliga för din 3D-aptit.
05. Rendering av vektorgrafik i SVG vs Flash
Här är ett intressant exempel på SVG från Brad Neuberg och SVG Web: ett JavaScript-bibliotek som fyller SVG-stöd för webbläsare som inte stöder det ännu. Med hjälp av biblioteket (och inklusive inbyggt SVG-stöd) kan du direkt rikta in dig på nästan 95 procent av den befintliga installerade webbbasen, vilket är ganska stort om du vill överväga att använda SVG i produktionen.
Det fantastiska med detta exempel är att det låter dig jämföra hur vektorgrafik kan se ut när den renderas med SVG i motsats till Flash, men detta kan enkelt bytas vid körning beroende på vilken nivå din webbläsare har för det. Definitivt ett måste för utvecklare som är intresserade av att utforska SVG: s renderingskapacitet ytterligare.
06. En interaktiv SVG-pussel
Tillbaka när Flash först kom ut var några av de första exemplen vi såg det i naturen grundläggande pussel och spel. Följande färg, här är ett exempel på ett SVG-pussel baserat på Flickr, skapat av @h__r__j. Det ger dig ett urval av bilder och låter dig skapa ett pussel av alla du väljer. Knepigt att slutföra, men roligt och lite intressant kod bakom det ändå!
07. SVG UI Components: en HTML5-textfält
Som nämnts i inledningen är ett område där Flash har använts kraftigt tidigare som SVG också utmärker sig på, kreativa vektorbaserade användargränssnitt. Med skärmar och skärmupplösningar som ständigt ökar i storlek är det nödvändigt för utvecklare att kunna tillgodose högkvalitativa användargränssnittskomponenter utan att oroa sig för att kvaliteten lider av en högre eller lägre upplösning. Det är här SVG är särskilt användbart.
I det här fantastiska exemplet på SVG är en interaktiv undertextfält ansluten till en HTML5-videospelare, så att du enkelt kan växla mellan undertextspråk sömlöst.
08. Tillämpa SVG-masker över HTML5-video
För några år sedan minns jag att jag arbetade med ett projekt där vi var tvungna att applicera en mask runt inbäddad Flash-video, så det verkade som om videon spelades direkt i ett block i form av en text. Se och se, en mycket liknande effekt är nu möjlig med en kombination av inbyggd SVG, HTML5-video och lite CSS.
Detta exempel på SVG, skapat av webbutvecklaren Mike Thomas, fungerar för närvarande bara i Firefox 4 och senare, men det är ett inspirerande exempel på några av de riktigt kreativa saker vi kommer att kunna utveckla i framtiden när det finns en större normaliseringsnivå mellan vad olika webbläsarleverantörer erbjuder.
09. Sökvägar till kartor med SVG och Raphael
Här är ett intressant praktiskt exempel på SVG och hur det kan gynna din användarupplevelse. Kartor är något som vi alla använder online, men skulle det inte vara ännu bättre om vi enkelt kunde plotta och animera vägen längs rutter för att göra resorna bara lite tydligare? I denna demo på A List Apart tar Brian Suda en titt på att lägga till anpassade animerade rutter till kartor med lite hjälp från SVG genom Raphael.
10. Dekonstruera Trajan-kolumner med SVG
Roligt faktum: Trajans kolonn är en romersk kolonn i Italien som firar den romerska kejsaren Trajans seger i Dacian Wars. På insidan av kolumnerna finns en spiraltrappa, som någon bestämde sig för att helt modellera i pseudo-3D med SVG.
Den bästa delen av detta exempel på SVG är att det är helt interaktivt, så att du kan välja en del av grafiken som ska dras ut. Denna animerade dekonstruktion av arkitektur är förmodligen en av de roligaste användningarna av SVG jag har sett än och jag rekommenderar definitivt att kolla in den.
11. Animerad Rube Goldberg-maskin i SVG
Chansen är stor att du förmodligen har sett en Rube Goldberg-maskin (RGM) i aktion någon gång i ditt liv utan att veta det, eventuellt i en tecknad film eller i en science show. RGM är
avsiktligt överkonstruerade maskiner som utför enkla uppgifter på ett mycket komplext sätt, vanligtvis inklusive en kedjereaktion.
I följande exempel på SVG kan du se ett pappersflygplan flyga över för att slå en boll som sedan utlöser en ny kedjereaktion, dominos och slutligen en lampa tänds. Jag sa att det var överkonstruerat, eller hur ?!
12. Interaktivt vykort från Irland i SVG
SVG-fan och den fantastiska utvecklaren Marek Raida, som utvidgade sin vägspårningsdemo, bestämde sig för att dokumentera sin resa till Irland i detta interaktiva SVG-vykort som visar både rutt-spårning, animering i stora områden och andra effekter som rotation.
13. Brottslighet och fattigdom interaktiv SVG-karta
Att visualisera stora datamängder på ett sätt som kan förstås av den vardagliga mannen eller kvinnan utanför gatan är inte alltid en lätt uppgift. I stället för att försöka förklara en hel datamängd kan det vara mycket enklare att erbjuda flera visningar av data så att användarna kan växla sammanhang för att gå ner till en delmängd av en större uppsättning som de är intresserade av att visa.
I detta exempel på SVG visas siffrorna för USA: s brottslighet och fattigdom på en karta över USA på statsnivå, men du får också ett antal sätt att ändra dina synpunkter på kartan inklusive zoomning, urval och rörelse. Om du är intresserad av att komma igång med dina egna kartor i SVG, har Dasha Salo en handledning som visar hur enkelt detta kan uppnås med Raphael.
14. Animerade texter i SVG
Ett annat bra exempel på SVG från kategorin 'Jag kan inte tro att det inte är Flash' är denna demo från Vincent Hardy där han kombinerar SVG, webbfonter och ljudtaggen för att skapa en visuellt tilltalande animering av texter som synkroniseras med ett musikspår. Ta också en titt på det andra exemplet som listas för en demo från Ghandi!
15. Analys med Raphael och SVG
Om du inte har använt det tidigare är Raphaël ett JavaScript-bibliotek som hjälper dig att förenkla arbetet med vektorgrafik på nätet. Stöd för de flesta webbläsare från IE6 + och uppåt, dess webbplats har några utmärkta exempel på att använda SVG för att skapa imponerande visualiseringar av data.
Min egen personliga favorit är analysdemo som låter dig se hur lätt SVG skulle kunna ersätta Flash i stora webbplatsspårningsapplikationer. Om du är intresserad av en version av Raphael med mer fokus på diagram kan du också kolla in gRaphaël.
16. Visuell representation av Twitter-anslutningar
Twings är ett verktyg som låter dig visualisera dina Twitter-följare i ringar baserat på ett antal olika faktorer. Förutom att vara ett bra exempel på SVG, är det också ett intressant exempel på hur man segmenterar förfrågningar till Twitter API när du behöver få information per följare efter gränserna för vad API normalt kan returnera per begäran (100). Glöm inte att gå till huvudwebbplatsen där Ivan Lazarevic förklarar hur han skapade Twings med några extra tips om verktyget!
17. Blobular
Blobular är ett roligt exempel på SVG av Cameron Adams alias The Man In Blue som låter dig ändra färg, viskositet och storlek på brunnar, blobs! Du kan experimentera med att utöka kanterna på en blob till vissa gränser och när en tröskel har passerat kan en blogg faktiskt skapa andra blob. Du kommer förmodligen inte att använda detta för att skapa nästa Google+, men det är fortfarande en ganska intressant implementering.
18. Den läskiga munnen i SVG
Doug Schepers experiment med "läskig mun" ger oss en inblick i människans mun i SVG. Känner du till skillnaden mellan alveolär och alveopalatal? Det gjorde jag inte heller, men det här är ett perfekt exempel på SVG, som kombinerar vektorgrafik med animering för att förbättra onlineutbildningen på det sätt som Flash tidigare har använts för vetenskapliga och biologiska diagram.
19. Animerad SVG-klocka
I denna demo har vi ett exempel på att SVG återger en snurrande digital klocka. Jag tyckte att effekten var väldigt intressant eftersom det inte bara är ett bra exempel på animerad text, men märker hur baksidan av varje karaktär ändrar färg baserat på positionen i den animerade rotationen.
20. Interaktiv SVG på iPad
Som nämnts i inledningen kan SVG-grafik nås via DOM så det är möjligt att koppla händelsehanterare till dem på samma sätt som du kan med andra element på sidan. Med detta i åtanke skapade Gert-jan Van Der Wel en enkel demo som visar hur du kan interagera med SVG-grafik på iPad. Om du har spelat med objektrörelser i webbläsaren på iOS-enheter kommer mycket av detta att se bekant ut för dig, men det är en användbar demo för dem som inte har haft en chans att titta på det ännu!
Gillade detta? Läs dessa!
- Hur man bygger en app
- Gratis graffiti typsnitt val
- Illustrator tutorials: fantastiska idéer att prova idag!
- Den ultimata guiden för att designa de bästa logotyperna
- De bästa gratis webbteckensnitt för designers
- Användbara och inspirerande flygmallar
- De bästa 3D-filmerna från 2013
- Upptäck vad som är nästa för Augmented Reality
Addy Osmani är designer för användargränssnitt och för närvarande programvaruutvecklare för AOL. Han är också medlem i jQuery Bug Triage och API Docs-team. Hans veckovisa UI-inlägg finns på AddyOsmani.com.
Vilken typ av SVG-användningar har imponerat dig mest? Vilka borde ha gjort vår lista? Låt oss veta i kommentarerna!
