Comment convertir un fichier AI (Adobe Illustrator) en SVG
Que sont les fichiers AI et SVG, et pourquoi les convertir ?
Un fichier AI est le format natif d'Adobe Illustrator. Il stocke des illustrations vectorielles dans une structure propriétaire que seuls Illustrator et quelques autres applications peuvent pleinement comprendre. C'est un format puissant, qui prend en charge des fonctionnalités spécifiques à Illustrator comme les effets dynamiques, le texte modifiable et les modes de fusion complexes. Mais toute cette puissance est enfermée dans une boîte noire. Les fichiers AI sont un écosystème fermé. Essaie d'en utiliser un dans un navigateur, une application web ou dans le pipeline de développement, et tu verras qu'il ne se passe absolument rien. Le SVG (Scalable Vector Graphics), en revanche, est le standard ouvert. Géré par le W3C, ce format basé sur XML est interprété nativement par tous les navigateurs modernes. Il peut s'adapter d'un minuscule favicon de 16×16 à un immense panneau d'affichage 4K sans perdre une once de netteté. Comme son contenu n'est que du texte brut, les développeurs peuvent même manipuler les tracés, les couleurs et les animations directement dans le code. Un logo exporté en SVG de 8 Ko sera parfait à n'importe quelle taille ; le même logo en PNG haute résolution pourrait facilement peser 200 Ko ou plus. Cette conversion de AI en SVG est une tâche quotidienne dans les flux de travail réels. Un designer transmet un logo à un développeur web. Une équipe d'interface utilisateur a besoin d'icônes. Une agence de communication veut mettre une identité de marque sur un site web. Le problème, c'est que la traduction n'est pas toujours parfaite. La magie spécifique à Illustrator — filtres matriciels, certains filets de dégradés, polices liées — n'a pas d'équivalent direct en SVG. Ces éléments doivent soit être simplifiés avant l'exportation, soit ils seront approximés, parfois mal, par des outils automatisés. Comprendre cela dès le départ t'épargnera un tas de retouches.
La méthode la plus propre : exporter le SVG directement depuis Adobe Illustrator
Si tu as Adobe Illustrator, l'exportation directe est le meilleur moyen d'obtenir un résultat propre et contrôlable. Le processus en lui-même est simple, mais c'est dans le panneau de paramètres que les choses peuvent mal tourner. Va dans **Fichier > Exporter > Exporter sous**, choisis SVG dans le menu déroulant des formats, et clique sur Exporter. Illustrator te présentera alors la boîte de dialogue des options SVG. Fais très attention à ces paramètres, car ils sont importants. - **Style** : 'Attributs de présentation' est le meilleur choix si le SVG doit être stylisé ou animé avec du CSS plus tard. S'il s'agit d'une image statique, les deux options conviennent. - **Police** : Règle-le sur 'Convertir en contours'. Je le répète : à moins d'être absolument certain que l'environnement de l'utilisateur final possède la police exacte que tu as utilisée, convertis-la simplement en contours. Cela intègre les formes des lettres en tant que tracés vectoriels et contourne complètement les problèmes de dépendance de police. - **Images** : Si ton illustration inclut des images matricielles comme des photos ou des textures, choisis 'Incorporer'. Lier les images crée des fichiers plus petits mais introduit une dépendance fragile à un chemin de fichier externe qui peut facilement se briser. - **ID d'objet** : Utilise 'Noms de calque' si les développeurs ont besoin de cibler des éléments spécifiques avec JavaScript ou CSS. Pour les ressources statiques où chaque octet compte, 'Minimal' est parfait. - **Décimales** : Une valeur de 2 est presque toujours le bon choix pour les graphiques d'écran. Descendre à 1 permet de gagner quelques octets mais peut visiblement déformer les courbes complexes. Reste sur 2. - **Minifier** : Coche toujours cette case pour les ressources de production. Elle supprime les espaces et les commentaires, réduisant la taille du fichier d'un respectable 10 à 20 %. Avant même d'arriver à la boîte de dialogue d'exportation, il y a une étape de préparation cruciale. Tu dois aplatir ou décomposer tous les effets dynamiques qui ne se traduisent pas bien en SVG (en utilisant **Objet > Décomposer l'aspect**). Par exemple, un effet d'ombre portée d'Illustrator disparaîtra ou sera converti en une image matricielle grossière à l'intérieur de ton SVG. Quiconque a déjà ouvert un fichier soi-disant vectoriel pour y trouver un JPEG flou connaît cette douleur précise. Aucun de ces résultats n'est ce que tu veux pour un graphique adaptable.
Convertir un AI en SVG en ligne avec CocoConvert
Soyons réalistes : tout le monde n'a pas un abonnement actif à Adobe Creative Cloud. Et même si c'est ton cas, tu as parfois juste besoin d'une conversion rapide sur une machine où Illustrator n'est pas installé. Pour ces moments-là, un convertisseur en ligne est la solution la plus pratique, et CocoConvert fait le boulot. Le processus sur [le convertisseur AI vers SVG de CocoConvert](/convert/ai-to-svg) est d'une simplicité enfantine : tu télécharges ton fichier AI, tu attends un instant qu'il soit traité, et tu télécharges le SVG résultant. Aucun logiciel, aucune inscription pour les conversions standard. Bien sûr, il y a quelques règles de base. CocoConvert gère les fichiers jusqu'à 100 Mo, ce qui est plus que suffisant pour la plupart des documents AI. Seuls les fichiers d'impression les plus complexes, chargés d'images haute résolution, dépasseront cette limite, et il vaut mieux de toute façon les traiter dans Illustrator. Qu'est-ce qui fonctionne le mieux ? Les illustrations vectorielles plates. Les logos, les icônes et les illustrations construits à partir de tracés de base et de dégradés simples se convertissent magnifiquement. Si ton fichier AI est principalement composé de formes vectorielles propres avec des remplissages et des contours pleins, tu peux t'attendre à un SVG très fidèle. Là où tu auras des ennuis, c'est avec la magie propriétaire d'Illustrator. Les filets de dégradés, les modes de fusion complexes et les effets dynamiques comme 'Contraction et Dilatation' n'ont pas d'équivalent direct en SVG. CocoConvert les approxime, mais pour les créations qui reposent fortement sur ces fonctionnalités, le résultat pourrait nécessiter un nettoyage manuel. Il en va de même pour les polices. Si ton fichier AI utilise du texte dynamique qui n'a pas été vectorisé, le convertisseur le remplacera par une police de secours. Pour une typographie précise, vectorise toujours ton texte dans Illustrator avant de le télécharger.
Utiliser des alternatives gratuites : Inkscape et autres outils
Inkscape est un éditeur vectoriel gratuit et open-source fantastique qui peut très bien convertir un AI en SVG. C'est un outil incontournable pour quiconque travaille régulièrement avec des vecteurs mais vit en dehors de l'écosystème Adobe. Dans Inkscape, il te suffit d'ouvrir le fichier AI via **Fichier > Ouvrir**, puis de l'enregistrer immédiatement via **Fichier > Enregistrer sous**, en choisissant SVG comme format. Tu verras des options pour 'SVG simple' et 'SVG Inkscape' ; pour une meilleure compatibilité avec les navigateurs et autres outils, choisis toujours 'SVG simple'. Mais il y a un gros hic : la compatibilité PDF. La plupart des outils tiers, y compris Inkscape, ne lisent pas réellement les données natives AI. Ils lisent un flux PDF qu'Illustrator incorpore dans le fichier. Si le fichier AI a été enregistré sans que l'option 'Créer un fichier PDF compatible' soit cochée, Inkscape ne pourra pas l'ouvrir. Tu obtiendras juste une page blanche ou une erreur. Si un client t'envoie un fichier AI qui ne s'ouvre pas, c'est presque certainement la raison. Tu devras lui demander de le ré-enregistrer avec cette option activée. Il existe aussi d'autres outils. Affinity Designer, qui coûte environ 70 € en achat unique, a une excellente importation de fichiers AI et produit un SVG très propre. À mon avis, c'est le meilleur investissement à long terme si tu n'es pas dans le train Adobe. Pour les accros de la ligne de commande, des outils comme `cairosvg` et `svg-convert` existent, mais ils nécessitent souvent de convertir d'abord l'AI dans un autre format, ce qui va à l'encontre d'un flux de travail simple. Pour une conversion rapide et ponctuelle, l'outil en ligne de CocoConvert reste plus rapide que d'installer et d'apprendre Inkscape. Cependant, si tu te retrouves à faire ça chaque semaine, investir du temps dans Inkscape ou de l'argent dans Affinity Designer sera payant.
Problèmes courants et comment les résoudre
La conversion est terminée, mais le SVG a l'air... bizarre. Ça arrive. Voici les coupables habituels et comment les corriger. **Polices manquantes ou remplacées** : Tu ouvres le SVG et ta belle police, choisie avec soin, a été remplacée par une police système générique. La solution est de rendre la police non pertinente. Avant de convertir, sélectionne tout ton texte dans Illustrator et vectorise-le (**Texte > Vectoriser**, ou Maj+Ctrl+O / Maj+Cmd+O). Cela transforme les lettres en simples tracés vectoriels, supprimant la dépendance à la police. **Artefacts matriciels dans le SVG** : Le fichier est censé être un vecteur, mais tu vois des pixels flous, ou la taille du fichier atteint un nombre choquant de mégaoctets. C'est un signe classique que les effets d'Illustrator ont été pixellisés à l'exportation. La solution est de le faire toi-même, mais en mieux. Dans Illustrator, va dans **Objet > Décomposer l'aspect** avant d'exporter. Cela convertit la plupart des effets dynamiques en leurs équivalents en tracés vectoriels. **Les couleurs sont différentes** : Le bleu vif de ta marque semble maintenant terne et délavé. C'est probablement un problème d'espace colorimétrique. Illustrator utilise souvent par défaut le CMJN pour les travaux d'impression, mais le SVG est un format web et vit dans un monde RVB. La solution est de changer le mode colorimétrique du document dans Illustrator via **Fichier > Mode colorimétrique du document > Couleurs RVB** avant d'exporter. **Le fichier SVG est énorme** : Un simple logo qui devrait faire 15 Ko pèse soudainement 2 Mo. Cela indique généralement des images matricielles incorporées, une précision décimale excessive ou des filets de dégradés complexes qui n'ont pas été simplifiés. La solution est de ré-exporter avec la minification activée, de réduire les décimales à 2, et de simplifier ou décomposer les objets complexes avant de commencer. **Sortie vide des convertisseurs en ligne** : Tu télécharges ton fichier AI et obtiens un SVG vide en retour. Tu te souviens de ce paramètre de compatibilité PDF dont on a parlé ? C'est là qu'il te joue des tours. Le fichier AI a probablement été enregistré sans que la case 'Créer un fichier PDF compatible' soit cochée, et le convertisseur n'a rien à lire. La seule solution est de ré-enregistrer le fichier AI original avec cette option activée.
Optimiser ton SVG après la conversion
N'envoie pas ce SVG tout de suite. Un fichier fraîchement exporté, même depuis Illustrator, est souvent gonflé de code redondant qui ajoute du poids sans avantage visuel. Pour une utilisation web, passer ton SVG dans un optimiseur est une étape non négociable. **SVGO** est la norme du secteur pour l'optimisation SVG. C'est un outil Node.js, mais son moteur alimente l'outil web incroyablement utile sur jakearchibald.github.io/svgomg. Il te suffit de télécharger ton SVG converti, et SVGOMG t'offre un aperçu en direct et un curseur pour voir les gains de taille de fichier en temps réel. Pour la plupart des ressources, tu peux activer en toute sécurité les options pour supprimer les commentaires, supprimer les métadonnées, réduire les groupes inutiles, fusionner les tracés et supprimer les attributs vides. Il n'est pas rare de voir des réductions de taille de fichier de 30 à 60 %. Fais juste attention avec des options comme 'Supprimer les ID' si tes développeurs prévoient de cibler des éléments spécifiques avec du code. De même, évite la fusion agressive des tracés si le SVG est destiné à l'animation ; tu ne peux pas animer des tracés qui ont été fusionnés en un seul bloc. Pour les ressources web de production, tu dois aussi décider si le SVG sera en ligne (code collé directement dans le HTML) ou externe (lié via une balise `<img>` ou du CSS). Les SVG en ligne sont géniaux car ils peuvent être stylisés par ton fichier CSS principal, mais ils augmentent la taille du document HTML et ne sont pas mis en cache séparément. Les SVG externes sont mis en cache par le navigateur mais sont plus difficiles à manipuler avec du CSS. Une dernière vérification : valide ton SVG final avec un outil comme le service de validation du balisage du W3C. Quiconque a passé une heure à déboguer un SVG qui s'affiche parfaitement dans Chrome mais qui est un désastre total dans Safari connaît la valeur de cette étape. Une passe de validation rapide attrape le code mal formé avant que ça ne devienne une urgence en production.
Choisir la bonne méthode pour ta situation
Alors, quelle est la meilleure façon de convertir un fichier AI en SVG ? Tout dépend de qui tu es et de ce que tu essaies d'accomplir. **Pour le designer professionnel qui a Illustrator :** Fais-le toi-même. La seule façon de garantir une traduction parfaite d'une illustration complexe avec des effets, des dégradés et des polices personnalisées est de faire le travail de préparation — vectoriser le texte, décomposer les apparences, passer en RVB — et d'utiliser la propre boîte de dialogue d'exportation SVG d'Illustrator. Tu as le contrôle total ; sers-t'en. **Pour le développeur qui a une deadline :** Ton designer vient de te refiler un fichier AI et s'est éclipsé. Pas de panique. Pour les ressources simples comme les logos et les icônes, [l'outil AI vers SVG de CocoConvert](/convert/ai-to-svg) est ton chemin le plus rapide. C'est rapide, ne nécessite aucun logiciel, et fait le boulot quand tu n'as pas affaire à des illustrations hyper-complexes. **Pour l'adepte de l'open-source ou le créatif soucieux de son budget :** Tu te retrouves à faire ça souvent mais tu ne veux pas payer la 'taxe Adobe'. Inkscape est ta réponse. C'est une alternative puissante et gratuite, mais tu dois faire attention à l'exigence de compatibilité PDF. Si tes fichiers sources ne sont pas enregistrés correctement, ça ne marchera pas. Quelle que soit la méthode que tu choisis, vérifie toujours ton travail. Ouvre le SVG final dans Chrome et Firefox au minimum. Assure-toi que les couleurs sont correctes, que le texte est net et qu'il s'adapte proprement. Un contrôle visuel de deux minutes permet de détecter la plupart des problèmes de conversion avant qu'ils ne deviennent le problème de quelqu'un d'autre à déboguer.