Tutoriel SVG – apprendre les bases du SVG

SVG est un langage XML destiné à créer des graphiques vectoriels. Vous pouvez écrire du balisage SVG dans un éditeur de texte, l’inspecter dans un navigateur, puis le traiter avec les API Aspose.SVG lorsque vous devez générer, modifier, restituer ou convertir des fichiers SVG depuis du code.

Ce tutoriel explique les notions SVG utilisées dans la plupart des workflows réels : systèmes de coordonnées, viewBox, formes, paths, texte, couleurs, remplissages, contours, dégradés, filtres, transformations et contenu incorporé. Utilisez-le comme base avant de passer aux articles centrés sur l’API pour l’édition, la conversion, la vectorisation ou la génération de documents SVG.

Coordonnées et mise en page

• Systèmes de coordonnées et unités SVG explique le canvas SVG, le viewport, les systèmes de coordonnées utilisateur et les unités.
• SVG viewBox montre comment viewBox met à l’échelle, recadre et repositionne des graphiques SVG.

Formes, paths et texte

• Formes SVG couvre rectangles, cercles, ellipses, lignes, polylignes et polygones.
• Données de path SVG explique les commandes de path pour lignes, arcs, courbes de Bézier et contours personnalisés.
• Texte SVG présente <text>, <tspan> et <textPath> pour afficher et styliser du texte SVG.

Couleur et peinture

• Couleur SVG explique les valeurs de couleur, fill, stroke, l’opacité et l’utilisation des couleurs pour formes, paths et texte.
• Remplissages et contours en SVG détaille le modèle de peinture SVG, l’épaisseur de contour, les extrémités, les jonctions et les pointillés.
• Couleur d’arrière-plan SVG montre des façons fiables d’ajouter ou de changer un fond SVG.
• Dégradés SVG explique les dégradés linéaires et radiaux, les stops, les directions et la réutilisation via url(#id).

Effets et transformations

• Transformations SVG couvre translate, scale, rotate, skew et les matrices de transformation.
• Matrice de transformation SVG explique le modèle matriciel derrière les transformations SVG.
• Filtres SVG présente flou, ombre portée, éclairage et primitives de filtre de couleur.

Contenu incorporé et pratique

• Contenu incorporé SVG montre comment SVG peut inclure des images raster, du SVG imbriqué et du HTML.
• Comment dessiner un flocon de neige est un projet pratique utilisant éléments réutilisables, rotation et animation.

Comment utiliser ce tutoriel SVG

Commencez par les sujets qui correspondent à votre problème :

1. Apprenez d’abord coordonnées et viewBox si vous devez comprendre la mise en page SVG, l’échelle, le recadrage ou les graphiques responsives.
2. Utilisez formes, paths et texte pour dessiner de la géométrie SVG ou créer du texte lisible dans le balisage.
3. Utilisez couleur, fill, stroke, dégradés et fonds lorsque la structure SVG est correcte mais que le style visuel doit changer.
4. Utilisez filtres et transformations pour flou, ombres, éclairage, rotation, mise à l’échelle, inclinaison ou positionnement par matrice.
5. Passez aux articles API Aspose.SVG lorsque vous devez générer, éditer, convertir, restituer ou vectoriser des fichiers SVG depuis du code.

Les exemples de ce tutoriel utilisent directement du balisage SVG. La figure suivante montre le logo Aspose rendu sous forme d’image SVG. Même un petit fragment SVG peut définir une icône, un logo ou une illustration simple réutilisable.

Le fragment ci-dessous est un exemple compact de balisage SVG pour le logo Aspose. Vous pouvez aussi ouvrir le fichier source : aspose.svg.

<svg height="400" width="400" viewBox="-40 0 400 400" xmlns="http://www.w3.org/2000/svg">
    <path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78" fill="#3993c9"/>
    <path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78"  fill="#f3622a" transform= "rotate(90 30 64) translate(5 -14)"/>
    <path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78"  fill="#c1af2c" transform= "rotate(180 25 78) translate(-19 9)"/>
    <path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78"  fill="#499c43" transform= "rotate(-90 25 78) translate(-5 14)"/>
    <circle cx="34.5" cy="73.5" r="40"   fill="white" fill-opacity="0.3" />
</svg>

Aspose.SVG propose des applications web SVG gratuites pour convertir des fichiers SVG ou image, fusionner des SVG, vectoriser des images, générer des sprites SVG, encoder SVG en Base64 et vectoriser du texte. Ces applications en ligne fonctionnent dans le navigateur et ne nécessitent aucune installation supplémentaire.