🖼️ Exporter un logo propre (SVG/PNG)

Introduction

Un bon export de logo évite le flou, les bords crénelés et les fichiers lourds.

Le duo gagnant : SVG (vectoriel, parfait pour le web et l’UI) + PNG (raster, fond transparent, usages spécifiques).
Cette fiche t’explique comment nettoyer ton logo, régler l’artboard, exporter correctement en SVG et PNG, puis livrer un pack prêt à l’emploi.

Étape 1 – Partir d’une base vectorielle propre

• Fichier source : .AI / .SVG / .FIG / .EPS (évite le .jpg).

• Supprime éléments cachés, calques inutiles, points redondants.

• Convertis les textes en tracés pour la version finale (évite la dépendance aux polices).

• Fusionne les formes (Pathfinder / Union) pour limiter les intersections parasites.

✅ Astuce : garde une version source avec textes non vectorisés pour pouvoir éditer la typographie plus tard.

Étape 2 – Couleurs & cohérence (profil sRGB)

• Passe le document en sRGB (standard web).

• Vérifie les couleurs de marque (ex. ta charte : bleu marine #0a1733, orange #ff6a00).

• Prépare les variantes indispensables : couleur, noir, blanc, et si besoin inversée pour fonds sombres.

Étape 3 – Artboard, grille & zone de respiration

• Caler l’artboard à la boîte englobante du logo + marge (exclusion zone = hauteur du X du logotype ou 10% de la largeur).

• Pour les exports PNG, aligne le logo sur la grille de pixels (évite le flou).

• Épaisseurs de traits : évite les hairlines (< 1 px à l’échelle d’usage).

Étape 4 – Export SVG (web, UI, haute qualité légère)

Réglages recommandés (Illustrator/Figma/Inkscape) :

• Type : SVG “simple”/optimisé, minifié.

• ViewBox : conservée (responsive).

• Width/Height : facultatifs (laisse le viewBox gérer la taille).

• Précision : 2–3 décimales.

• Polices : textes vectorisés (ou embarque en path).

• Images : aucune image raster intégrée.

• Attributs : styles en attributs de présentation (ou inline CSS).

• Métadonnées : retirer l’éditeur/metadata inutiles.

Accessibilité (si inline dans le HTML) :

Étape 5 – Export PNG (fond transparent, usages spécifiques)

Sorties recommandées (fond transparent, 8-bit, sRGB) :

• Logo horizontal : 256 px, 512 px, 1024 px (pour rétina/HD).

• Pictogramme/monogramme : 128 px, 256 px, 512 px.

• Prévoir versions clair (pour fonds foncés) et sombre (pour fonds clairs).

• Pas d’interlacing, pas de profil exotique, nettoyer les marges trop grandes.

✅ Astuce : exporte 1× / 2× / 3× si ton outil propose les échelles automatiques.

Étape 6 – Nommage & packaging des livrables

Arborescence conseillée :

/logo/































  /svg/































    ifpa-logo-horizontal.svg































    ifpa-logo-icon.svg































    ifpa-logo-white.svg































  /png/































    ifpa-logo-horizontal-256.png































    ifpa-logo-horizontal-512.png































    ifpa-logo-horizontal-1024.png































    ifpa-logo-icon-128.png































    ifpa-logo-icon-256.png































    ifpa-logo-icon-512.png































    ifpa-logo-white-512.png































  /source/































    ifpa-logo.ai































    ifpa-logo.fig































README.md  (couleurs, marges, usages)

Règles de nommage : marque-forme-couleur-taille.ext (lisible, triable, SEO-friendly).

Étape 7 – Contrôles qualité avant livraison

• Ouvre le SVG dans plusieurs navigateurs (Chrome/Firefox/Safari).

• Teste les PNG sur fond blanc/noir/couleur, vérifie la netteté à 100% et 200%.

• Poids des fichiers : un SVG simple doit rester léger (quelques ko à dizaines de ko).

• Vérifie l’accessibilité (titre/aria si inline).

Résumé rapide (Check-list)

• Source vectorielle propre, textes vectorisés.

• Profil couleur sRGB, variantes (couleur/noir/blanc).

• Artboard au plus juste + marge de sécurité.

• SVG minifié, viewBox conservé, pas d’images raster.

• PNG transparents aux tailles clés (1×/2×/3×).

• Nommage clair + pack /svg /png /source + README.

• QA multi-navigateurs/fonds/échelles.

Aller plus loin

• 🔗 [W3C – Bonnes pratiques SVG]

• 🔗 Google Fonts – Polices web gratuites

• 🔗 Nos formations Designer Web – IFPA.pro

• 🔗 Formations Poitiers – IFPA86.fr

• 🔗 Blog Benjamin Duplaa