Résolution des problèmes d’export
Pourquoi mon logo SVG est-il rogné ? Vérifier les limites avant de modifier le visuel
Un bord manquant n’est pas toujours un problème d’export. Identifiez la limite responsable avant d’agrandir ou de redessiner le logo.
En bref
Comparez le SVG exporté seul au même fichier dans sa destination. S’il est rogné partout, inspectez la zone d’export, la fenêtre d’affichage SVG, les écrêtages et les effets. S’il est complet seul mais rogné sur un site, examinez d’abord ce placement. Augmenter uniquement la taille d’affichage ne répare pas des éléments manquants.
1. Comparer le même fichier à deux endroits
Conservez la source approuvée et créez une copie de travail. Ouvrez directement le SVG exporté dans un navigateur, puis placez ce fichier exact dans la page ou l’application prévue. Utilisez un fond contrasté si une partie du logo est blanche. Comparez le symbole, les lettres et les détails les plus extérieurs, pas seulement la silhouette générale.
Si le fichier seul est complet, demandez à la personne chargée de l’intégration d’inspecter le conteneur d’image, les dimensions fixes, les réglages de recadrage et l’écrêtage des éléments environnants. Envoyez le SVG original et une capture montrant la différence. Ne redessinez pas le logo pour compenser un emplacement web rogné.
Si les deux vues perdent le même bord, commencez par le fichier exporté et sa source. Modifiez un réglage à la fois et conservez une copie de comparaison. Vous pourrez ainsi savoir quel changement résout le problème plutôt que d’accepter accidentellement un logo d’apparence différente.
| Symptôme | Premier élément à inspecter |
|---|---|
| Complet seul, rogné sur le site web | Le conteneur de destination et ses règles d’écrêtage |
| Coupé exactement sur un bord rectangulaire extérieur | La relation entre plan de travail, fenêtre d’affichage et viewBox |
| Une forme manque à l’intérieur de limites autrement complètes | Un chemin d’écrêtage, un masque ou un objet manquant |
| Seule une ombre ou un flou est coupé | La zone de l’effet ainsi que les limites extérieures |
2. Distinguer les coordonnées du visuel de sa zone d’affichage
Le viewBox SVG décrit un rectangle à l’aide de quatre nombres : x minimal, y minimal, largeur et hauteur. Ce rectangle projette les coordonnées du visuel dans la fenêtre d’affichage. Ce n’est pas simplement un réglage de résolution. Modifier uniquement la largeur CSS d’une image agrandit ou réduit cette même projection.
Pour un exemple simple, supposons qu’un logo rectangulaire doive occuper les coordonnées x = 0 à 100 et y = 0 à 40. Un viewBox couvrant seulement x = 0 à 90 ne décrit pas fidèlement la zone prévue. Corrigez l’export depuis la source ou demandez à quelqu’un qui comprend le SVG de définir des limites incluant le visuel approuvé.
Vérifiez l’étendue du rendu, pas seulement le tracé central. Les contours, marqueurs et effets peuvent dépasser la géométrie sélectionnée. N’appliquez pas une marge universelle arbitraire : trop d’espace supplémentaire fait paraître le logo petit lorsqu’il est placé à largeur fixe.
Pour aller plus loin : MDN : coordonnées du viewBox · MDN : débordement SVG et écrêtage de la fenêtre d’affichage
3. Vérifier la zone d’export dans Illustrator
Si le fichier vient d’Illustrator, revenez au document AI original. Vérifiez le plan de travail ou la sélection exportés et si leurs bords incluent l’intégralité du logo approuvé. Recherchez les éléments voisins qui ne doivent pas se trouver dans ce fichier livré.
Adobe distingue l’export SVG fondé sur les plans de travail de celui fondé sur les limites des objets : lorsque Utiliser les plans de travail est sélectionné, les plans de travail définissent les zones exportées ; sinon, les limites combinées des objets définissent la fenêtre d’affichage. Choisissez délibérément. Un export ajusté au visuel et un fichier de placement avec marges sont des livrables différents.
Réexportez depuis la source AI après avoir corrigé la zone. Adobe recommande de revenir à cette source pour les modifications suivantes plutôt que de traiter le SVG exporté comme nouveau fichier maître de travail. Ne répétez pas les importations et enregistrements jusqu’à ce que l’aperçu semble correct par hasard.
Pour aller plus loin : Adobe : export SVG et option Utiliser les plans de travail
4. Inspecter séparément écrêtages et effets
Un chemin d’écrêtage peut masquer une partie du dessin même si les limites extérieures du SVG sont généreuses. Inspectez les groupes d’écrêtage dans une copie de la source. Désactiver temporairement l’écrêtage concerné peut aider à identifier la cause, mais ne les supprimez pas tous : certains sont essentiels au design approuvé.
Un filtre possède aussi une zone définie. Le flou et l’ombre peuvent dépasser l’objet filtré : inspectez donc la zone du filtre et son système de coordonnées lorsque seul l’effet est tronqué. Agrandir le canevas extérieur ne répare pas nécessairement une zone de filtre interne plus petite.
La même prudence s’applique à un masque ou à une illustration volontairement recadrée dans un logo. Identifiez la limite responsable, préservez la construction intentionnelle et comparez toute correction à la référence approuvée. Régler overflow sur visible n’est pas une stratégie de livraison complète : la mise en page destinataire peut encore écrêter le résultat.
Pour aller plus loin : MDN : chemins d’écrêtage · MDN : zones de filtres · MDN : systèmes de coordonnées des filtres
5. Tester la correction sans modifier la marque
Vérifiez l’export corrigé à sa taille d’affichage prévue et en grand. La vue agrandie aide à repérer une courbe tronquée ; la petite vue indique si le placement fonctionne toujours. Comparez les proportions, l’espacement, l’apparence des contours et les éventuelles marges approuvées.
Testez à nouveau la destination réelle. Distinguez clairement les noms du fichier original et du fichier corrigé, et demandez au destinataire de remplacer l’ancien fichier plutôt que de se fier à une capture de la version corrigée. Si l’erreur persiste dans une seule application, documentez cette limite au lieu de promettre une compatibilité universelle.
Le SVG précédent tronquait le trait inférieur à la limite d’export. Cette version de remplacement a été exportée depuis la source approuvée et vérifiée dans le navigateur et l’en-tête cible. Le visuel lui-même est inchangé ; utilisez le nouveau SVG plutôt que la pièce jointe précédente.
6. Préparer le pack du visuel vérifié
Une fois le SVG source correct, logopack.app peut aider à organiser le pack livré. Inspectez aussi les fichiers de sortie sélectionnés : une source propre est un point de départ, pas un remplacement de la vérification de chaque résultat.
Un compte gratuit permet d’essayer la démo fournie tant que son SVG reste inchangé. L’export de vos propres créations nécessite une offre payante. Consultez les offres actuelles avant l’export et conservez les éventuels fichiers préparés séparément pour un prestataire.
Pour aller plus loin : Ouvrir le générateur · Voir les offres actuelles
Avant d’envoyer le remplacement
- Le même SVG a été testé seul et dans sa destination.
- La limite responsable a été identifiée, et non supposée.
- Le symbole, les lettres, les contours et les effets approuvés sont complets.
- Aucun écrêtage ou masque intentionnel n’a été supprimé sans examen.
- Le remplacement correspond au visuel et à l’espacement approuvés.
- Le destinataire sait quel fichier remplace l’ancien.
PASSEZ À LA PRATIQUE
Prêt à préparer votre pack ?
logopack.app transforme vos visuels SVG existants en un pack de logos organisé. Prévisualisez vos fichiers, choisissez les options d’export disponibles et vérifiez le résultat avant de le livrer. L’export de vos propres logos ou icônes nécessite Pro.
Commencez par le générateur de packs de logos, explorez le ZIP d’exemple, ou comparez les offres actuelles.
Ouvrir le générateur