Guides et tutoriels

SVG vs PNG : Quel Format Choisir ?

Utilisez le format SVG pour les icônes de sites web, les logos et les interfaces car les tracés vectoriels restent nets sur tous les écrans. Utilisez le format PNG lorsque vous avez besoin d’une image matricielle fixe pour un e-mail ou un réseau social.

Comment Animer des Icônes SVG avec CSS

Ajoutez une classe CSS à votre balise SVG en ligne et utilisez des règles keyframes sur transform ou stroke-dasharray. Notre éditeur en direct génère automatiquement des animations fluides sans JavaScript.

Comment modifier un SVG dans Figma ou le Navigateur

Copiez le code SVG depuis SVG Nexus et collez-le directement dans Figma ou Illustrator pour modifier les tracés. Vous pouvez aussi ouvrir chaque icône dans notre Studio Vectoriel directement dans le navigateur.

Comment Utiliser des Icônes SVG dans React, Next.js et Vue

Sélectionnez l’onglet React TSX ou Vue 3 sur la page d’une icône pour copier un composant typé prêt à l’emploi. L’attribut currentColor permet d’adapter automatiquement la couleur au texte.

SVG en ligne contre balise image

Utilisez du SVG en ligne ou des composants pour changer la couleur au survol et animer en CSS. Utilisez la balise image avec largeur, hauteur et texte alternatif si vous voulez que l’icône soit indexée par la recherche d’images.

Éviter les conflits d’identifiants de dégradés et de clips

Les jeux multicolores réutilisent souvent des identifiants internes comme paint0_linear. Si deux icônes partagent un identifiant sur une page, le mauvais dégradé est dessiné. SVG Nexus préfixe automatiquement chaque identifiant interne par icône.

Icônes accessibles et miroir RTL

Masquez les icônes décoratives avec aria-hidden et focusable false. Donnez un aria-label clair aux boutons qui ne contiennent qu’une icône. Inversez les flèches horizontalement pour les langues de droite à gauche.

Assainir les SVG tiers

Le SVG est un format XML : un fichier non fiable peut contenir des scripts et des gestionnaires d’événements. Supprimez les balises script et servez les SVG avec une politique de sécurité stricte et l’en-tête nosniff.