Introduction à HTML SVG

L'utilisation d'images en HTML est géniale pour les sites Web multimédias. Tout ce que vous avez à faire est d'ajouter une balise au code HTML et à l'alto, votre navigateur affichera et même ajoutera un lien vers l'image de votre choix. Cela devient un peu troublant dans les situations où vous savez que l'image ou le diagramme sera zoomé, car un JPG.webp ou PNG ne montrera pas plus de détails une fois qu'il aura zoomé au-delà de sa résolution. SVG est la solution à ce problème. SVG signifie Scalable Vector Graphics. Comme son nom l'indique, ceux-ci peuvent être agrandis autant que nécessaire et les détails ne disparaissent jamais. Les SVG ne sont pas exclusifs à la technologie Web, mais pouvoir les utiliser en HTML est vraiment bien.

SVG est utile pour les diagrammes, les vecteurs, les tableaux et les graphiques dans le navigateur. Apprenons comment les utiliser en détail ici.

Syntaxe d'incorporation de SVG dans HTML

Comme pour l'utilisation du canevas en HTML5, il existe une balise simple que vous pouvez utiliser pour incorporer SVG dans des pages HTML5. La syntaxe est la suivante:


…. …. …. ….

Exemples de SVG en HTML

Voyons maintenant quelques exemples de vecteurs qui peuvent être créés et incorporés dans HTML5:

Exemple # 1 - Dessiner un rectangle via SVG en HTML

Code:




Sorry but this browser does not support inline SVG.

Production:

Exemple # 2 - Dessiner un carré avec des coins arrondis en SVG

Pour un carré aux coins arrondis, il faudra définir le rayon des coins à l'aide de rx, ry en dehors de la taille et des dimensions du carré.

Code:




Sorry but this browser does not support inline SVG.

Production:

Exemple # 3 - Dessiner un cercle en SVG avec contour et dépôt de couleur à l'intérieur

Code:




Sorry but this browser does not support inline SVG.

Production:

Exemple # 4 - Tracer une ligne droite avec SVG en HTML5

Nous pouvons utiliser la balise pour tracer une ligne droite dans les SVG HTML5, la couleur, l'épaisseur de la ligne et la position de celle-ci peuvent également être définies.

Code:




Production:

Exemple # 5 - Dessiner une éclipse via SVG en HTML5

Nous pouvons utiliser la balise pour dessiner une éclipse dans des SVG HTML5, la couleur et la position de celle-ci peuvent également être définies le long de la matrice avec son rayon.

Code:




Sorry but this browser does not support inline SVG.

Production:

Exemple # 6 - Création d'un polygone avec SVG en HTML5

La balise peut être utilisée dans les SVG pour créer des polygones. Dans la balise, nous devons mentionner les positions de chaque point. Les couleurs de remplissage, l'épaisseur du contour, etc. peuvent également être définies dans le code.

Code:




Sorry but this browser does not support inline SVG.

Production:

Exemple # 7 - Création d'une polyligne avec SVG en HTML5

La polyligne est utilisée pour dessiner une forme qui sera uniquement constituée d'une ligne droite. Gardez à l'esprit que ces lignes doivent également être connectées. Voici un exemple d'implémentation de polyligne en HTML5.

Code:




Sorry but this browser does not support inline SVG.

Production:

Exemple # 8 - Dessin de texte avec SVG en HTML5

Le texte peut être nécessaire dans n'importe quel SVG dans de nombreuses situations, telles que l'étiquetage d'un graphique, etc. Heureusement, il existe une balise dans SVG qui peut être utilisée. Le texte peut être défini à n'importe quelle position dans le SVG et vous pouvez également personnaliser sa couleur et d'autres détails.

Code:



Here is an example, it's very examply
Sorry but this browser does not support inline SVG.

Production:

Exemple # 9 - Dessiner une étoile avec SVG en HTML5

Maintenant que nous avons fini avec les bases, créons une étoile qui sera faite avec l'aide de SVG.

Code:



style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;" />
Sorry but this browser does not support inline SVG.

style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;" />
Sorry but this browser does not support inline SVG.

Production:

Exemple # 10 - Utilisation du dégradé linéaire dans SVG

Vous pouvez utiliser un dégradé linéaire et radial dans SVG HTML Canvas. Le dégradé doit être imbriqué dans la balise. Cette balise est ensuite marquée dans la balise SVG pour indiquer son utilisation. Jetons un coup d'œil à un exemple qui utilise Gradient dans une éclipse.

Code:







Sorry but this browser does not support inline SVG.

Production:

Conclusion

Dans le cas des sites où des diagrammes et des graphiques doivent être utilisés, les SVG sont une bouée de sauvetage. La plupart des navigateurs Web modernes prennent également en charge SVG et en plus d'être évolutifs. Un autre avantage de l'utilisation de SVG est sa taille de fichier. Parce que ce n'est qu'un peu de code, les SVG peuvent avoir une très petite empreinte en mémoire et en bande passante consommée par rapport aux images traditionnelles.

Articles recommandés

Ceci est un guide pour HTML SVG. Nous discutons ici de l'introduction et des 10 meilleurs exemples de SVG HTML avec explication et implémentation de code. Vous pouvez également consulter les articles suivants pour en savoir plus -

  1. Nouveaux éléments Html5
  2. SVG vs EPS
  3. Blocs HTML
  4. Cadres HTML

Catégorie:

Outils de développement Web