SVG Cheatsheet

Découvrez la SVG Cheatsheet : votre guide pratique pour créer des graphiques vectoriels en ligne.

Bases & syntaxe

Balise SVG

<svg width="100" height="100"></svg>

Définit la racine d'un document SVG.

Element rect

<rect x="50" y="50" width="100" height="100" fill="blue"/>

Dessine un rectangle.

Structures de données

Graphe SVG

<svg>
  <defs>
    <g id="circle">
      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>
    </g>
  </defs>
  <use href="#circle"/>
</svg>

Permet de définir et réutiliser des éléments SVG.

Fonctions & methodes essentielles

Transformation translate

<rect x="50" y="50" width="100" height="100" fill="blue" transform="translate(10, 20)"/>

Translate un élément SVG.

Patterns courants

Fond d'arrière-plan

<svg>
  <rect x="0" y="0" width="100%" height="100%" fill="#f4f4f4"/>
</svg>

Crée un fond gris clair pour le SVG.

Operations avancées

Animation CSS

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
circle { animation: rotate 2s linear infinite; }

Animate les éléments SVG avec CSS.

Debugging & outils

Utilisation de l'inspecteur du navigateur

<rect x="50" y="50" width="100" height="100" fill="blue"/>

Utilisez l'inspecteur du navigateur pour déboguer les éléments SVG.

Outils en ligne

SVGOMG - Optimise les fichiers SVG.
Codepen - Outil de développement interactif pour le code SVG.

Projet SVG a lancer ?

Besoin d'aide sur un projet ? Decrivez-le pour des conseils personnalises.

Recevoir des conseils

Questions frequentes

A quoi sert cette cheatsheet SVG ?

Cette cheatsheet SVG regroupe la syntaxe, les commandes et les astuces essentielles pour SVG. Elle est concue pour servir d'aide-memoire rapide, que vous soyez debutant ou developpeur confirme cherchant une reference rapide.

Comment utiliser cette cheatsheet SVG ?

Parcourez les sections pour trouver la syntaxe ou la commande dont vous avez besoin. Vous pouvez la garder ouverte dans un onglet pendant que vous codez, ou la copier dans vos notes pour un acces hors ligne.

Cette cheatsheet est-elle a jour ?

Oui, nos cheatsheets sont regulierement mises a jour pour refleter les dernieres versions et bonnes pratiques de SVG. Si vous remarquez une information obsolete, n'hesitez pas a nous contacter.