Zone de protection du logo : calculer et garder la marge

Calcule la zone de protection du logo à partir d’une unité définie dans l’illustration approuvée, puis mesure vers l’extérieur depuis les limites visibles du logo complet. Si l’unité choisie vaut 10 et le logo 150 par 40, une zone d’exclusion d’une unité de chaque côté occupe 170 par 60. Le logo lui-même reste à 150 par 40.

La zone de protection est l’espace que les autres contenus doivent laisser vide autour d’un logo. Une marge dans le fichier peut aider à transmettre cet espace à une mise en page, mais le canevas vide n’est qu’une méthode de livraison. La charte de marque définit la règle. Si tu prépares les ressources d’une marque existante, utilise sa règle approuvée avant d’en créer une autre.

Ce guide suit une composition de logo originale à travers le calcul, l’export SVG et le redimensionnement. Si ta seule source est matricielle, récupère d’abord les formes visibles ; un vectoriseur d’image ne peut pas déduire la zone d’exclusion approuvée.

Choisis une unité appartenant à ce logo

Utilise un élément mesurable qui reste proportionnel lorsque le logo approuvé change de taille : la hauteur d’un symbole, une dimension d’une lettre précise ou une fraction spécifiée de toute l’illustration. Nomme exactement ce qui a été mesuré. Évite une règle comme « laisser un peu d’espace » ou un carré marqué X sans explication.

Les chartes officielles montrent pourquoi il s’agit d’une politique de conception et non d’un ratio universel. Le guide de protection de l’University at Buffalo utilise la hauteur du UB entrelacé autour de sa composition principale, avec des consignes distinctes pour les dessins au trait. Le guide de Vevo distingue les signes de plus et de moins de 30 px de haut et donne des espacements propres au contexte web et tablette. Suis la règle du véritable signe et de son application.

Pour notre exemple original, le symbole rond mesure 40 unités de haut. Nous choisissons X égal au quart de cette hauteur : X = 10. La marge requise est d’un X de chaque côté. C’est une règle inventée pour cet exemple, pas une recommandation que toutes les marques utilisent 25% de la hauteur de leur symbole.

Écris la règle simplement : « Pour cette composition horizontale, X égale un quart du diamètre du cercle. Laisse au moins un X à l’extérieur de chaque bord de la composition complète. » Le texte conserve la politique même lorsqu’une application rogne le canevas vide.

Mesure la composition entière, puis ajoute la marge

Une composition de logo est l’agencement approuvé du symbole et du nom utilisés ensemble. Mesure cet ensemble complet. Utiliser seulement les limites du cercle laisserait les lettres hors du calcul de la zone d’exclusion.

Notre cercle et trois lettres dessinées s’étendent de x = 0 à 150 et de y = 0 à 40. Cet exemple ne contient ni contours, ni ombres, ni objets masqués. Le rectangle d’exclusion s’étend donc de x = -10 à 160 et de y = -10 à 50.

X = circle height / 4 = 40 / 4 = 10
zone width = artwork width + 2X = 150 + 20 = 170
zone height = artwork height + 2X = 40 + 20 = 60

Si ton illustration possède des contours ou effets visibles, inclus leur étendue visible dans l’examen. Une mesure uniquement géométrique peut différer du résultat peint. Le guide de la boîte englobante SVG explique cette distinction ; ici, nous utilisons volontairement une géométrie remplie simple.

Transmets la règle dans un SVG avec marge

Le viewBox SVG associe un rectangle de coordonnées interne à la fenêtre affichée. Dans cet exemple, viewBox="-10 -10 170 60" inclut la marge calculée sans déplacer ni agrandir l’illustration.

Enregistre cet exemple complet sous logo-padded.svg. Les lettres du nom sont des formes dessinées ; il n’y a donc pas de dépendance à une police. Le dessin cercle et lettres est une illustration originale d’exemple, pas la ressource approuvée d’une autre marque.

<svg xmlns="http://www.w3.org/2000/svg"
     width="170" height="60" viewBox="-10 -10 170 60">
  <g fill="#17324d" fill-rule="evenodd">
    <circle cx="20" cy="20" r="20"/>
    <path d="M50 5H80V35H50Z M57 12V28H73V12Z"/>
    <path d="M87 35V5H94L108 24V5H115V35H108L94 16V35Z"/>
    <path d="M122 5H150V12H129V16H145V23H129V28H150V35H122Z"/>
  </g>
</svg>

Pour créer une ressource complémentaire serrée, utilise width="150", height="40" et viewBox="0 0 150 40" tout en gardant les mêmes cercle et chemins. Nomme les fichiers pour que le destinataire distingue celui qui inclut la marge. Garde les repères de mesure dans la charte ou sur un calque de contrôle distinct, pas dans l’illustration à placer.

Redimensionne la ressource sans réduire le logo prévu

Décide si une largeur désigne l’illustration visible ou tout le fichier avec marge. À 170 px de largeur de fichier, l’illustration d’exemple mesure 150 px de large et la marge 10 px. À 340 px de largeur de fichier, elle mesure 300 px de large et la marge 20 px. La règle proportionnelle survit à un redimensionnement uniforme.

Si la demande précise un logo visible de 300 px, donne à ce fichier avec marge une largeur de 340 px. Régler tout le fichier à 300 px ne donnerait qu’environ 264.7 px d’illustration visible, puisque 300 × 150 / 170 vaut environ 264.7.

Note de méthode : nous avons rendu les SVG complets serrés et avec marge dans Chromium. Les limites géométriques de l’illustration étaient de 150 par 40 unités. Aux largeurs avec marge de 170 px et 340 px, les largeurs horizontales mesurées de l’illustration étaient de 150 px et 300 px, avec des marges de 10 px et 20 px. Cela vérifie l’exemple créé dans le navigateur ; cela ne prouve pas le comportement d’import de chaque éditeur.

Lorsque le logo paraît trop petit, vérifie le canevas du fichier avant d’agrandir des objets au hasard. Si l’espace disparaît après import, inspecte les limites importées par le destinataire et rétablis la marge à partir de la règle X écrite. Pour un logo large dans un autre cadre, utilise l’ajustement du rapport d’aspect SVG afin de comprendre l’espace vide supplémentaire introduit par le placement.

Où intervient PerfectVector dans la livraison de logos

PerfectVector peut récupérer des formes vectorielles lorsqu’une marque ne possède qu’une copie matricielle de son logo. Une fois ces formes obtenues, compare le signe complet à la référence approuvée, nettoie les éléments de fond indésirables et applique séparément la règle de protection documentée de la marque. Le processus de vectorisation de logo traite la récupération des formes.

Demande d’abord le maître vectoriel d’origine et la charte. Ces fichiers préservent mieux l’illustration et les choix d’espacement qu’une nouvelle vectorisation. La bordure vide d’un JPG peut être une marge d’export accidentelle ; elle ne prouve pas une politique de marque. Le guide des formats de fichiers de logo aide à choisir les fichiers à livrer, et le guide de vectorisation de logo couvre la préparation et l’inspection de la source.

Termine en vérifiant l’illustration complète, la définition écrite de X, les dimensions du fichier avec marge et la véritable mise en page environnante. Garde un maître serré ainsi que la ressource destinée au placement. D’autres contrôles de livraison figurent dans la bibliothèque de processus du blog.

Questions fréquentes

La zone de protection vaut-elle toujours un quart de la hauteur du logo ?

Non. Un quart de la hauteur du cercle est la règle choisie pour cet exemple original. Les marques existantes peuvent définir d’autres unités, ratios et exceptions pour certaines applications.

Faut-il ajouter un rectangle blanc pour préserver la zone de protection ?

Tu peux réserver un espace vide avec le viewBox SVG sans ajouter de rectangle peint. Un rectangle blanc change l’illustration sur un fond coloré. Teste le fichier transparent avec marge à son emplacement prévu.

Un SVG avec marge impose-t-il automatiquement la charte ?

Non. Il transporte un espace vide dans sa fenêtre, mais un importateur peut rogner les limites et des objets de mise en page peuvent le chevaucher. La règle écrite et un contrôle final de placement restent nécessaires.

Sources

1. University at Buffalo — Zone de protection — exemple officiel d’unité fondée sur le signe et d’exceptions propres à certaines applications.
2. Vevo — Zone de protection du logo — montre comment les consignes peuvent varier selon la taille du signe et le contexte numérique.
3. MDN — viewBox SVG — explique le rectangle de coordonnées utilisé pour transmettre la marge vide de l’exemple.

Si le vecteur original manque, récupère ton logo matriciel avec PerfectVector. Inspecte toute la composition par rapport à la référence, puis applique sa règle de protection approuvée et vérifie la taille visible du logo dans le placement final.