20 exemples de SVG qui feront tomber votre mâchoire

SVG (ou Scalable Vector Graphics) est un format de fichier basé sur XML qui permet aux développeurs et aux concepteurs de créer des graphiques dynamiques de haute qualité et des applications graphiques avec un grand niveau de précision.
Tous les navigateurs modernes prennent en charge le rendu SVG: cependant, pour les navigateurs plus anciens comme IE6, 7 et 8 sans support natif, vous pouvez vous rabattre sur des polyfills tels que Web SVG qui utilisent Flash pour le rendu du contenu. Cela vous permet de cibler facilement la majorité des utilisateurs en ligne sans vous soucier des problèmes de compatibilité.

Pour les développeurs Web mobiles qui s'interrogent sur la compatibilité, je suis heureux d'annoncer que iOS 3.2+, Opera Mini 5+, Opera Mobile 10+ et Android 3+ prennent également en charge le rendu des graphiques SVG prêts à l'emploi. Comme il existe quelques similitudes entre ce que l'élément et le SVG ont à offrir, les développeurs se demandent souvent lesquels ils devraient choisir d'utiliser. La réponse à cette préoccupation est en fait les deux.

Canvas offre un canevas hautes performances qui convient le mieux au rendu des graphiques raster pour les jeux tels que les sprites, l'édition d'image et les applications qui nécessitent des capacités de manipulation par pixel. Malheureusement, les performances des applications de canevas se dégradent à mesure que les résolutions augmentent et ne sont pas recommandées pour une utilisation dans des interfaces utilisateur plein écran.

SVG est indépendant de la résolution, ce qui le rend idéal pour le rendu des composants d'interface utilisateur multiplateforme, des animations et des applications où chaque élément doit être accessible via le DOM. Cela peut ralentir lorsque la complexité augmente, mais fonctionne toujours très bien pour créer des expériences utilisateur hautement interactives.

Nous allons jeter un œil à 20 excellents exemples d'utilisation de SVG dans la nature, alors lancez un navigateur moderne et consultez les démos ci-dessous.

  • Lisez tous nos articles sur la conception Web ici

01. Animation et audio synchronisés

Exemples de SVG: Vincent Hardy

L'une des principales raisons pour lesquelles les concepteurs et les développeurs se sont d'abord tournés vers l'utilisation de Flash était sa facilité à créer des expériences utilisateur immersives et animées avec une fréquence d'images respectable.



Maintenant que nous comprenons à quel point les expériences vectorielles dans le navigateur peuvent être puissantes lorsqu'elles sont associées à d'autres multimédias (comme la balise audio), nous pouvons commencer à créer des choses comme cette démo par Vincent Hardy : une animation audio et graphique synchronisée combinant SVG, JavaScript et une simulation de «caméra». Un excellent exemple de SVG en action - pas mal pour quelque chose qui ne nécessite pas de plug-ins tiers!

02. Repères du monde animés recréés en SVG

Exemples de SVG: Marek Raida

L'un des véritables tests pour comparer les approches existantes pour réaliser une tâche avec de nouvelles consiste à évaluer jusqu'où vous pouvez aller en reproduisant un exemple de ce qui existe déjà.

C'est exactement ce que Marek Raida a fait quand il a vu une bannière Flash de plusieurs monuments du monde s'animer dans le coin d'une page et a décidé d'essayer de la recréer en SVG. Le résultat de ses efforts est une démo légère dont la taille de fichier est 33% plus petite que son alternative Flash. Cet exemple de SVG réussit à mieux paraître et n'est pas non plus difficile à coder vous-même!

comment dessiner une lionne étape par étape

03. Filtres SVG sur vidéo HTML5

Exemples de SVG: Paul Irish

Alors que SVG offre une grande puissance dans l'espace des graphiques vectoriels, il a également un certain nombre d'utilisations créatives en dehors de celui-ci. Dans cette démo , Paul Irish (de l'équipe des relations avec les développeurs de Google Chrome) montre comment combiner SVG et CSS pour produire des filtres visuels assez spectaculaires pour le contenu vidéo. L'effet de flou est peut-être le plus intéressant, mais d'autres effets tels que l'inversion du contenu du cadre sont également des preuves de concept assez intéressantes.

04. Ajout d'une troisième dimension aux graphiques SVG

Exemples de SVG: Nicolas Debeissat

Chaque fois que le sujet du rendu graphique dans le navigateur est abordé, il est impossible d'éviter de parler du niveau de capacités 2D et 3D disponibles. L'impact sur les jeux en ligne que cela présente est suffisant pour inciter de nombreux concepteurs et développeurs à y prêter attention, alors comment SVG peut-il nous aider?

Eh bien, dans ce prochain exemple de SVG par Nicolas Debeissat, on nous présente une technique pour simuler des perspectives 3D crédibles sur des objets en utilisant des astuces JavaScript et des vecteurs SVG. N'oubliez pas de consulter la liste déroulante sur la page car il existe de nombreux exemples disponibles pour aiguiser votre appétit 3D.

05. Rendu de graphiques vectoriels en SVG vs Flash

Exemples de SVG: Brad Neuberg

Voici un intéressant exemple de SVG de Brad Neuberg et SVG Web : une bibliothèque JavaScript qui polyfile le support SVG pour les navigateurs qui ne le supportent pas encore complètement. En utilisant la bibliothèque (et en incluant le support SVG natif), vous pouvez cibler instantanément près de 95% de la base Web installée existante, ce qui est assez considérable si vous souhaitez envisager d'utiliser SVG en production.

L'avantage de cet exemple est qu'il vous permet de comparer l'apparence des graphiques vectoriels lors du rendu à l'aide de SVG par opposition à Flash, mais cela peut être facilement changé au moment de l'exécution en fonction du niveau de support de votre navigateur. Certainement un incontournable pour les développeurs intéressés à explorer davantage les capacités de rendu de SVG.

06. Un puzzle SVG interactif

Exemples de SVG: puzzle

À l'époque de la sortie de Flash, certains des premiers exemples que nous en avons vus dans la nature étaient des puzzles et des jeux de base. Suit, voici un exemple de puzzle SVG basé sur Flickr, créé par @h__r__j . Il vous donnera une sélection d'images et vous permettra de générer un puzzle à partir de celles que vous sélectionnez. Difficile à compléter, mais amusant et un code intéressant derrière tout de même!

07. Composants SVG UI: une barre de sous-titres HTML5

Exemples de SVG: barre de sous-titres

Comme mentionné dans l'introduction, un domaine dans lequel Flash a été largement utilisé dans le passé et dans lequel SVG excelle également est celui des interfaces utilisateur créatives basées sur des vecteurs. La taille des écrans et des résolutions d'écran augmentant constamment, il est nécessaire que les développeurs soient en mesure de fournir des composants d'interface utilisateur de haute qualité sans craindre que la qualité ne souffre à une résolution supérieure ou inférieure.C'est là que SVG est particulièrement utile.

Dans ce bel exemple de SVG , une barre de sous-titres interactive est attachée à un lecteur vidéo HTML5, vous permettant de basculer facilement entre les langues de sous-titres de manière transparente.

08. Application de masques SVG sur une vidéo HTML5

Exemples de SVG: masques sur vidéo

Il y a quelques années, je me souviens avoir travaillé sur un projet où nous devions appliquer un masque autour de la vidéo Flash intégrée, il est donc apparu que la vidéo jouait directement dans un bloc en forme de texte. Et voilà, un effet très similaire est maintenant possible en utilisant une combinaison de SVG en ligne, de vidéo HTML5 et d'un peu de CSS.

Cet exemple de SVG , créé par un développeur web Mike Thomas , ne fonctionne actuellement que dans Firefox 4 et les versions ultérieures, mais c'est un exemple inspirant de certaines des choses vraiment créatives que nous pourrons développer à l'avenir une fois qu'il y aura un plus grand niveau de normalisation entre ce que les différents fournisseurs de navigateurs proposent.

09. Itinéraires cartographiques tracés avec SVG et Raphael

Exemples de SVG: itinéraires cartographiques tracés de chemin

combien ça coûte d'aller à l'école d'art

Voici un exemple pratique intéressant de SVG et comment il peut profiter à votre expérience utilisateur. Les cartes sont quelque chose que nous utilisons tous en ligne, mais ne serait-il pas encore mieux si nous pouvions facilement tracer et animer le chemin le long des itinéraires pour aider à rendre ces voyages un peu plus clairs? Dans cette démo sur A List Apart, Brian Suda jette un regard sur l'ajout de routes animées personnalisées aux cartes avec l'aide de SVG à Raphael.

10. Déconstruction des colonnes Trajan avec SVG

Exemples de SVG: déconstruction des colonnes Trajan

Fait amusant: la colonne de Trajan est une colonne romaine en Italie qui commémore la victoire de l'empereur romain Trajan dans les guerres daces. À l'intérieur des colonnes se trouve un escalier en colimaçon, que quelqu'un a décidé de modéliser entièrement en pseudo-3D en utilisant SVG.

La meilleure partie de cet exemple de SVG est qu'il est complètement interactif, vous permettant de sélectionner une section du graphique à extraire. Cette déconstruction animée de l'architecture est probablement l'une des utilisations les plus amusantes de SVG que j'ai jamais vues et je recommande vivement de la vérifier.

11. Machine Rube Goldberg animée en SVG

Exemples de SVG: machine Rube Goldberg animée

Il y a de fortes chances que vous ayez probablement vu une machine Rube Goldberg (RGM) en action à un moment de votre vie sans le savoir, peut-être dans un dessin animé ou dans une émission scientifique. Les RGM sont
des machines délibérément sur-conçues qui effectuent des tâches simples de manière très complexe, comprenant généralement une réaction en chaîne.

Dans ce qui suit Exemple de SVG, vous pouvez voir un avion en papier voler à travers pour frapper une balle qui déclenche alors une autre réaction en chaîne, des dominos et enfin une lampe qui s'allume. J'ai dit que c'était sur-conçu, n'est-ce pas?!

12. Carte postale interactive d'Irlande en SVG

Exemples de SVG: Carte postale interactive

En développant la démo de traçage de chemin, Marek Raida, fan de SVG et génial développeur, a décidé de documenter son voyage en Irlande dans ce document. carte postale SVG interactive qui illustre à la fois le traçage d'itinéraire, l'animation de grande surface et d'autres effets tels que la rotation.

13. Carte SVG interactive sur la criminalité et la pauvreté

Visualiser de grands ensembles de données d'une manière qui peut être comprise par l'homme ou la femme ordinaire hors de la rue n'est pas toujours une tâche facile. Souvent, plutôt que d'essayer d'expliquer un ensemble de données entier, il peut être beaucoup plus simple d'offrir plusieurs vues des données afin que les utilisateurs puissent changer de contexte pour explorer un sous-ensemble d'un ensemble plus grand qu'ils souhaitent afficher.

comment dessiner une fourrure de chien réaliste

Exemples de SVG: Carte SVG interactive sur la criminalité et la pauvreté

Dans cet exemple of SVG, les chiffres de la criminalité et de la pauvreté aux États-Unis sont rendus sur une carte des États-Unis au niveau de l'État, mais vous disposez également d'un certain nombre de façons de modifier vos vues de la carte, y compris le zoom, la sélection et le mouvement. Si vous souhaitez démarrer avec vos propres cartes en SVG, Dasha Salo a un Didacticiel cela montre à quel point cela peut être facilement réalisé en utilisant Raphael.

14. Paroles animées en SVG

Exemples de SVG: paroles animées

Un autre excellent exemple de SVG de la catégorie 'Je ne peux pas croire que ce n'est pas Flash' est cette démo de Vincent Hardy où il combine SVG, polices Web et balise audio pour créer une animation visuelle agréable de paroles synchronisée avec une piste musicale. Jetez également un œil à l'autre exemple répertorié pour un Démo de citation de Gandhi !

15. Analytics avec Raphael et SVG

Au cas où vous ne l'auriez pas déjà utilisé, Raphaël est une bibliothèque JavaScript qui simplifie le travail avec des graphiques vectoriels sur le Web. Prenant en charge la plupart des navigateurs à partir de IE6 +, son site contient d'excellents exemples d'utilisation de SVG pour créer des visualisations impressionnantes de données.

Exemples de SVG: Analytics avec Raphael et SVG

Mon préféré est le démo analytique cela vous permet de voir à quel point SVG pourrait facilement remplacer Flash dans les grandes applications de suivi de site. Si vous êtes intéressé par une version de Raphael plus axée sur les graphiques, vous pouvez également consulter gRaphaël .

16. Représentation visuelle des connexions Twitter

Exemples de SVG: représentation visuelle des connexions Twitter

Twings est un outil qui vous permet de visualiser vos abonnés Twitter en anneaux en fonction d'un certain nombre de facteurs différents. En plus d'être un bon exemple de SVG, c'est aussi un exemple intéressant de la façon de segmenter les demandes à l'API Twitter lorsque vous avez besoin d'obtenir des informations par abonné au-delà des limites de ce que l'API peut généralement renvoyer par demande (100). N'oubliez pas d'aller sur le site principal où Ivan Lazarevic explique comment il a créé Twings avec quelques conseils supplémentaires sur l'outil!

gopro hero 4 silver offres du cyber lundi

17. Blobulaire

Exemples de SVG: Blobular

Blobulaire est un exemple amusant de SVG par Cameron Adams alias The Man In Blue qui vous permet de modifier la couleur, la viscosité et la taille des gouttes! Vous pouvez essayer d'étendre les bords d'un blob à des limites particulières et une fois qu'un seuil est franchi, un blog peut en fait générer d'autres blobs. Vous n'utiliserez probablement pas cela pour créer le prochain Google+, mais c'est toujours une mise en œuvre assez intéressante.

18. La bouche effrayante en SVG

Exemples de SVG: bouche effrayante

Doug Schepers '' bouche effrayante 'expérience nous donne un regard intérieur sur la bouche humaine en SVG. Connaissez-vous la différence entre l'alvéolaire et l'alvéopalatal? Je ne l'ai pas non plus, mais c'est un exemple parfait de SVG, combinant des graphiques vectoriels avec des animations pour aider à améliorer l'éducation en ligne de la même manière que Flash a été utilisé pour les diagrammes scientifiques et biologiques dans le passé.

19. Horloge SVG animée

Exemples de SVG: horloge animée

Dans cette démo, nous avons un exemple de rendu SVG horloge numérique en rotation . J'ai trouvé l'effet très intéressant car non seulement c'est un bon exemple de texte animé, mais remarquez comment la face arrière de chaque personnage change de couleur en fonction de la position dans la rotation animée.

20. SVG interactif sur l'iPad

Exemples de SVG: SVG interactif sur iPad

Comme mentionné dans l'introduction, les graphiques SVG sont accessibles via le DOM, il est donc possible de leur attacher des gestionnaires d'événements de la même manière que vous le feriez avec d'autres éléments de la page. Dans cette optique, Gert-jan Van Der Wel a créé une simple démo montrant comment vous pouvez interagir avec les graphiques SVG sur l'iPad. Si vous avez joué avec le mouvement des objets dans le navigateur sur les appareils iOS, cela vous semblera familier, mais c'est une démo utile pour ceux qui n'ont pas encore eu l'occasion de l'examiner!

Aimait ça? Lisez-les!

Addy Osmani est un concepteur d'interface utilisateur et actuellement ingénieur logiciel pour AOL. Il est également membre des équipes jQuery Bug Triage et API Docs. Ses publications hebdomadaires sur l'interface utilisateur peuvent être trouvées sur AddyOsmani.com.

Quel type d'utilisations SVG vous a le plus impressionné? Lesquels auraient dû figurer sur notre liste? Faites le nous savoir dans les commentaires!