Maison > Article > interface Web > HTML SVG
HTML SVG
- 王林original
- 2024-09-04 16:40:001058parcourir
L'utilisation d'images en HTML est géniale pour les sites Web riches en multimédia. Il ne vous reste plus qu'à ajouter une balise au code HTML, et voilà, votre navigateur affichera et même ajoutera un lien vers l'image de votre choix. Cela devient un peu troublant lorsque vous savez que l'image ou le diagramme sera zoomé, car un JPG ou un PNG n'affichera plus de détails une fois zoomé au-delà de sa résolution. SVG est la solution à ce problème. SVG signifie Graphiques vectoriels évolutifs. Comme leur 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 leur utilisation en HTML est vraiment intéressante. SVG est utile pour les diagrammes, les vecteurs, les tableaux et les graphiques dans le navigateur.
Syntaxe d'intégration de SVG en HTML :
Semblable à l'utilisation de Canvas en HTML5, il existe une balise simple que vous pouvez utiliser pour intégrer du SVG dans des pages HTML5.
Syntaxe :
<svg width="width here" height="height here "> …. …. …. …. </svg>
Exemples de SVG en HTML
Vous trouverez ci-dessous quelques exemples de vecteurs qui peuvent être créés et intégrés en HTML5 :
Exemple n°1 – Dessiner un rectangle via SVG en HTML
Code :
<!DOCTYPE html> <html> <body> <svg width="500" height="600"> <rect width="400" height="200" style="fill:rgb(0,0,200);stroke-width:5;stroke:rgb(255,0,0)"/> Sorry but this browser does not support inline SVG. </svg> </body> </html>
Sortie :
Exemple n°2 – Dessiner un carré aux coins arrondis en SVG
Pour un carré aux coins arrondis, nous devrons définir le rayon des coins à l'aide de rx, ry en dehors de la taille et des dimensions du carré.
Code :
<!DOCTYPE html> <html> <body> <svg width="500" height="500"> <rect x="100" y="100" rx="30" ry="30" width="300" height="300" style= "fill:green stroke:blue; stroke-width:5 ; opacity:0.5" /> Sorry but this browser does not support inline SVG. </svg> </body> </html>
Sortie :
Exemple n°3 – Dessiner un cercle en SVG avec un contour et un fichier de couleur à l'intérieur
Code :
<!DOCTYPE html> <html> <body> <svg width= "400" height= "400"> <circle cx= "100" cy= "100" r="90" stroke= "red" stroke-width="1" fill="grey" /> Sorry but this browser does not support inline SVG. </svg> </body> </html>
Sortie :
Exemple n°4 – Tracer une ligne droite avec SVG en HTML5
Nous pouvons utiliser la
Code :
<html> <body> <svg width= "400" height= "400"> <line x1 = "5" y1 = "5" x2 = "300" y2 = "300" style = "stroke:yellow; stroke-width:3"/> </svg> </body> </html>
Sortie :
Exemple n°5 – Dessiner une éclipse via SVG en HTML5
Nous pouvons utiliser l'option
Code :
<!DOCTYPE html> <html> <body> <svg height="300" width="300"> <ellipse cx="150" cy="100" rx="120" ry="70" style="fill:brown; stroke:green; stroke-width:3" /> Sorry but this browser does not support inline SVG.</svg> </body> </html>
Sortie :
Exemple #6 – Créer un polygone avec SVG en HTML5
La balise
Code :
<!DOCTYPE html> <html> <body> <svg height="300" width="600" > <polygon points="10,10 250,250 200,300" style="fill: red; stroke: black; stroke-width: 2" /> Sorry but this browser does not support inline SVG. </svg> </body> </html>
Sortie :
Exemple n°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 :
<!DOCTYPE html> <html> <body> <svg height="300" width="600"> <polyline points="10,10 60,60 70,100 80,120 300,200 250,300" style="fill: none; stroke: black; stroke-width: 3" /> Sorry but this browser does not support inline SVG. </svg> </body> </html>
Sortie :
Exemple n°8 – Dessiner du texte avec SVG en HTML5
Le texte peut être nécessaire pour n'importe quel SVG dans de nombreuses situations, comme l'étiquetage d'un graphique, etc. Heureusement, il existe un
Code :
<!DOCTYPE html> <html> <body> <svg height="300" width="500"> <text x="10" y="20" fill="purple" transform="rotate(30 20,40)">Here is an example, it's very examply </text> Sorry but this browser does not support inline SVG. </svg> </body> </html>
Sortie :
Exemple n°9 – Dessiner une étoile avec SVG en HTML5
Maintenant que nous en avons fini avec les bases, créons une étoile qui sera réalisée à l'aide de SVG.
Code :
<!DOCTYPE html> <html> <body> <svg width="400" height="400"> <polygon points="110,10 50,198 200,78 30,78 170,198" style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;" /> Sorry but this browser does not support inline SVG. </svg> </body> </html>
Sortie :
Exemple n°10 – Utilisation d'un dégradé linéaire en SVG
Vous pouvez utiliser un dégradé linéaire et radial dans un canevas HTML SVG avec beaucoup de lignes. Le dégradé doit être imbriqué dans le fichier
Code :
<!DOCTYPE html> <html> <body> <svg height="300" width="400"> <defs> <linearGradient id="gr1" x1="0%" y1="60%" x2="100%" y2="0%"> <stop offset="5%" style="stop-color:rgb(255,255,3);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="125" cy="150" rx="100" ry="60" fill="url(#gr1)" /> Sorry but this browser does not support inline SVG. </svg> </body> </html>
Sortie :
Conclusion
Dans le cas de 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 sont en plus d'être évolutifs. Un autre avantage de l’utilisation de SVG est la taille du fichier. Parce qu'il ne s'agit que d'un peu de code, les SVG peuvent avoir une très faible empreinte en mémoire et en bande passante consommée par rapport aux images traditionnelles.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!