Pourquoi enregistrer votre logo en SVG ?
Le SVG est le format idéal pour les logos sur les sites web, dans les applications et pour les usages numériques. Il est léger, redimensionnable et pris en charge par tous les navigateurs modernes. Dans ce guide, nous vous montrons exactement comment exporter un fichier SVG optimal depuis Adobe Illustrator.
Exporter en SVG en 5 étapes
Étape 1 : Préparez votre design
Convertissez tout le texte en contours via Texte > Vectoriser. Supprimez les calques cachés et les éléments inutilisés. Assurez-vous que tous les objets sont sur un seul calque ou organisés logiquement. Vérifiez qu'il n'y a pas d'effets raster (ombres, flou) dans votre design, car ils seraient incorporés en bitmap dans le SVG.
Étape 2 : Ajustez le plan de travail
Sélectionnez tous vos objets (Ctrl/Cmd+A) et allez dans Objet > Plans de travail > Ajuster aux limites de l'illustration. Cela ajuste le plan de travail au plus près de votre logo sans espace blanc superflu. Vous pouvez aussi utiliser manuellement l'outil Plan de travail (Maj+O).
Étape 3 : Choisissez la bonne méthode d'export
Allez dans Fichier > Exporter > Exporter sous. Choisissez SVG comme type de fichier. Vous pouvez aussi utiliser Fichier > Enregistrer sous > SVG, mais 'Exporter sous' vous donne plus de contrôle sur les paramètres et produit généralement un fichier plus propre.
Étape 4 : Configurez les options SVG
Dans l'écran d'options SVG : choisissez le profil SVG 'SVG 1.1', réglez la police sur 'Convertir en contours', choisissez 'Attributs de présentation' pour les propriétés CSS. Réglez les décimales sur 2. Activez 'Responsive' si votre logo doit s'adapter de manière flexible.
Étape 5 : Vérifiez le résultat
Ouvrez le fichier SVG exporté dans un navigateur web pour vérifier que tout s'affiche correctement. Comparez-le avec votre original dans Illustrator. Vérifiez que les couleurs sont correctes, les formes intactes et que le fichier s'adapte bien lors du zoom avant et arrière dans le navigateur.
Réglages d'export SVG optimaux
Pour les meilleurs résultats, utilisez ces réglages : profil SVG 1.1, propriétés CSS sur 'Attributs de présentation', Décimales sur 2, Encodage UTF-8. Désactivez 'Conserver les capacités d'édition Illustrator' pour réduire la taille du fichier. Si votre logo ne contient pas d'images, choisissez 'Lier' pour l'emplacement des images. Pour une optimisation supplémentaire, vous pouvez ensuite passer le fichier dans SVGO ou un outil similaire.
Conseils supplémentaires pour un export SVG optimal
Utilisez le minimum de points d'ancrage pour des fichiers plus petits. Évitez les masques d'écrêtage si possible et créez plutôt des formes avec le Pathfinder. N'utilisez pas les effets de transparence d'Illustrator, mais définissez plutôt l'opacité directement sur l'objet. Groupez les éléments logiques ensemble pour que le code SVG reste clair. Envisagez d'utiliser 'Afficher le code SVG' pour inspecter le code avant d'exporter.
Questions fréquentes
Pourquoi mon SVG est-il différent de l'original dans Illustrator ?
Cela est souvent dû aux effets raster (ombres, flou, dégradés avec transparence) qui ne sont pas bien convertis en SVG. Convertissez tous les effets en formes vectorielles simples ou supprimez-les. Vérifiez aussi que le texte est converti en contours.
Quel profil SVG dois-je choisir ?
Choisissez SVG 1.1 pour la compatibilité navigateur la plus large. SVG Tiny est destiné aux appareils mobiles à capacité limitée et n'est pas nécessaire pour la plupart des applications.
Comment réduire la taille de mon SVG ?
Réduisez le nombre de points d'ancrage, utilisez des nombres entiers pour les couleurs, supprimez les métadonnées inutiles et utilisez un optimiseur SVG comme SVGO. Dans Illustrator, utilisez 'Simplifier le tracé' pour réduire le nombre de points.
Un fichier SVG parfait depuis Illustrator
Avec les bons réglages et une bonne préparation, vous exportez un fichier SVG parfait depuis Illustrator pour votre site web. Vous n'avez pas Illustrator ou souhaitez être sûr d'un résultat optimal ? Logo in Vector livre votre logo en fichier SVG optimisé, prêt à l'emploi sur votre site web.