HTML SVG-tutoriel HTML-php.cn

HTML SVG

王林

Libérer： 2024-09-04 16:40:00

original

1086 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

Sortie :

HTML SVG

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>

Copier après la connexion

Sortie :

HTML SVG

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>

Copier après la connexion

Sortie :

HTML SVG

Exemple n°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 peuvent être définies.

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>

Copier après la connexion

Sortie :

HTML SVG

Exemple n°5 – Dessiner une éclipse via SVG en HTML5

Nous pouvons utiliser l'option balise pour dessiner une éclipse dans les SVG HTML5 ; sa couleur et sa position peuvent être définies avec le dé avec son rayon.

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>

Copier après la connexion

Sortie :

HTML SVG

Exemple #6 – Créer un polygone avec SVG en HTML5

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

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>

Copier après la connexion

Sortie :

HTML SVG

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>

Copier après la connexion

Sortie :

HTML SVG

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 balise en 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 :

<!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>

Copier après la connexion

Sortie :

HTML SVG

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>

Copier après la connexion

Sortie :

HTML SVG

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 étiqueter. 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 :

<!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>

Copier après la connexion

Sortie :

HTML SVG

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!