Dessin SVG – Tutoriel de base
SVG est un langage XML utilisé pour le dessin de graphiques vectoriels. Si vous êtes familier avec les bases du HTML et du XML, vous pouvez facilement créer des SVG dans n’importe quel éditeur de texte ! Nous espérons que notre didacticiel de dessin SVG vous aidera dans votre travail ou vos études. Nous essayons d’expliquer les règles communes et les étapes standard pour créer du SVG à partir de zéro, sur la base d’exemples simples.
Ce chapitre a pour objectif d’expliquer comment dessiner des images SVG. Cela comprend des articles sur les systèmes et unités de coordonnées SVG, les formes de base SVG, les données de chemin SVG, le texte SVG, les transformations SVG de base, la couleur SVG, les remplissages et les traits en SVG, le contenu intégré SVG et les filtres et dégradés SVG.
- Systèmes et unités de coordonnées SVG Dans cet article, vous trouvez la description de l’espace de travail de SVG qui est défini par les valeurs des attributs viewport et viewBox.
- Formes SVG Dans cet article, vous pouvez apprendre à créer différentes formes simples et à leur appliquer certaines propriétés de style.
- SVG Path Data Cet article montre comment les chemins peuvent être utilisés pour dessiner divers contours ou formes en combinant des lignes, des arcs et des courbes de Bézier. Le groupe de commandes pour la création de chemin SVG est décrit ici.
- Texte SVG Cet article présente les éléments de contenu du texte et passe en revue certains attributs courants qui aident à afficher, formater et styliser le texte dans une image SVG.
- Transformations SVG de base Vous découvrez comment appliquer les fonctions de transformation pour la rotation, la mise à l’échelle, le déplacement et l’inclinaison des objets graphiques via l’attribut de transformation SVG et considérez des exemples de code pour les transformations SVG.
- Matrice de transformation SVG Apprenez à utiliser une matrice de transformation pour faire pivoter, redimensionner, traduire et incliner les graphiques SVG et envisagez des exemples de code pour les transformations SVG.
- Remplissages et contours en SVG Dans cet article, nous décrivons plusieurs propriétés qui vous permettent de définir différents aspects du remplissage et du contour, notamment la couleur, l’opacité, l’épaisseur, l’utilisation de tirets, etc.
- SVG Color Cet article examine en profondeur les différentes façons dont le texte et les formes SVG peuvent être colorisés. Vous trouverez un aperçu de la façon dont la couleur est définie, y compris les différentes manières dont vous pouvez contrôler la transparence du contenu SVG.
- Couleur d’arrière-plan SVG Dans cet article, nous allons discuter de ce qu’est l’arrière-plan dans SVG. Vous trouverez également des exemples de code SVG et un guide complet sur la façon de définir ou de modifier une couleur d’arrière-plan.
- SVG Embedded Content est un contenu importé dans le document à partir d’une autre ressource. Vous verrez comment inclure et restituer des éléments bitmap et HTML dans un objet SVG.
- Filtres et dégradés SVG Les primitives de filtre qui produisent des effets de flou, de couleur et d’éclairage sont passées en revue. Le chapitre montre comment les dégradés linéaires ou radiaux peuvent décorer n’importe quelle ligne, forme ou texte dans les graphiques SVG.
Dans les prochains articles SVG, nous créerons des images vectorielles en utilisant du code XML. La figure illustre le logo Aspose – image SVG. Seulement quelques lignes de code et vous pouvez créer une icône, un logo ou n’importe quelle image simple.
Voici un exemple de code SVG pour le logo Aspose ( aspose.svg):
1<svg height="400" width="400" viewBox="-40 0 400 400" xmlns="http://www.w3.org/2000/svg">
2 <path d="M 25 78 C -26 28 97 -15 98 91 C 86 34 16 33 25 78" fill="#3993c9"/>
3 <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)"/>
4 <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)"/>
5 <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)"/>
6 <circle cx="34.5" cy="73.5" r="40" fill="white" fill-opacity="0.3" />
7</svg>Aspose.SVG propose des Applications Web gratuites SVG pour la conversion de fichiers SVG ou d’images, la fusion de fichiers SVG, la vectorisation d’images, la génération de sprites SVG, l’encodage de données SVG en base64 et la vectorisation de texte. Ces applications en ligne fonctionnent sur n’importe quel système d’exploitation doté d’un navigateur Web et ne nécessitent pas d’installation de logiciel supplémentaire. C’est un moyen rapide et simple de résoudre efficacement vos tâches liées au SVG!