Share
SVG, ou Image Vectorielle, est un moteur de rendu graphique vectoriel basé sur un balisage de style XML pour le navigateur. SVG est supporté dans tous les navigateurs, sauf IE < v9 and Android < v3. The same support is available for canvas (except canvas goes all the way back on Android), so the question often surfaces: which one should you use?
Aujourd'hui, nous allons interroger SVG et expliquer pourquoi la question "lequel dois-je utiliser?" est habituellement répondu par "qu'est-ce que j'essaie de faire?". Pour obtenir une liste complète des éléments qui composent SVG, consultez la documentation de Mozilla sur le sujet. Vous pouvez également y voir l'API DOM SVG.
Nous commencerons par décrire quelques avantages uniques de SVG. Ensuite, au lieu de passer en revue tous les 80 types de nœuds SVG, nous expliquerons comment Illustrator peut rapidement insérer un document SVG dans une page Web. Nous verrons aussi D3.js, une puissante bibliothèque JavaScript de manipulation SVG.
"Le format SVG n'est pas destiné à être utilisé pour la manipulation de pixels."
SVG présente de nombreux avantages par rapport aux images ou aux rendus basés sur des canevas pour certaines applications. SVG n'est pas destiné à être utilisé pour la manipulation de pixels; cependant, il gère très bien les graphiques vectoriels et la manipulation vectorielle programmatique.
Au cas où vous ne le sauriez pas, l’indépendance de la résolution et l’agnosticisme du navigateur sont des sujets d’actualité dans le développement front-end (pensez au "responsive design") de nos jours. La plupart des solutions existantes pour résoudre les problèmes liés à la résolution (pour les écrans de rétine, par exemple) impliquent soit une grande quantité de données inutiles téléchargées (remplacement d’image haute résolution), soit une compromission pour l’un ou l’autre des navigateurs lorsque l’écran n’affiche pas la différence). Cela nous oblige à nous fier sur la vitesse du goulot d'étranglement lié à la vitesse de téléchargement des données pour transmettre des images de résolution supérieure à des périphériques souvent connectés à des réseaux de données sans fil. Pas idéal.
"SVG offre un moyen de créer des éléments graphiques en pleine résolution, quelle que soit la taille de l'écran, le niveau de zoom ou la résolution de l'appareil de l'utilisateur."
SVG offre un moyen de créer des éléments graphiques en pleine résolution, quelle que soit la taille de l'écran, le niveau de zoom ou la résolution de l'appareil de votre utilisateur. Jusqu'à SVG, nous ne voyions cela qu'avec un stylisme d'élément intelligent via CSS et le rendu du texte. L'utilisation de divs et: after elements pour créer des formes simples et d'autres effets n'est pas nécessaire avec SVG. Au lieu de cela, vous pouvez créer des formes vectorielles de toutes sortes.
Donc vous écrivez du HTML? JavaScript? CSS? Bien. Ensuite, vous savez déjà beaucoup de choses à savoir pour écrire SVG. SVG utilise en réalité un format compatible XML pour définir ses formes de rendu. Au-delà, vous pouvez réellement styliser des formes en CSS et les rendre interactives avec JavaScript. Plusieurs bibliothèques JS existent pour vous aider dans ce monde, comme D3.js et Raphael. Voici un exemple de groupe d'éléments SVG (la feuille Envato). Vous pouvez aussi voir cet exemple sur JSFiddle.
L'API SVG basée sur les noeuds DOM est déjà plus accessible que l'API de canevas côté client uniquement. Avec cette construction, vous pouvez:
L’API DOM offre un ensemble d’avantages supplémentaires pour l’utilisation de SVG..
Lorsque vous utilisez des images dans un document HTML avec le
Malgré les guerres entre navigateurs, l’API DOM, à travers tous les navigateurs, offre une grande flexibilité en termes d’interactivité de script, qui s’étend aux éléments SVG. Le style SVG passe par CSS. Le fait de disposer d'API d'événements de navigateur disponibles pour les éléments SVG rend le script de comportement interactif très facile. Attachez simplement un gestionnaire à un nœud spécifique de l'élément SVG, et vous êtes prêt.
Ce n'est pas vrai pour les éléments dessinés sur la toile. Comme le canevas est simplement un moteur de rendu de pixels, les éléments dessinés ne sont pas conservés en mémoire en tant qu'objets. Le script aurait pour tâche de conserver ces éléments collectés et de surveiller toutes les informations de position et de taille pertinentes pour rechercher et déclencher des événements dans une boucle d'événements. Au-delà, l'indexation z devrait également être gérée par le script.
Jetons un coup d'oeil à un exemple. Supposons que vous souhaitiez détecter le survol d'un cercle dans la zone de dessin. Remarque: nous dirons simplement que le canevas occupe toute la largeur de la fenêtre du navigateur et nous utiliserons jQuery uniquement pour que l'exemple soit concis..
Accentsconagua
var circleCenter = [200, 300], rayon = 50; $ (fenêtre) .on ("mousemove", fonction (e) var mx = e.pageX, mon = e.pageY; if (mx> circleCenter [0] - radius && mx < circleCenter[0] + radius && my > circleCenter [1] - rayon && mon < circleCenter[1] + radius) // now we are hovering ); Bien que ce modèle de code ne soit pas nécessairement difficile ou inhabituel, si vous êtes habitué à l'API du navigateur, il semble que ce soit un processus frustrant de vérifier le survol. Il s'agit d'un modèle très courant dans d'autres moteurs de programmation d'interface de niveau inférieur, tels que Unity3D ou Processing. Mais dans le monde du Web, nous disposons d’outils qui gèrent déjà de nombreux objectifs interactifs communs. Vous pouvez écrire un ensemble de fonctions pratiques pour effectuer des tâches courantes, mais ne préféreriez-vous pas aller au but? En revanche, nous pouvons voir la simplicité de la même tâche en utilisant SVG.
$ ("svg path # circle"). on ("survol", function (événement) // C'est tout.); Ceci est clairement beaucoup plus rapide pour les développeurs qui écrivent une interactivité simple.
Il existe de nombreuses bibliothèques JavaScript pour les toiles (comme KineticJS, qui vous permettra de faire des choses assez impressionnantes. Mais si vous êtes comme moi, vous n'utilisez pas de moteurs de physique complets dans vos applications Web. «J'ai le plus souvent besoin d'icônes évolutives, de graphiques interactifs et de façons esthétiques détaillées de présenter des informations à mes utilisateurs. La plupart des éléments physiques dont j'ai besoin sont de simples équations d'assouplissement. les équations vont probablement répondre au reste de mes besoins, voyons quelques applications pratiques de SVG.
Maintenant que nous avons examiné certains des avantages de SVG, voyons pourquoi de nombreux développeurs choisissent encore de ne pas utiliser SVG. Il y a deux raisons principales pour lesquelles SVG n'est pas utilisé par beaucoup de développeurs.
Bien entendu, personne ne veut vraiment s'asseoir et éditer les points dans le XML SVG. Heureusement, personne n'en a besoin! C'est la partie que les gens ne réalisent souvent pas; Il existe des outils pour éditer SVG, de sorte que vous n'ayez jamais à le faire à la main.
Si vous possédez un éditeur de vecteur, il peut très probablement enregistrer votre fichier au format svg. Allez-y et essayez le. Ouvrez Illustrator, tracez un cercle ou deux, puis enregistrez le fichier au format SVG. Ensuite, ouvrez ce fichier dans Sublime Text ou un autre éditeur de texte. Vous verrez immédiatement que, mis à part quelques métadonnées supplémentaires, le XML SVG est prêt à être inséré directement dans votre fichier HTML. Vous verrez probablement (le parent svg) éléments.
Bien que vous puissiez totalement déposer votre fichier XML SVG directement dans un fichier HTML, qu’en est-il si vous souhaitez que le fichier SVG soit créé de manière dynamique? D3.js est "une bibliothèque JavaScript pour manipuler des documents basés sur des données". En d'autres termes, il est idéal pour générer des éléments SVG tels que des graphiques à barres et des tracés linéaires basés sur un ensemble de données. Nous avons choisi d’afficher D3 en raison de son vocabulaire correspondant à l’implémentation SVG réelle dans le navigateur; sachez qu'il existe d'autres bibliothèques SVG géniales (notamment Raphael.js).
Bien que D3.js fasse plus que de la manipulation SVG, par souci de brièveté, c’est tout ce que nous allons utiliser pour aujourd'hui. (Assurez-vous de regarder les exemples sur le site officiel de D3.js et consultez cet atelier que Mike a posté sur son site personnel.)
Dans ce premier exemple, nous créons simplement un cercle de pulsation en utilisant Math.sin et un itérateur avec setInterval. Cercle palpitant
Dans cet exemple, nous mettons à jour un graphique linéaire tracé avec des valeurs aléatoires. Graphique linéaire
SVG répondra à beaucoup de vos besoins en matière de rendu d'image dans le navigateur. Bien qu'il y ait beaucoup de raisons d'utiliser SVG, comme pour tout ce qui est génial, il y a des choses qui ne fonctionnent pas bien.
Voici quelques liens utiles pour vous enraciner davantage dans SVG!
Quelles autres utilisations avez-vous trouvées pour SVG? Faites-nous savoir dans la section commentaire et merci beaucoup d'avoir lu.
