Tutoriel SVG

L'objectif du tutoriel HTML SVG est de vous faire entrer en matière avec SVG en un court laps de temps et de pouvoir également utiliser ce tutoriel comme référence rapide à l'avenir. Ici, nous essaierons de fournir le plus d'exemples SVG possibles et de couvrir une plus large gamme de sujets pour vous aider à maîtriser rapidement l'utilisation de SVG

Introduction à SVG

SVG est l'abréviation de Scalable Vector Graphics. C'est un format graphique où les formes sont spécifiées en XML. Puis le visualiseur SVG présente l'XML. Aujourd'hui, la plupart des navigateurs Web peuvent afficher SVG, tout comme ils peuvent afficher PNG, GIF et JPG.
Internet Explorer 8et les versions antérieures peuvent devoir installer Adobe SVG Viewer pour afficher SVG dans le navigateur. IE 9 +, Chrome et Firefox prennent en charge nativement SVG.
SVG est utilisé pour les graphiques vectoriels bidimensionnels.
Si vous n'êtes pas sûr que SVG convient à vous ou à votre projet, consultez rapidement la page d'exemples SVG pour comprendre rapidement les fonctionnalités de SVG.

Éditeur en ligne SVG -　 SVG peut être édité en ligne, et peut être converti en code source SVG

Collection d'exemples SVG　 - Exemples de base SVG, pour vous aider à vous familiariser rapidement avec SVG

Manuel de référence SVG - Collecte des éléments couramment utilisés dans SVG et des méthodes d'utilisation des attributs des éléments

SVG est utilisé pour les graphiques vectoriels

En tant que format de graphique vectoriel, SVG est très utile pour les types de graphiques vectoriels, par exemple :

1. Graphiques bidimensionnels dans le système de coordonnées XY.

2. Graphiques en colonnes, diagrammes en cercles, etc.

3. Icônes et logos extensibles pour le Web, les tablettes et les applications mobiles ainsi que les Webapps.

4. Plans et dessins architecturaux et de conception

5. etc.

En tant que format de graphique vectoriel, les formes à afficher sont stockées sous forme de structures vectorielles ou similaires. Autrement dit, comme des nombres. Pas en pixels.

「Resizable» signifie que le spectateur peut zoomer sur l'image SVG verticalement et horizontalement sans perte de qualité. Cela est possible parce que les graphiques sont définis numériquement plutôt que pixel par pixel. Zoomer sur l'image SVG signifie simplement multiplier ou diviser les nombres définissant les formes SVG.

Bien que les graphiques vectoriels bitmap puissent être intégrés aux images SVG, SVG n'est pas une choix idéal pour les graphiques bitmap tels que les photos, les films, etc. C'est une méthode pratique pour dessiner des formes ou du texte sur des images bitmap.

SVG est très approprié pour la génération d'images/Graphique/Graphique

SVG est un format XML (format texte), facile à générer à partir de Servlet, JSP, ASP.NET, PHP ou d'autres technologies d'applications Web. Cela rend SVG très approprié pour les graphiques et les diagrammes générés par ordinateur. Curieusement, vous devez généralement générer le type de diagramme le plus approprié pour SVG dans une application Web (graphiques, diagrammes, diagrammes, etc.). Cela rend SVG encore plus approprié pour la génération de graphiques et de diagrammes.

Écrire un script SVG

Il est possible de modifier les images SVG générées par le navigateur à l'aide de JavaScript. Cela permet d'utiliser SVG pour des démonstrations plus dynamiques, même pour des petits jeux.

À propos de ce tutoriel

L'objectif de ce tutoriel est de vous permettre de commencer à utiliser SVG en un court laps de temps et de pouvoir également utiliser ce tutoriel comme une référence rapide à l'avenir. Nous essaierons de couvrir le plus possible de SVG, mais sans couvrir tous les points de la norme SVG. Une fois que vous avez une bonne compréhension des bases, vous pouvez facilement consulter la norme SVG pour des sujets plus avancés ou des cas spéciaux.