Graphiques vectoriels évolutifs: dessin de bases

Cet article explore les concepts fondamentaux, la structure et les éléments de dessin dans les images SVG. Si vous êtes nouveau dans les SVG, envisagez de revoir les ressources d'introduction sur les graphiques vectoriels évolutifs avant de continuer.

Concepts clés:

• Les SVG sont des documents XML évolutifs à n'importe quelle taille. Leur système de coordonnées n'est pas lié aux pixels; L'attribut viewBox définit l'espace de coordonnées de l'image.
• Les éléments SVG de base incluent les lignes, les polylines, les polygones, les rectangles, les cercles, les ellipses et le texte, chacun avec des attributs contrôlant l'apparence et la position.
• L'élément puissant path crée des formes complexes à l'aide de commandes et de coordonnées, reproduisant efficacement d'autres formes de base.
• Modifier les SVG à l'aide des éditeurs de texte ou des outils dédiés comme Inkscape ou Adobe Illustrator. Animez-les à l'aide de SMIL, CSS ou JavaScript. L'optimisation consiste à supprimer les métadonnées inutiles, à simplifier les coordonnées et à rationaliser les chemins.

Système de coordonnées SVG:

Le système de coordonnées SVG, contrairement aux graphiques mathématiques, provient en haut à gauche (0,0), avec l'axe x s'étendant à droite et l'axe y. Un point (100, 200) est de 100 unités à droite et à 200 unités de l'origine. L'attribut viewBox ("Minx Miny Largeth Height") définit la zone de coordonnée. preserveAspectRatio Contrôle comment les émeutes viewBox pour s'adapter à son conteneur, en maintenant le rapport d'aspect au besoin. width et height Réglez la taille intrinsèque de l'image.

SVG STRUCTURE DE DOCUMENT XML:

Alors que les SVG plus anciens ont utilisé des déclarations XML et des doctypes, les SVG modernes utilisent généralement un seul élément root <svg></svg> avec l'attribut xmlns requis (xmlns="https://www.w3.org/2000/svg"). Les attributs communs incluent viewBox, preserveAspectRatio, width et height. Les éléments facultatifs <title></title> et <desc></desc> fournissent des métadonnées.

Exemple:

<code class="language-xml"><svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 600 400" preserveaspectratio="xMidYMid meet">
  <title>My First SVG</title>
  <desc>A simple SVG example.</desc>
  <!-- ... SVG elements here ... -->
</svg></code>

Éléments de regroupement (<g></g>):

Les groupes <g></g> groupes d'éléments SVG Éléments pour une manipulation plus facile comme une seule unité utilisant CSS ou JavaScript.

Formes et chemins de base:

L'article détaille l'utilisation des éléments <line></line>, <polyline></polyline>, <polygon></polygon>, <rect></rect>, <circle></circle>, <ellipse></ellipse> et <text></text>, illustrant leurs attributs et rendu. Les capacités de l'élément path sont mises en évidence, avec une référence à des informations plus détaillées sur la création de chemins complexes. Les styles de capuchon de ligne et de jointure sont expliqués avec des exemples visuels.

Optimisation et ressources supplémentaires:

L'article conclut en mettant l'accent sur les techniques d'optimisation SVG et fournit des liens vers d'autres ressources, y compris les références d'élément et d'attribut, les guides de création de chemin et les outils de minification. Une section de questions fréquemment posées aborde les requêtes communes concernant la création de SVG, l'édition, l'animation, l'optimisation et la réactivité.

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!