Un coup d'oeil dans Scalable Vector Graphics (SVG)

Les graphiques vectoriels ont été largement appliqués dans les médias imprimés. Sur un site Web, on peut également ajouter des graphiques vectoriels avec SVG ou Graphique vectoriel évolutif. Citant les spécifications officielles de W3.org, SVG est décrit comme suit:

Un langage pour décrire les graphiques bidimensionnels en XML. SVG autorise trois types d’objets graphiques: formes graphiques vectorielles (par exemple, chemins composés de lignes droites et de courbes), images et texte..

En réalité, il existe depuis 1999 et, à compter du 16 août 2011, il est devenu une recommandation du W3C. Cependant, SVG est encore largement sous-utilisé, alors que l'utilisation de Vector au lieu de Bitmap présente de nombreux avantages.

Avantages SVG

En termes de diffusion de graphiques sur des sites Web, SVG offre quelques avantages par rapport à Bitmap, notamment:

Résolution Indépendante

Le graphique bitmap / raster dépend de la résolution - il est construit sur des pixels. Les graphiques servis seront pixellisés lorsqu’ils seront redimensionnés à un certain niveau de zoom. Cela n’arrive pas au graphique vectoriel, dont la résolution est de nature indépendante, le graphique étant exprimé par une équation mathématique qui le rend évolutif à tout niveau de zoom tout en maintenant la qualité, même chez Retina Display.

Réduction de la requête HTTP

SVG peut être incorporé directement dans un document HTML avec svg Ainsi, le navigateur n'a pas besoin de faire une demande pour servir le graphique. Cela se traduit également par de meilleures performances de charge pour le site Web.

Styling et Scripting

Enrobage direct avec svg tag nous permettra également de styler facilement le graphique via CSS. nous pouvons changer les propriétés de l'objet telles que la couleur de fond, l'opacité, les bordures, etc. de la même manière que nous le faisons avec une balise HTML normale. De même, nous pouvons également manipuler le graphique via JavaScript.

Peut être animé et édité

L'objet SVG peut être animé lorsqu'il utilise l'élément d'animation ou via la bibliothèque JavaScript telle que jQuery. L'objet SVG peut également être édité avec n'importe quel éditeur de code texte ou un logiciel graphique comme Inkscape (gratuit) ou Adobe Illustrator..

Taille de fichier plus petite

SVG a une taille de fichier plus petite que Bitmap, avec une présentation graphique similaire.

Dessiner des formes de base avec SVG

Selon la spécification, nous pouvons dessiner des formes de base comme le rectangle, cercle, ligne, ellipse, polyligne et polygone SVG et pour que le navigateur rende le graphique SVG, tous ces éléments graphiques doivent être insérés dans le étiquette. Voyons les exemples ci-dessous pour plus de détails:

Ligne

Dessiner une ligne en SVG, nous pouvons utiliser le élément. Cet élément est utilisé pour tracer une seule ligne droite, il ne sera donc composé que de deux points., début et fin.

Comme vous pouvez le voir ci-dessus, la coordonnée du point de départ de la ligne est exprimée avec les deux premiers attributs. x1 et x2, tandis que la coordonnée du point final de la ligne est exprimée avec y1 et y2.

Il y a aussi deux autres attributs, le accident vasculaire cérébral et largeur du trait qui servent à définir la couleur et la largeur de la bordure, respectivement. Alternativement, nous pouvons également définir ces attributs dans un style en ligne, comme ceci:

il finit par faire la même chose.

Voir la démo “Ligne”

Polyligne

C'est presque semblable à la , mais avec le élément, nous pouvons dessiner plusieurs lignes au lieu d'un seul. Voici un exemple:

élément a points attributs qui stockent toutes les coordonnées qui forment les lignes.

Voir la démo “Polyligne”

Rectangle

Dessiner un rectangle est aussi simple avec cette élément. Il suffit de spécifier la largeur et la hauteur, comme suit:

Voir la démo “Rectangle”

Cercle

On peut aussi dessiner un cercle avec le élément. Dans l'exemple suivant, nous allons créer un cercle avec 100 rayon qui est défini avec r attribut:

Les deux premiers attributs, cx et cy définissent la coordonnée centrale du cercle. Dans l'exemple ci-dessus, nous avons défini 102 à la fois pour le X et y coordonnées, si ces attributs ne sont pas spécifiés, 0 sera pris comme valeur par défaut.

Voir la démo “Cercle”

Ellipse

On peut dessiner une ellipse avec . Cela fonctionne assez comme le cercle, mais cette fois nous pouvons contrôler spécifiquement le X rayon de la ligne et y rayon de ligne avec rx et ry attribut;

Voir la démo “Ellipse”

Polygone

Avec le élément, nous pouvons dessiner plusieurs côtés de formes comme un triangle, un hexagone et même un rectangle. Voici un exemple:

Voir la démo “Polygone”

Utilisation de l'éditeur graphique vectoriel

Comme vous pouvez le constater, dessiner des objets simples avec SVG en HTML est assez simple. Cependant, lorsque l’objet devient plus complexe, cette pratique n’est plus idéale et vous donnera mal à la tête..

Heureusement, comme nous l'avons mentionné ci-dessus, nous pouvons utiliser un éditeur de graphiques vectoriels comme Adobe Illustrator ou Inkscape faire le travail. Si vous connaissez ce logiciel, il est sûrement beaucoup plus facile de dessiner des objets avec leur interface graphique plutôt que de coder vous-même le graphique en balise HTML..

Si vous travaillez avec Inkscape, vous pouvez enregistrer votre graphique vectoriel au format SVG, puis l’ouvrir dans l’éditeur de code texte. Vous devriez maintenant trouver les codes SVG dans le fichier. Copiez tous les codes et collez-les dans votre document HTML.

Ou, vous pouvez également intégrer le .svg classer par l’un de ces éléments; intégrer, iframe et objet, par exemple;

Les résultats seront finalement les mêmes.

Dans cet exemple, j'utilise cet iPod Apple d'OpenClipArt.org.

Voir la démo “iPod”

Prise en charge du navigateur

En ce qui concerne la prise en charge des navigateurs, SVG a été très bien pris en charge par tous les principaux navigateurs, sauf IE8 et les versions antérieures. Mais cette question peut être résolue avec cette bibliothèque JavaScript, appelée Raphael.js. Afin de faciliter les choses, nous allons utiliser cet outil, ReadySetRaphael.com, pour convertir notre code SVG au format pris en charge par Raphael. Voici comment.

Tout d’abord, téléchargez et incluez le Raphael.js bibliothèque à votre document HTML. Ensuite, téléchargez le .svg fichier sur le site, copiez et collez le code généré dans le chargement suivant une fonction;

 window.onload = function () // le code Raphael va ici

À l'intérieur de corps tag, mettez ce qui suit div avec rsr attribut id;

Ça y est, vous avez terminé. Découvrez l'exemple à partir du lien ci-dessous.

Voir la démo “Raphaël”

Dernières pensées

Voilà donc les bases avec SVG. Nous espérons que vous avez maintenant une compréhension juste de ce sujet. C'est le meilleur moyen d'optimiser votre site pour n'importe quelle résolution d'écran, même pour une utilisation sur un écran Retina.

Comme toujours, si vous êtes un aventurier, nous avons mis ici quelques références supplémentaires et une discussion pour approfondir ce sujet..

Une introduction à SVG - W3 Schools
Résolution indépendante avec SVG - Smashing Magazine
Pourquoi n'utilisez-vous pas SVG? - NetTuts

Merci d'avoir lu et nous espérons que vous avez apprécié ce post.

Voir la démo
Source de téléchargement