Le guide ultime de SVG

Imaginez que vous pouviez intégrer une image dans une page Web, adapter cette page à n'importe quelle taille et ne jamais perdre la qualité de l'image. Bien, vous pouvez. C'est tout à fait possible, nous ne l'avons pas fait autant que nous le devrions.

Les images avec des tailles fixes telles que les fichiers JPG, GIF et PNG ont leur place sur le Web, mais leur nature intrinsèquement statique est en contradiction avec la manière dont le Web fonctionne. Au fur et à mesure que nous évoluons vers des conceptions réactives et fluides, plus il devient irritant de devoir gérer des images fondamentalement non réactives. Il est frustrant au-delà de toute conviction quand je réalise que la création et la diffusion de plusieurs versions de chaque image sur votre site sont devenues une pratique exemplaire.

Je me rends compte qu'il y a de bonnes raisons techniques à cela. Il faudra beaucoup de temps avant que quelqu'un ne crée une photographie à échelle infinie, par exemple. Cependant, les photos ne sont pas la solution idéale. Les graphiques vectoriels ont parcouru un long chemin. Ils vont encore loin.

Ils peuvent être plus difficiles à acquérir, car tous les concepteurs de sites Web ne sont pas des illustrateurs. Les photos sont nombreuses et les images de bonne qualité sont faciles à trouver. Les graphiques vectoriels, par contre, sont souvent de mauvaise qualité, ou peut-être vous ne trouvez pas le bon. L'embauche d'illustrateurs est coûteuse.

Mais comme la prise en charge des graphiques vectoriels se développe en ligne, leur utilisation en fera de même. Il est temps pour tout le monde d'apprendre à les mettre en œuvre sur leurs sites Web et de les utiliser de manière créative. Les images aussi réactives que nos sites Web sont l'avenir.

Rencontrez le fichier SVG ...

Qu'est-ce que le SVG et pourquoi devriez-vous l'utiliser?

Bon, pour les débutants parmi nous, SVG signifie Scalable Vector Graphics. Les fichiers SVG sont des choses plutôt simples, en théorie. Ils sont juste des fichiers texte avec un tas de XML à l'intérieur. Chaque bit d'information visuelle d'un fichier SVG est défini par un code lisible par l'homme, qui est ensuite calculé et rendu par votre navigateur, votre logiciel graphique, etc.

Cela signifie que même si les fichiers SVG ne sont pas aussi complexes que, par exemple, une photographie au format JPG, ils sont infiniment plus flexibles. Ils peuvent être modifiés manuellement dans un éditeur de texte. Ils peuvent être modifiés par code, tels que JavaScript et CSS. Ils peuvent être compressés à des tailles presque ridiculement petites.

En d'autres termes, ils sont spécifiquement conçus pour être utilisés avec d'autres technologies Web. Ils sont parfaits pour nous.

À la fin des années 90, Macromedia et Microsoft (et d’autres sociétés) ont introduit VML , puis Adobe (et d’autres sociétés) ont présenté PGML comme solutions possibles pour les images vectorielles sur les sites Web vers le W3C (et éventuellement comme alternatives à l'ancien format PostScript). Le W3C a dit: "Non, nous allons faire notre propre affaire; mais merci pour les idées! "Le résultat a été le Groupe de travail SVG.

En septembre 2001, SVG 1.0 est devenu une recommandation officielle du W3C, et le reste appartient à l’histoire. Sorte de. Internet Explorer a pris du retard dans l’adoption du format SVG, sans surprise. Depuis lors, il y a eu des mises à jour destinées aux appareils mobiles, et plus encore avec des clarifications.

Même maintenant, le groupe de travail SVG crée SVG 2, qui comprendra davantage d’intégration avec des éléments tels que HTML5, CSS et le format de police WOFF.

Il a du soutien

La seule version d'Internet Explorer dont vous devez vous préoccuper est IE8. C'est tout. Tout le monde a plus ou moins de support SVG complet. Oui, vous pouvez rencontrer des bugs à l'occasion, même dans les "bons" navigateurs, mais cela en vaut toujours la peine. En plus de les aider à résoudre vos problèmes, le fait de les contourner ne fera pas que vous aider, mais plus nous utiliserons cette technologie, plus les développeurs de navigateurs le prendront en charge.

Check-out caniuse.com pour une analyse plus approfondie de ce qui fonctionne et de ce qui ne fonctionne pas dans les navigateurs.

Tout est réactif ... ou il devrait être

La technologie Internet a bien évolué, bien au-delà des sites statiques que nous connaissions. Il est temps pour nos images de rattraper leur retard, en toute simplicité. Lorsque vous devez créer une icône, utilisez SVG. Si vous devez utiliser une illustration, optez pour SVG si vous le pouvez. Si vous voulez un arrière-plan de site Web abstrait mais simple, utilisez SVG.

Je ne suis pas un fan de la technologie de l'écran rétine, surtout parce que je n'en ai pas. Ce n'est pas de la jalousie. Eh bien, ce n'est pas que de la jalousie. Le simple fait est que les écrans Retina sont allés et ont rendu les images beaucoup plus compliquées. SVG, étant infiniment évolutif, peut aider à minimiser le problème.

Accessibilité

Les utilisateurs malvoyants naviguent généralement sur le Web en zoomant un peu. Lorsque des images régulières sont agrandies, elles perdent de la qualité. SVG ne le fera pas, alors pourquoi ne pas en profiter pour donner aux malvoyants une expérience de qualité?

Cela peut aider à pérenniser votre site web

La technologie change constamment. Ce qui est ici aujourd'hui pourrait avoir disparu d'ici peu, mais le SVG sera probablement présent pendant un certain temps. Tant que le W3C établit les normes mondiales de l'industrie, il semble que SVG continuera d'être la norme de facto pour les graphiques vectoriels dans le navigateur. Utilisez-le maintenant, et vos sites Web seront configurés pour une longue période.

Tutoriels et procédures SVG

Donc, vous êtes convaincu. SVG est cool, c'est l'avenir, il est temps de l'apprendre. Heureusement pour tout le monde, c'est l'Internet. Vous savez simplement que les gens ont passé des heures et des heures précieuses à créer du matériel de formation gratuit pour quiconque le souhaite. Les gens qui font ce genre de chose sont ceux qui font de l’Internet génial.

Ensuite, bien sûr, nous avons passé des heures à parcourir les différents tutoriels pour trouver les meilleurs. Vous pouvez nous remercier plus tard. Pour l'instant, il y a de la lecture à faire!

Remarque: gardez à l'esprit que les fichiers SVG sont tous du code XML. Par conséquent, beaucoup de ces didacticiels sont axés sur les développeurs ou contiennent beaucoup de code. Nous avons inclus à la fois des didacticiels axés sur les bases et des utilisations créatives spécifiques pour SVG, donc ne sautez pas cette partie.

• Utilisation de SVG: Chris Coyier écrit depuis des années des didacticiels CSS et HTML faciles à comprendre sur css-tricks.com. Le sien amorce sur SVG n'est pas différent. Je vais inclure des liens vers de nombreuses explications de base et des tutoriels, mais c'est là que je vais commencer. Ce tutoriel comprend des instructions de base pour les utilisateurs Adobe Illustrator.
• Comment démarrer avec SVG: Je m'en voudrais de ne pas inclure Contribution de WDD à l'éducation SVG. La Sara Vieira, toujours fantastique, couvre la création de vos graphiques, leur exportation, le nettoyage du code, le transfert des attributs de présentation vers les fichiers CSS, etc.
• Indépendance de résolution avec SVG: Si c'est lié au Web, alors Smashing Magazine a probablement un article à ce sujet. Ils couvrent la bases du format SVG avec leur style habituel et l'attention aux détails.
• Scalable Vector Graphics (une série d'articles): Hongkiat.com est une autre ressource pour un apprentissage Web et graphique de qualité. Au lieu de fournir un long article, ils ont publié une série entière d'entre eux par Thoriq Firdaus. L'anglais fait parfois un peu défaut, mais les instructions sont toujours claires et faciles à comprendre.
• Sara Soueidan: Styliser et animer des graphiques vectoriels évolutifs avec CSS: une vidéo d'une présentation donné à CSSconf EU 2014. Sara Soueidan y présente un certain nombre de conseils, astuces et même quelques astuces pour appliquer des styles et des animations au format SVG sur le Web. Il est d'une demi-heure, alors installez-vous confortablement et gardez un objet avec lequel vous pourrez prendre des notes. Cela vaut complètement votre temps.
• Exportation de SVG pour le Web avec Adobe Illustrator CC: les utilisateurs d’Adobe Illustrator doivent: regarde ça. L'un des blogs d'Adobe donne des instructions détaillées, et très détaillées, sur la manière d'exporter des fichiers SVG pour le Web. Apprenez à les optimiser jusqu'à la plus petite taille de fichier pour le Web.
• SVGBasics: Ceci site entier est dédié à enseigner aux gens comment créer des graphiques SVG à partir de zéro avec XML. Je le recommande pour ceux qui traitent avec le back-end - ou même le front-end - de n'importe quel site Web. Savoir comment fonctionne le code peut aider à résoudre les problèmes à la volée.
• Tutoriel SVG par Jakob Jenkov: Un autre développeur centré ensemble de tutoriels, ici. La grande différence? L'auteur a inclus des versions vidéo de chaque section. Si vous apprenez mieux en ayant à la fois des éléments visuels et audio pour accompagner vos leçons, c'est un bon point de départ.
• L'introduction simple à l'animation SVG: le titre dit tout. David Walsh explique comment configurer votre Éléments SVG pour l'animation, Quels attributs utiliser pour différents éléments, quelles bibliothèques utiliser, etc. Ce n'est pas un guide complet, mais il vous présentera les concepts de base nécessaires pour commencer à animer.
• Une introduction à l'animation SVG: Ce tutoriel va dans un peu plus de détails sur la façon exacte d’animer vos objets SVG. En plus de cela, il aborde certains problèmes courants que vous pouvez rencontrer lors de l'animation, donc ça vaut le coup de le lire.
• Comment: exporter plusieurs icônes vers des fichiers SVG à partir d'Adobe Illustrator: Création d'un ensemble d'icônes SVG dans Illustrator? Les garder tous dans un fichier Illustrator? Tous les exporter à leurs fichiers séparés en un seul clic.
• Animate Text with SVG Paths: Fait exactement ce qu'il dit dans le titre. Obtenez votre animation sur, peut-être l'utiliser sur un logotype. C'est certain semble assez cool ...
• Animer des icônes SVG avec CSS3 et JavaScript: L'une des plus grandes utilisations de SVG concerne les icônes, et pour cause. Créez un fichier, utilisez-le n'importe où sur votre site ou votre application, quelle que soit sa taille. Que pourriez-vous demander de plus? Ce tutoriel vous montre comment animer ces icônes en vol stationnaire.
• Créer une infographie SVG évolutive: L' infographie est l'un des moyens préférés d'Internet pour consommer des faits de nos jours. Pourquoi pas les rendre infiniment évolutifs? Jeter de l'animation, et vous pourriez très bien faire sauter quelques esprits.
• Créer un bouton burger HTML SVG: Dites ce que vous voulez sur le bouton hamburger, ça ne va probablement pas. Vous pouvez aussi bien utiliser SVG et animation pour en faire le bouton de hamburger le plus cool et le plus cool possible. Celui-ci explique comment animer les chemins et les traits pour que l'un des boutons se transforme littéralement en un autre, alors jetez un coup d'œil.
• Snap.svg Exemples et tutoriels: Ceci est un guide à utiliser la bibliothèque JavaScript Snap.svg (voir la section «Outils» ci-dessous). Il est conçu pour vous aider à créer des éléments SVG dans JS, à les animer, à les rendre interactifs, etc.
• Introduction à Raphaël.js: Raphaël.js est l’une des grandes bibliothèques JavaScript liées au SVG, et Cet article vous apprend à l'utiliser. (Encore une fois, voir la section Outils ci-dessous.)
• Icône SVG animée: Les gens semblent beaucoup aimer les icônes animées, aussi vous pouvez apprendre toutes les approches possibles pour les créer. Ici nous voyons la bibliothèque Snap.svg en action une fois de plus, car l'auteur crée, puis anime un bouton "lecture" du lecteur multimédia.
• Découpage en CSS et SVG - La propriété clip-path et l'élément: Voici un beau long article sur la façon d'utiliser le découpage SVG pour créer des images à l'intérieur de formes et des images à l'intérieur d'un texte volumineux. Vous pouvez envisager de l'utiliser pour faire de gros titres de fantaisie optimisés pour le référencement, car les robots des moteurs de recherche peuvent les lire.
• Rendre les SVG réactifs avec CSS: Bien que les fichiers SVG soient évolutifs à l'infini, les méthodes utilisées pour les insérer dans une page Web peuvent parfois poser problème. Ce tutoriel de codrops explique comment résoudre les différents problèmes que vous pouvez rencontrer.
• Effet de vol stationnaire avec SVG: créez un effet lisse et élégant effet de vol stationnaire animé pour les aperçus d'images. ( Découvrez la démo. )
• Une introduction au SVG pour les navigateurs d’aujourd’hui par le W3C: Pas tout à fait la dernière et certainement pas la moindre une ressource fournie par les personnes qui ont proposé le format SVG en entier: le W3C. Ce n'est pas un tutoriel de base ou une introduction. Selon la préface, il a été créé pour les programmeurs professionnels, les concepteurs graphiques avec un "penchant technique fort", et d'autres qui ne s'inquiètent pas de la difficulté.
• Tutoriel SVG par MDN: Comme SVGBasics, c'est plutôt un ensemble complet de tutoriels, fourni par le réseau de développeurs Mozilla. Aussi complet soit-il, le tutoriel lui-même est considéré comme étant en cours de développement. Par exemple, cela peut actuellement être vu sur la page "Filtres", qui est vide. Selon la page elle-même, le tutoriel en est à ses débuts. Si vous le pouvez, aidez-nous en écrivant et en écrivant un paragraphe ou deux. Points supplémentaires pour écrire une page entière.

Outils SVG

L'un des nombreux avantages de la nature ouverte de SVG est que n'importe qui peut créer des logiciels pour cela. Il n'y a pas de restrictions de licence ou de frais à payer, juste une norme ouverte pour les utilisateurs. Comme vous vous en doutez, de nombreux développeurs ont fait exactement cela.

Les outils pour créer et utiliser le format SVG abondent. Ils vont des gros logiciels qui incluent la possibilité d'exporter SVG après coup, aux applications de dessin vectorielles qui utilisent SVG comme format primaire, et plus encore.

Une recherche rapide sur Google pour «outils SVG» renvoie «environ 37 000 000 résultats», vous savez donc qu'il y en a beaucoup.

Où alors, devriez-vous commencer?

Applications Premium

Les grands noms de la création graphique supportent tous le SVG. Adobe Illustrator,Corel Draw, même divers produits de Xara - oui, Xara est toujours une chose - ils peuvent tous importer, éditer et enregistrer des fichiers dans le format. (Illustrator est connu pour avoir placé des fichiers bizarres dans des fichiers SVG, vous devez donc faire attention aux paramètres d’exportation.)

Inkscape

Si vous n'utilisez pas déjà un paquet de graphiques vectoriels, Inkscape est un endroit fantastique pour commencer. Créé en 2003 sous la forme d'un fork d'un autre projet open source appelé Sodipodi (basé sur un autre projet OSS), Inkscape est devenu la norme en matière de logiciel graphique vectoriel multiplateforme gratuit. Il n'est pas aussi complet que Adobe Illustrator, mais il est plus que suffisant pour la plupart des projets vectoriels.

Serif DrawPlus Starter Edition

Serif est une entreprise qui fabrique des logiciels de création graphique et de publication assistée par ordinateur. Toutes leurs principales offres logicielles sont fournies avec des "éditions Starter" gratuites, et leur application de dessin vectoriel ne fait pas exception.

Ne laissez pas le "Starter Edition" peu vous tromper, cependant. Il peut ne pas avoir tout ce que la version pro fait, mais il peut faire le travail dans la plupart des cas. Sauf si vous êtes un illustrateur de métier, cette application peut et va répondre à vos besoins ... à condition que vous soyez sous Windows. Malheureusement, ce n'est pas multi-plateforme. En outre, l'inscription est requise pour le téléchargement.

Karbon

Partie de la suite bureautique Calligra, principalement destinée à Linux, Karbon est un éditeur de graphiques vectoriels complet. Il possède tous les outils de base et quelques autres choses. L'installation sur Mac et Windows est actuellement difficile, mais pas impossible.

Design d'impression

Le nom sonne comme un logiciel des années 90, je sais, mais il est vraiment nouveau. En fait, c'est le successeur de l'ancienne application d'illustration sK1, qui a été abandonnée. Design d'impression est actuellement dans la phase de "prévisualisation", avec les versions Linux et Windows. Ce n'est pas encore prêt pour une utilisation en production, mais c'est un projet qui mérite d'être regardé.

SVG-edit

Le nom est un peu sur le nez, peut-être, mais le logiciel est plus que capable. SVG-edit Repose entièrement sur les technologies Web, en particulier HTML5, JavaScript et CSS. Cela signifie qu'il n'y a pas de fonctionnalité côté serveur. De plus, c'est Open Source, ce qui signifie que vous pouvez le télécharger, le mettre sur votre propre serveur ou même simplement l'utiliser depuis le bureau.

Il a un liste des fonctionnalités suffisamment longue pour rendre jalouse de nombreuses applications de bureau et les faire tourner plus vite que la plupart d’entre elles, alors faites-en un tourbillon.

Janvas

Janvas est la seule application Web de cette liste qui ne soit pas strictement gratuite. Il y a une période d'essai de trente jours, après quoi un abonnement coûte 26 euros par an. Si aucun des éditeurs Web SVG ne vous rend heureux, vous pouvez en tenir compte.

Les outils de dessin sont suffisamment avancés et familiers, chaque variable est modifiable dans la barre latérale et vous pouvez enregistrer vos documents sur Google Drive. Vous pouvez créer des modèles, collaborer sur des documents de dessin et même inclure des fichiers CSS et JS conçus pour interagir avec les graphiques.

Dans l'ensemble, c'est une offre solide.

Mondrian

Petit. Lisse. Simple. Mondrian est encore un autre Open source offre, et il est beaucoup plus petit que la plupart. Il n'a même pas d'outil de texte ... mais il fait très bien des dessins simples. Vous pouvez ouvrir des fichiers depuis le disque dur ou une URL, récupérer le code intégré de votre site Web ou simplement enregistrer votre dessin en tant que fichier SVG ou PNG. Ce n'est peut-être pas aussi avancé que les autres applications, mais c'est agréable à utiliser et le stylet semble naturel.

Dessiner SVG

Dessiner SVG est un autre éditeur SVG basé sur le Web avec toutes les fonctionnalités dont vous avez besoin. Son point fort semble être la vitesse à laquelle il charge et dessine les choses. Malheureusement, l'interface utilisateur est sérieusement défectueuse. Pourtant, il est là et ça marche, si jamais vous en avez besoin.

Bibliothèques SVG

Les développeurs se réjouissent! Nous avons des liens ici pour vous aussi. Après tout, SVG n'est pas simplement un autre format graphique. C'est du code. C'est un code qui peut être lié ou intégré. Il peut être interagi avec et changé à la volée. Avec les maths!

Snap.svg

Casser est une bibliothèque JS pour générer et interagir avec SVG. Il est conçu pour les navigateurs modernes. Ouais, cela signifie qu'il ne supporte que IE9 + ... mais si les navigateurs plus anciens ne vous concernent pas, allez-y.

Raphaël

Raphaël, Contrairement à Snap, il est compatible avec les anciens navigateurs. En fait, il peut fonctionner avec IE6 +, Safari 3+ et Chrome 5+. Si vous développez quelque chose pour un système d'entreprise où les utilisateurs peuvent se trouver sur des machines plus anciennes, Raphaël pourrait être votre meilleur choix.

jQuery SVG

Comme SVG et jQuery? Je ne suis pas vraiment surpris. jQuery a peut-être perdu une partie de l’attention qu’elle avait autrefois, mais elle reste une bibliothèque incontournable pour beaucoup d’entre nous.

jQuery SVG, alors, c'est probablement le plugin que vous recherchez. Il dispose de fonctions pour les animations, la création de graphiques et même les extensions. C'est bien, des extensions pour un plugin. Le support du navigateur est IE9 +, mais les anciennes versions d'IE peuvent être utilisées avec les plug-ins de navigateur appropriés installés.

Je ne dépendrais pas des utilisateurs ayant ces plugins, cependant.

SVGMagic

SVGMagic est une solution de type jQuery pour les navigateurs plus anciens (IE 7 et 8). Au lieu de créer manuellement des images de secours pour chaque fichier SVG que vous utilisez, ce plug-in peut les générer à la volée. Il gère aussi bien les images d'arrière-plan.

Comment fait-il tout ça? Il détecte si le navigateur de l'utilisateur peut ou non gérer le SVG. Si oui, il va dormir. Sinon, il contacte un script PHP côté serveur et lui demande de créer un fichier PNG des images SVG en question avec les dimensions nécessaires.

Une fois cela fait, le script PHP envoie les URL à ces images de secours temporaires au plug-in jQuery, et les URL par défaut sont remplacées. Cela prend évidemment du temps, de sorte que vous pouvez éventuellement spécifier une image d'espace réservé à afficher lors de la conversion.

Une mise en garde: actuellement, il ne peut pas gérer trop d'images à la fois. Vous ne voudriez pas utiliser cette technique sur des pages contenant plus de quelques fichiers SVG.

SVG.JS

Enfin, voici une option pour les compteurs d'octets. SVG.JS ne pèse que 11.8kbs lorsqu'il est compressé. Malgré sa petite taille, il prend en charge un nombre impressionnant de fonctionnalités (comme indiqué sur la page du projet):

• Animations sur la taille, la position, les transformations, la couleur
• Extension indolore grâce à la structure modulaire
• Divers plugins utiles disponibles
• API unifiée entre les types de forme avec mouvement, taille, centre
• Liaison d'événements à des éléments
• Prise en charge complète des masques d'opacité et des chemins de détourage
• Chemins de texte, même animés
• Groupes d'éléments et ensembles
• Gradients dynamiques

Lis le Documentation pour plus d'informations.

SVG de stock

Tout le monde n'est pas un illustrateur. Au moins, je n'ai certainement jamais été doué pour ça. Ainsi, les illustrations de stock deviennent une ressource inestimable. Il peut être difficile de trouver de bonnes choses, cependant. Ce qui ne ressemble pas à Microsoft clipart est souvent de portée limitée ou coûteux.

Ne perdez pas espoir, cependant. Il y a beaucoup de choses qui sont de bonne qualité. Si elle ne répond pas parfaitement à vos besoins, eh bien, c'est de l'art vectoriel. Si vous avez des connaissances de base sur les logiciels de graphisme vectoriel, il est probable qu’il puisse être adapté à vos besoins.

SVG peut faire plus que de simples illustrations. Vous pouvez également créer des modèles, de grands arrière-plans sophistiqués qui ne consomment pas la bande passante, etc. Voyons ce que les gens ont fait pour nous:

SVG Clipart sur openclipart.com

Le format SVG, en tant que format ouvert, a de nombreux fans open source en tant que fans. En conséquence, il s’agit d’un des principaux formats utilisés dans ce qui pourrait être la plus grande collection de clip art gratuit là-bas.

Et beaucoup de choses sont clipart-ish. Et beaucoup de travail amateur. Il y a cependant des graphiques de qualité, si vous regardez. Hé, c'est gratuit.

Stock SVG

Stock SVG est un petit site avec une collection relativement petite mais excellente. Ce sont principalement des maquettes d'icônes et d'appareils, mais elles sont toutes de haute qualité. Si vous avez besoin de l'une de ces deux choses, commencez ici.

Ressources SVG sur deviantart.com

Ah DeviantArt, cette communauté géante est toujours forte. Rendez-vous dans la catégorie images de stock et recherchez SVG (ou cliquez sur le lien ci-dessus). Encore une fois, la qualité variera, mais il y a de bonnes choses là-bas si vous avez le temps de regarder.

Galerie de modèles SVG

Une petite galerie pleine de Modèles basés sur SVG. Il est conçu comme une vitrine, mais les fichiers source sont tous là pour votre commodité.

SVG Patterns de svgeneration.com

svgeneration.com comprend beaucoup de motifs SVG pour votre usage. Le site est livré avec des options de modification pour chaque modèle et vous pouvez modifier le code directement sur le site pour voir vos modifications en action. Non seulement est-ce une excellente ressource pour les motifs pré-créés, mais vous pouvez en apprendre beaucoup sur la façon dont ils sont fabriqués en premier lieu.

SVG Clipart

L'art sur ce site est distinctement style de bande dessinée à l'ancienne. Honnêtement, ce ne sera pas ce que tout le monde recherche, mais il est là pour ceux qui veulent avoir ce côté classique de leurs illustrations.

SVG Studio

SVG Studio propose des milliers d'illustrations au style résolument moderne. Vous pouvez les acheter en petits sous-ensembles ou télécharger l'intégralité de leur catalogue en une fois. Cela vous coûtera 500 USD, ce qui, pour 3000 illustrations, n'est pas une si mauvaise affaire.

SVG sur les plus grands sites de stockage

Je ne peux pas en dire beaucoup sur l'art proposé sur chaque site, car il varie beaucoup selon le contributeur sans style global. Les plus grands noms sont istockphoto.com,shutterstock.com,bigstockphoto.com, et canstockphoto.com.

Inspiration SVG

Nous pouvons lire toutes les introductions que nous voulons et suivre tous les tutoriels disponibles. Nous pouvons devenir des experts dans chaque aspect de la spécification SVG, et pourtant, nous pourrions toujours être incroyablement ennuyeux à ce sujet. Nous devons examiner tout le potentiel d’une technologie donnée pour en tirer le meilleur parti.

Cela est souvent plus facile à dire qu'à faire, cependant. Il est souvent utile d’avoir un point de référence, quelque chose d’extraordinaire à regarder et de nous montrer exactement quel genre de choses géniales nous pouvons faire avec ce que nous avons. C'est comme ça que les sites Webcreme fait pour le design web en général. C'est ce que CSS Zen Garden, et toutes les galeries CSS qui ont suivi, ont fait pour les mises en page CSS.

Jusqu'à présent, je n'ai trouvé aucun site de galerie dédié à ce qui peut être accompli via SVG combiné à d'autres technologies Web, et cela pourrait aider. En attendant, voici une vitrine de choses géniales que nous avons trouvé:

Annonce d'affichage instantanée

Cet exemple fait partie de la Snap.svg collection sur CodePen. Besoin d'un exemple parfait de la façon dont SVG pourrait être utilisé pour révolutionner les publicités en ligne? Ça y est.

Pensez-y: certaines sociétés de publicité continuent à vendre des annonces en fonction de la taille des pixels. Cela n'a aucun sens à l'ère des variations infinies des tailles d'écran et des écrans Retina à démarrer. Jusqu'à ce que nous trouvions un meilleur système que les annonces visuelles, SVG pourrait au moins nous aider à intégrer les annonces à la nature réactive du design web.

Voir le stylo Annonce d'affichage instantanée par CJ Gammon ( @cjgammon ) sur CodePen .

Interface de bureau Jtop

Le réseau de développeurs Mozilla, une entité que je continue de rencontrer lorsque je recherche des technologies Web en général, a également produit des éléments intéressants réalisés avec SVG. Par exemple, ils sont allés et ont fait une interface de bureau complète entièrement basé sur des technologies Web telles que HTML5, JS, SVG et CSS. C'est rapide, personnalisable, et je souhaiterais presque qu'il fasse partie d'un véritable OS.

Un temps de réflexion

Apporté à nous par ShinyDemos (qui nous est à son tour apporté par les gens à Opéra ) Un temps de réflexion va littéralement superposer une horloge sur un flux en direct de votre webcam. Eh bien, si vous lui en donnez la permission et que vous avez en fait une caméra, de toute façon. Mais le fait est que cela montre comment les masques SVG peuvent être superposés sur presque tout.

oblurlay

Grâce à une combinaison de CSS, SVG et jQuery, oblurlay crée exactement ce que son nom suggère: une superposition floue, un style iOS. C'est un plugin jQuery, donc l'implémentation n'est pas difficile, et elle montre clairement comment les filtres SVG peuvent être appliqués à toutes sortes de choses, pas seulement aux objets SVG eux-mêmes.

Démos de codrops

Codrops (précédemment mentionné dans la section des didacticiels) a produit un certain nombre de démonstrations fascinantes, impressionnantes et tout simplement jolies pour présenter ce que SVG peut faire. Chacun mérite sa propre section dans cet article, mais il y en a tellement que je les mets tous en un. Si vous ne regardez rien d'autre dans cette section "Inspiration", regardez-les. Découvrez les démos et téléchargez les fichiers sources. Alors allez remercier les gars de Codrops. Ils le méritent.

Note: toutes ne sont pas axées sur SVG, mais elles utilisent toutes des graphiques SVG.

Effets de chargement de page : ensemble d'effets de chargement de page de création utilisant des animations SVG avec Snap.svg. L'idée est de montrer une superposition avec une animation de forme intéressante lorsque du nouveau contenu est chargé.

Idées pour des effets de vol stationnaire subtils : une inspiration créative et subtile des effets de vol stationnaire en utilisant les techniques CSS modernes, y compris les éléments de traduction et de pseudo 3D. Ils utilisent également SVG. Allez voir le démo pour la deuxième série d'effets.

Animation de dessin SVG : une petite expérience qui explore l'utilisation des animations de dessin de lignes SVG pour précéder l'apparition d'éléments graphiques ou de sites Web, en simulant leur chargement.

Effets de menu hors-toile : une source d'inspiration pour les effets de menu et les styles hors-toile à l'aide de transitions CSS et d'animations de chemins SVG.

Styles d'info-bulles Inspiration : une petite collection de différents styles et effets d'infobulle pour votre inspiration. En utilisant les transformations CSS, les formes border-radius et SVG, nous pouvons créer des info-bulles intéressantes et modernes.

Styles de notification : quelques idées et effets simples pour les notifications de sites Web discrètes. Un petit script est utilisé pour présenter certains styles et des animations CSS sont utilisées pour les effets.

Inspiration pour les éléments de sélection personnalisés : une source d'inspiration pour styliser une version personnalisée de l'élément select. Les possibilités sont nombreuses et nous explorons aujourd’hui quelques idées sur la manière de laisser l’utilisateur choisir un choix avec style.

Inspiration pour les styles d'ancrage en ligne : une source d'inspiration pour les styles d'ancrage en ligne créatifs et modernes et les effets de survol utilisant différentes techniques telles que les transitions de pseudo-éléments et les SVG.

Styles de navigation fléchés : une inspiration pour les styles de navigation par flèches et les effets de survol utilisant les icônes SVG pour les flèches, et les transitions et animations CSS pour les effets.

Effet Wobbly Slideshow : les diapositives de ce diaporama oscillent à mesure qu'elles se déplacent. L'effet est basé sur le Dribbble de Sergey Valiukh et a été réalisé avec Snap.svg et morphing SVG ... Notez que ceci est très expérimental et testé uniquement dans les dernières versions des navigateurs modernes.

L'envelopper

Le format SVG, bien qu’il ne soit pas encore l’un des formats d’image les plus répandus, est bien documenté, fortement supporté et constitue une grande partie de l’avenir d’Internet. Si vous ne l'utilisez pas encore dans le cadre de votre processus de conception, il est probablement temps de commencer.

L'image sélectionnée, image vectorielle continue via Shutterstock.

• ← 10 plugins WordPress gratuits pour février 2015
• 21 outils de collaboration pour rationaliser votre travail d'équipe →