Inhoud
- 01. Gesynchroniseerde animatie en audio
- 02. Geanimeerde wereldoriëntatiepunten opnieuw gemaakt in SVG
- 03. SVG-filters op HTML5-video
- 04. Een derde dimensie toevoegen aan SVG-afbeeldingen
- 05. Rendering van vectorafbeeldingen in SVG versus Flash
- 06. Een interactieve SVG-legpuzzel
- 07. SVG UI-componenten: een HTML5-ondertitelingsbalk
- 08. SVG-maskers toepassen op HTML5-video
- 09. Routetracerende kaartroutes met SVG en Raphael
- 10. Deconstructie van Trajanus-kolommen met SVG
- 11. Geanimeerde Rube Goldberg-machine in SVG
- 12. Interactieve briefkaart van Ierland in SVG
- 13. Misdaad en armoede interactieve SVG-kaart
- 14. Geanimeerde teksten in SVG
- 15. Analyse met Raphael en SVG
- 16. Visuele weergave van Twitter-verbindingen
- 17. Blobulair
- 18. De griezelige mond in SVG
- 19. Geanimeerde SVG-klok
- 20. Interactieve SVG op de iPad
- Vond dit leuk? Lees deze!
SVG (of Scalable Vector Graphics) is een XML-gebaseerde bestandsindeling waarmee ontwikkelaars en ontwerpers hoogwaardige, dynamische grafische afbeeldingen en grafische toepassingen kunnen maken met een grote mate van precisie.
Alle moderne browsers ondersteunen het renderen van SVG: voor oudere browsers zoals IE6, 7 en 8 zonder native ondersteuning kunt u echter terugvallen op polyfills zoals SVG Web die Flash gebruiken voor het renderen van inhoud. Hierdoor kunt u gemakkelijk de meeste gebruikers online targeten zonder u zorgen te hoeven maken over compatibiliteitsproblemen.
Voor ontwikkelaars van mobiele websites die zich afvragen wat compatibiliteit is, kan ik met genoegen melden dat iOS 3.2+, Opera Mini 5+, Opera Mobile 10+ en Android 3+ ook ondersteuning bieden voor het direct weergeven van SVG-afbeeldingen. Omdat er een paar overeenkomsten zijn tussen wat het canvas> -element en SVG te bieden hebben, vragen ontwikkelaars zich vaak af welke van deze ze moeten kiezen. Het antwoord op deze zorg is eigenlijk allebei.
Canvas biedt een hoogwaardig canvas dat het meest geschikt is voor het renderen van rasterafbeeldingen voor games zoals sprites, beeldbewerking en toepassingen die manipulatiemogelijkheden per pixel vereisen. Helaas nemen de prestaties van canvas-apps af naarmate de resoluties toenemen en worden deze niet aanbevolen voor gebruik in gebruikersinterfaces op volledig scherm.
SVG is resolutie-onafhankelijk, waardoor het ideaal is voor het renderen van platformonafhankelijke gebruikersinterfacecomponenten, animaties en applicaties waarbij elk element toegankelijk moet zijn via de DOM. Volgens canvas> kan het langzamer gaan als de complexiteit toeneemt, maar het werkt nog steeds erg goed voor het creëren van zeer interactieve gebruikerservaringen.
We gaan 20 uitstekende voorbeelden van SVG-gebruik in het wild bekijken, dus start een moderne browser en bekijk de onderstaande demo's.
- Lees hier al onze webdesignartikelen
01. Gesynchroniseerde animatie en audio
Een belangrijke reden waarom ontwerpers en ontwikkelaars in eerste instantie massaal naar Flash gingen, was het gemak waarmee ze meeslepende, geanimeerde gebruikerservaringen konden creëren met een respectabele framesnelheid.
Nu we begrijpen hoe krachtig in-browser, vectorgebaseerde ervaringen kunnen zijn in combinatie met andere multimedia (zoals de audiotag), kunnen we beginnen met het maken van dingen zoals deze demo van Vincent Hardy: een gesynchroniseerde audio en grafische animatie die SVG combineert , JavaScript en een gesimuleerde 'camera'. Een goed voorbeeld van SVG in actie - niet slecht voor iets waarvoor geen plug-ins van derden nodig zijn!
02. Geanimeerde wereldoriëntatiepunten opnieuw gemaakt in SVG
Een van de echte tests voor het vergelijken van bestaande benaderingen om een taak te volbrengen met nieuwe, is evalueren in hoeverre u kunt gaan door een voorbeeld te repliceren van wat er al is.
Dat is precies wat Marek Raida deed toen hij een Flash-banner van verschillende wereldoriëntatiepunten in de hoek van een pagina zag bewegen en besloot om het opnieuw te maken in SVG. Het resultaat van zijn inspanningen is een lichtgewicht demo met een bestandsgrootte die 33 procent kleiner is dan het Flash-alternatief. Dit voorbeeld van SVG ziet er veel beter uit en is zelf ook niet zo moeilijk te coderen!
03. SVG-filters op HTML5-video
Hoewel SVG veel kracht biedt op het gebied van vectorafbeeldingen, heeft het ook een aantal creatieve toepassingen daarbuiten. In deze demo laat Paul Irish (van het Google Chrome dev relations-team) zien hoe je SVG en CSS kunt combineren om een aantal behoorlijk spectaculaire visuele filters voor video-inhoud te produceren. Het vervagingseffect is misschien wel het meest interessante, maar andere effecten, zoals het omkeren van de frame-inhoud, zijn ook behoorlijk interessante proofs of concept.
04. Een derde dimensie toevoegen aan SVG-afbeeldingen
Wanneer het onderwerp van grafische weergave in de browser wordt besproken, is het onmogelijk om te praten over het niveau van beschikbare 2D- en 3D-mogelijkheden. De impact op online gaming die dit met zich meebrengt, is genoeg om veel ontwerpers en ontwikkelaars aan te zetten om op te letten, dus hoe kan SVG ons hierbij helpen?
Welnu, in dit volgende voorbeeld van SVG door Nicolas Debeissat krijgen we een techniek voor het simuleren van geloofwaardige 3D-perspectieven op objecten met behulp van enkele JavaScript-trucs en SVG-vectoren. Zorg ervoor dat u de vervolgkeuzelijst op de pagina bekijkt, want er zijn tal van voorbeelden beschikbaar om uw 3D-eetlust op te wekken.
05. Rendering van vectorafbeeldingen in SVG versus Flash
Hier is een interessant voorbeeld van SVG van Brad Neuberg en SVG Web: een JavaScript-bibliotheek die SVG-ondersteuning polyfills voor browsers die dit nog niet volledig ondersteunen. Met behulp van de bibliotheek (en inclusief native SVG-ondersteuning) kunt u zich onmiddellijk richten op bijna 95 procent van de bestaande geïnstalleerde webbasis, wat vrij aanzienlijk is als u wilt overwegen om SVG in productie te gebruiken.
Het mooie van dit voorbeeld is dat je kunt vergelijken hoe vectorafbeeldingen eruit kunnen zien als ze worden weergegeven met SVG in plaats van met Flash, maar dit kan tijdens runtime gemakkelijk worden omgeschakeld, afhankelijk van het ondersteuningsniveau dat je browser ervoor heeft. Absoluut een must-see voor ontwikkelaars die geïnteresseerd zijn in het verder onderzoeken van de weergavemogelijkheden van SVG.
06. Een interactieve SVG-legpuzzel
Toen Flash voor het eerst uitkwam, waren enkele van de eerste voorbeelden die we ervan in het wild zagen, basispuzzels en -games. Volgend voorbeeld, hier is een voorbeeld van een SVG-puzzel gebaseerd op Flickr, gemaakt door @h__r__j. Het geeft je een selectie van afbeeldingen en laat je een puzzel maken uit de afbeeldingen die je selecteert. Lastig om te voltooien, maar toch leuk en een aantal interessante code erachter!
07. SVG UI-componenten: een HTML5-ondertitelingsbalk
Zoals vermeld in de inleiding, is een gebied waar Flash in het verleden intensief is gebruikt en waar SVG ook in uitblinkt, creatieve vectorgebaseerde gebruikersinterfaces. Met schermen en schermresoluties die voortdurend in omvang toenemen, is het voor ontwikkelaars noodzakelijk om te kunnen voorzien in hoogwaardige UI-componenten zonder zich zorgen te hoeven maken over de kwaliteit die eronder lijdt bij een hogere of lagere resolutie. Dit is waar SVG bijzonder nuttig van pas komt.
In dit geweldige voorbeeld van SVG is een interactieve ondertitelbalk aan een HTML5-videospeler gekoppeld, zodat u gemakkelijk naadloos tussen ondertitelingstalen kunt schakelen.
08. SVG-maskers toepassen op HTML5-video
Een paar jaar geleden herinner ik me dat ik aan een project werkte waarbij we een masker moesten aanbrengen rond ingebedde Flash-video, dus het leek erop dat de video precies in een blok in de vorm van tekst werd afgespeeld. Zie, een vergelijkbaar effect is nu mogelijk met een combinatie van inline SVG, HTML5-video en een beetje CSS.
Dit voorbeeld van SVG, gemaakt door webontwikkelaar Mike Thomas, werkt momenteel alleen in Firefox 4 en hoger, maar het is een inspirerend voorbeeld van enkele van de echt creatieve dingen die we in de toekomst kunnen ontwikkelen zodra er een hoger niveau van normalisatie is. tussen wat verschillende browserleveranciers bieden.
09. Routetracerende kaartroutes met SVG en Raphael
Hier is een interessant praktisch voorbeeld van SVG en hoe het uw gebruikerservaring ten goede kan komen. Kaarten zijn iets dat we allemaal online gebruiken, maar zou het niet nog beter zijn als we het pad langs routes gemakkelijk zouden kunnen plotten en animeren om die reizen net iets duidelijker te maken? In deze demo op A List Apart bekijkt Brian Suda het toevoegen van aangepaste geanimeerde routes aan kaarten met wat hulp van SVG tot Raphael.
10. Deconstructie van Trajanus-kolommen met SVG
Leuk weetje: de zuil van Trajanus is een Romeinse zuil in Italië die de overwinning van de Romeinse keizer Trajanus in de Dacische oorlogen herdenkt. Aan de binnenkant van de kolommen bevindt zich een wenteltrap, die iemand heeft besloten deze volledig in pseudo-3D te modelleren met SVG.
Het beste deel van dit voorbeeld van SVG is dat het volledig interactief is, waardoor u een gedeelte van de afbeelding kunt selecteren om uit te trekken. Deze geanimeerde deconstructie van architectuur is waarschijnlijk een van de leukste toepassingen van SVG die ik tot nu toe heb gezien en ik raad je zeker aan om het eens te bekijken.
11. Geanimeerde Rube Goldberg-machine in SVG
De kans is groot dat je waarschijnlijk op een bepaald moment in je leven een Rube Goldberg-machine (RGM) in actie hebt gezien zonder het te weten, mogelijk in een tekenfilm of in een wetenschapsshow. RGM's zijn
opzettelijk overontwikkelde machines die eenvoudige taken op een zeer complexe manier uitvoeren, meestal inclusief een kettingreactie.
In het volgende voorbeeld van SVG zie je een papieren vliegtuigje overvliegen om een bal te raken die vervolgens weer een kettingreactie veroorzaakt, domino's en uiteindelijk een lamp die oplicht. Ik zei dat het te veel ontworpen was, nietwaar ?!
12. Interactieve briefkaart van Ierland in SVG
Voortbordurend op de path-tracing-demo, besloot SVG-fan en alomvattende geweldige ontwikkelaar Marek Raida om zijn reis naar Ierland te documenteren in deze interactieve SVG-ansichtkaart die zowel route-tracing, grootschalige animatie en andere effecten zoals rotatie laat zien.
13. Misdaad en armoede interactieve SVG-kaart
Het visualiseren van grote hoeveelheden gegevens op een manier die door de gewone man of vrouw van de straat kan worden begrepen, is niet altijd een gemakkelijke taak. In plaats van te proberen een volledige dataset uit te leggen, kan het veel eenvoudiger zijn om meerdere weergaven van de gegevens te bieden, zodat gebruikers van context kunnen wisselen om door te gaan naar een subset van een grotere set waarin ze geïnteresseerd zijn.
In dit voorbeeld van SVG worden de Amerikaanse misdaad- en armoedecijfers weergegeven op een kaart van de VS op staatsniveau, maar u krijgt ook een aantal manieren om uw weergave van de kaart te veranderen, waaronder zoomen, selecteren en verplaatsen. Als je geïnteresseerd bent om aan de slag te gaan met je eigen kaarten in SVG, heeft Dasha Salo een tutorial die laat zien hoe gemakkelijk dit kan worden bereikt met Raphael.
14. Geanimeerde teksten in SVG
Een ander geweldig voorbeeld van SVG uit de categorie ’I can't believe that's not Flash’ is deze demo van Vincent Hardy, waarin hij SVG, weblettertypen en de audiotag combineert om een visueel aantrekkelijke animatie van songteksten te maken die wordt gesynchroniseerd met een muziektrack. Bekijk ook het andere voorbeeld dat wordt vermeld voor een Ghandi-citaatdemo!
15. Analyse met Raphael en SVG
Voor het geval je het nog niet eerder hebt gebruikt, Raphaël is een JavaScript-bibliotheek die het werken met vectorafbeeldingen op internet helpt vereenvoudigen. De site ondersteunt de meeste browsers vanaf IE6 + en heeft een aantal uitstekende voorbeelden van het gebruik van SVG om indrukwekkende visualisaties van gegevens te maken.
Mijn eigen persoonlijke favoriet is de analysedemo waarmee u kunt zien hoe gemakkelijk SVG Flash kan vervangen in toepassingen voor het volgen van grote sites. Als je geïnteresseerd bent in een versie van Raphael met meer focus op grafieken, zou je ook gRaphaël kunnen bekijken.
16. Visuele weergave van Twitter-verbindingen
Twings is een tool waarmee je je Twitter-volgers in ringen kunt visualiseren op basis van een aantal verschillende factoren. Het is niet alleen een goed voorbeeld van SVG, het is ook een interessant voorbeeld van hoe u verzoeken aan de Twitter API kunt segmenteren wanneer u informatie per volger wilt verkrijgen die verder gaat dan de limieten van wat de API gewoonlijk per verzoek kan retourneren (100). Vergeet niet om naar de hoofdwebsite te gaan waar Ivan Lazarevic uitlegt hoe hij Twings heeft gemaakt met een paar extra tips over de tool!
17. Blobulair
Blobular is een leuk voorbeeld van SVG door Cameron Adams oftewel The Man In Blue waarmee je de kleur, viscositeit en grootte van klodders kunt veranderen! Je kunt experimenteren met het uitbreiden van de randen van een blob tot bepaalde limieten en zodra een drempel is overschreden, kan een blog daadwerkelijk andere blobs voortbrengen. Je zult dit waarschijnlijk niet gebruiken om de volgende Google+ te maken, maar het is nog steeds een behoorlijk interessante implementatie.
18. De griezelige mond in SVG
Het experiment met de griezelige mond van Doug Schepers geeft ons een kijkje in de menselijke mond in SVG. Kent u het verschil tussen de alveolaire en alveopalatale? Ik ook niet, maar dit is een perfect voorbeeld van SVG, waarbij vectorafbeeldingen worden gecombineerd met animatie om online onderwijs te helpen verbeteren op de manier waarop Flash in het verleden is gebruikt voor wetenschappelijke en biologiediagrammen.
19. Geanimeerde SVG-klok
In deze demo hebben we een voorbeeld van SVG-weergave van een draaiende digitale klok. Ik vond het effect erg interessant, want dit is niet alleen een goed voorbeeld van geanimeerde tekst, maar merk ook op hoe de achterkant van elk personage van kleur verandert op basis van de positie in de geanimeerde rotatie.
20. Interactieve SVG op de iPad
Zoals vermeld in de inleiding, zijn SVG-afbeeldingen toegankelijk via de DOM, dus het is mogelijk om gebeurtenishandlers eraan toe te voegen op dezelfde manier als met andere elementen op de pagina. Met dit in gedachten heeft Gert-jan Van Der Wel een eenvoudige demo gemaakt die laat zien hoe je kunt communiceren met SVG-afbeeldingen op de iPad. Als je hebt gespeeld met objectbewegingen in de browser op iOS-apparaten, zal veel hiervan je bekend voorkomen, maar het is een nuttige demo voor degenen die nog niet de kans hebben gehad om ernaar te kijken!
Vond dit leuk? Lees deze!
- Hoe een app te bouwen
- Gratis selectie van graffiti-lettertypen
- Illustrator-tutorials: geweldige ideeën om vandaag te proberen!
- De ultieme gids voor het ontwerpen van de beste logo's
- De beste gratis weblettertypen voor ontwerpers
- Handige en inspirerende flyersjablonen
- De beste 3D-films van 2013
- Ontdek wat de toekomst biedt voor Augmented Reality
Addy Osmani is een gebruikersinterfaceontwerper en momenteel een software-engineer voor AOL. Hij is ook lid van de jQuery Bug Triage- en API Docs-teams. Zijn wekelijkse UI-berichten zijn te vinden op AddyOsmani.com.
Welke soorten SVG-toepassingen hebben het meest indruk op u gemaakt? Welke hadden onze lijst moeten maken? Laat het ons weten in de comments!
