Quand un imprimeur, un développeur ou un graphiste vous demande « le logo en SVG », il ne s'agit pas d'une lubie de professionnel. Ce format change vraiment ce que vous pouvez faire de votre logo. Voici ce qu'il apporte, et les pièges à connaître pour ne pas se tromper.

Un SVG, c'est quoi ?

SVG signifie Scalable Vector Graphics, soit « graphiques vectoriels adaptables ». Au lieu de stocker des millions de points colorés, comme un JPG ou un PNG, un SVG décrit le logo avec des formules : « une courbe qui part d'ici, passe par là ». C'est du texte, que l'on peut ouvrir dans n'importe quel éditeur. Voici le début du fichier du logo de l'exemple :

<svg xmlns="http://www.w3.org/2000/svg"
     width="300" height="129" viewBox="0 0 300 129">
  <path fill="#0e0e0e" fill-rule="evenodd"
        d="M142.33 12.93C113.85 12.95 90.77 36.05 …"/>
</svg>

Les sept avantages concrets

1. Il reste net à toutes les tailles

Une formule se recalcule à la taille voulue, de 16 pixels (un favicon) à plusieurs mètres (une enseigne). Voici le même logo en JPG de 300 pixels (à gauche) et en SVG (à droite) :

Logo en JPG de 300 pixels, agrandi par le navigateur
JPG de 300 px
Même logo en SVG, net à cette taille
SVG vectorisé

2. Il est très léger

Dans mon exemple, le logo pèse 2 Ko en SVG, contre 4 Ko pour le JPG de 300 pixels et 48 Ko pour un PNG de 1 200 pixels. Un logo léger charge plus vite sur un site et dans un e-mail.

3. Il est parfait sur les écrans haute définition

Les écrans Retina et 4K affichent deux à quatre fois plus de points qu'un écran classique. Un PNG prévu pour un écran standard y paraît flou ; un SVG s'adapte automatiquement.

4. Ses couleurs se changent en une ligne

Sur un site, on peut recolorer un SVG avec du CSS, par exemple pour le passer en clair en mode sombre :

.logo path { fill: currentColor; }
@media (prefers-color-scheme: dark) {
  .logo { color: #F7F4ED; }
}

5. Il est modifiable

On l'ouvre dans Illustrator, Inkscape ou Figma pour changer une forme, une couleur, déplacer un point. Avec un JPG, il faut tout redessiner.

6. Il peut s'animer

Un logo SVG peut se dessiner à l'écran, changer de couleur au survol ou réagir au défilement de la page, sans vidéo ni image supplémentaire.

7. Il sert de base à tous les autres formats

À partir d'un SVG propre, on obtient sans perte un PDF, un EPS ou un DXF pour l'impression, la broderie ou la découpe. À l'inverse, on ne remonte jamais proprement d'un petit JPG à un vecteur. Voyez les formats de fichiers d'un logo.

Les pièges à connaître

  • Le faux SVG. Certains fichiers « .svg » ne contiennent qu'une image JPG ou PNG emballée dedans : ils sont aussi flous qu'avant. Test simple : ouvrez le fichier dans un éditeur de texte. Si vous y voyez des lignes de chiffres et de lettres comme celles ci-dessus, c'est du vrai vecteur ; si vous y voyez un énorme bloc de caractères commençant par data:image, c'est un faux.
  • Les polices. Si le logo contient du texte, il doit être converti en tracés, sinon il changera d'aspect sur un ordinateur qui n'a pas la police.
  • Tous les services ne l'acceptent pas. Beaucoup de logiciels de messagerie, de réseaux sociaux et d'éditeurs de documents réclament un PNG ou un JPG. Gardez donc des exports en PNG à côté de votre SVG.
  • Les effets complexes. Certains dégradés, ombres et filtres s'affichent différemment selon les logiciels.
  • La prudence avec les SVG inconnus. Un SVG est du texte qui peut contenir du code. N'ouvrez et n'importez pas un SVG venant d'une source douteuse.

Comment obtenir un vrai SVG de son logo ?

  1. Retrouvez le fichier d'origine auprès de la personne qui a créé le logo : c'est le meilleur point de départ.
  2. Faites-le tracer à la main par un graphiste : voyez ce que change la vectorisation et mon offre de vectorisation manuelle.
  3. Dépannez-vous avec Contour, un outil gratuit qui vectorise dans le navigateur (voir sa présentation).

Questions fréquentes sur le format SVG

Un SVG est-il meilleur qu'un PNG pour un logo ?
Pour la netteté, le poids et la souplesse, oui. Mais le PNG reste utile là où le SVG n'est pas accepté, comme les e-mails ou certains réseaux sociaux. Le plus sûr est de conserver les deux.

Comment savoir si mon SVG est un vrai vectoriel ?
Ouvrez-le dans un éditeur de texte. S'il contient des formules de tracé (des lettres et des chiffres comme M, C, L), c'est du vecteur. S'il contient un énorme bloc commençant par data:image, c'est une image emballée.

Peut-on utiliser un SVG dans un e-mail ou un réseau social ?
Rarement. De nombreux services refusent le SVG ou l'affichent mal : utilisez un PNG à fond transparent.

Peut-on imprimer un SVG ?
Oui, mais l'imprimeur préfère souvent un PDF ou un EPS vectoriel. Un SVG propre se convertit sans perte vers ces formats.

Mon regard de graphiste

Le SVG est le fichier que je livre en premier, parce que tout le reste en découle : le PNG pour le web, le PDF pour l'imprimeur, le DXF pour la découpe. Quand un client me dit qu'il n'a « que le PNG », je sais que les ennuis commenceront à la première enseigne.

Un logo sans fichier vectoriel est un logo dont vous ne maîtrisez pas l'avenir.

Pour résumer

Le SVG décrit un logo par des formules : net à toutes les tailles, léger, recolorable et modifiable.

Méfiez-vous des faux SVG, des polices non converties en tracés et des services qui ne l'acceptent pas.

Demandez-le toujours, et gardez des PNG pour les usages où le SVG n'est pas accepté.