SVG dans HTML | Tutoriel avec des exemples

HTML5 fournit une technologie SVG (acronyme des graphiques vectoriels évolutifs) pour dessiner des graphiques vectoriels bidimensionnels sur des sites Web. Contrairement à d'autres formats d'image (comme PNG, JPG, etc.) SVG ne s'appuie pas sur les pixels à la place, il utilise des données vectorielles.

World Wide Web Consortium (W3C) recommande la technologie SVG pour dessiner des graphiques sur un site Web. En html La balise est utilisée comme conteneur pour les graphiques SVG et en utilisant SVG, nous pouvons dessiner des chemins, des cercles, des rectangles, etc. Cet article vous guidera sur la façon de travailler avec les images SVG et de présentera un aperçu détaillé des aspects suivants:

• Bases de SVG
• Comment tracer la ligne SVG en HTML
• Comment dessiner le cercle SVG en HTML
• Comment dessiner le rectangle SVG en HTML
• Comment dessiner le rectangle arrondi SVG en HTML
• Comment dessiner le polygone SVG en HTML
• Comment dessiner SVG Eclipse HTML

Alors, commençons!

Bases de SVG

Les graphiques vectoriels évolutifs déterminent les graphiques / formats d'image vectoriels basés sur XML pour les technologies Web. Les fichiers SVG peuvent être animés et nous pouvons les intégrer avec d'autres normes W3C comme DOM et XSL. SVG fournit des images de haute qualité I.e. Si quelqu'un zoome sur une image SVG, la qualité de l'image ne serait pas affectée.

Comment tracer la ligne SVG en HTML

La balise HTML peut être utilisée dans le Tag pour tracer une ligne. L'exemple ci-dessous vous permettra de comprendre comment tracer une ligne SVG dans HTML.

Exemple

Le morceau de code suivant trace une ligne simple:

Ligne SVG non prise en charge!

Ici dans l'extrait ci-dessus, X1, Y1 sont les points de départ de la ligne, et x2, y2 sont les points de fin de la ligne. Alors que nous spécifions la couleur de la ligne dans l'attribut de style:

La sortie vérifie qu'une ligne de couleur bleue est tracée en fonction des positions définies par ses attributs.

Comment dessiner le cercle SVG en HTML

La balise HTML peut être utilisée dans le Tag pour dessiner un cercle.

Exemple
L'extrait ci-dessous vous permettra de créer un cercle SVG:

Cercle SVG non pris en charge!

Nous avons spécifié la valeur de l'axe x et de l'axe y comme 40 et 50 respectivement avec le rayon de 30 pixels. Voici la sortie:

La sortie vérifie que le cercle est dessiné en couleur bleue et rempli de couleur grise.

Comment dessiner le rectangle SVG en HTML

La balise peut être utilisée dans la balise pour dessiner un rectangle.

Exemple

L'extrait de code suivant définit la largeur, la hauteur du rectangle SVG comme 250, 100 respectivement et le rectangle sera rempli de la couleur grise.

Nous avons spécifié la couleur de course et la largeur de course en bleu, et 5 respectivement. Voici la sortie:

Comment dessiner le rectangle arrondi SVG en HTML

Nous devons spécifier le RX, Ry Attributs dans TAG pour dessiner des coins arrondis rectangle SVG.

Exemple

Étendons un peu l'exemple précédent et définissons la valeur de Rx, Ry comme 10px pour dessiner les coins arrondis du rectangle SVG:

L'extrait de code ci-dessus affiche la sortie suivante:

Comment dessiner le polygone SVG en HTML

HTML fournit une balise pour dessiner une forme qui a au moins 3 côtés. Un attribut nommé «Points» peut être utilisé pour spécifier l'axe x et l'axe y de tous les côtés.

Exemple

Considérons l'extrait de code suivant pour comprendre comment régler l'axe des x et l'axe y d'une forme:

La balise peut être utilisée pour dessiner différentes formes comme une étoile SVG, ou toute autre forme fermée.

Comment dessiner SVG Eclipse HTML

La balise est utilisée pour dessiner une forme d'éclipse, elle est très similaire au cercle. Le cercle SVG a un rayon horizontal et vertical égal mais dans l'éclipse, le rayon horizontal et vertical est différent les uns des autres.

Exemple

L'extrait ci-dessous montre comment dessiner une éclipse en html où rx = "150" est le rayon horizontal et ry = "75" est le rayon vertical de l'éclipse:

L'extrait de code ci-dessus montre le résultat suivant:

La bordure / course de couleur bleue et la forme d'éclipse remplie de gris.

Conclusion

Cet article a démontré comment dessiner des images SVG de base dans HTML. À l'intérieur de la balise, diverses balises peuvent être utilisées pour dessiner différentes images SVG comme ,,,, ,, et les étiquettes peuvent être utilisées pour tracer les lignes SVG, les cercles, les rectangles, les polygones et la forme d'éclipse respectivement. Dans ces balises, différents attributs tels que la course et la largeur de course peuvent être utilisés pour définir respectivement la bordure et la largeur de la forme.