> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Spazio di rispetto del logo: calcola e conserva il margine > Scegli l'unità di rispetto del logo, calcola la zona di esclusione e conservala in un SVG distinguendo la grafica dalla tela con margini. Source: https://perfectvector.com/it/blog/logo-clear-space-calculation Language: it Author: Irene Kim Published: 2026-10-12T08:00:00+09:00 Calcola lo spazio di rispetto del logo da un'unità definita nella grafica approvata, poi misura verso l'esterno dai limiti visibili del logo completo. Se l'unità scelta è 10 e il logo misura 150 per 40, una zona di esclusione di un'unità su ogni lato occupa 170 per 60. Il logo stesso rimane 150 per 40. Lo spazio di rispetto è l'area che gli altri contenuti devono lasciare vuota attorno al logo. I margini del file possono aiutare a trasferirla nell'impaginazione, ma la tela vuota è solo un metodo di consegna. È la linea guida del marchio a definire la regola. Se prepari le risorse di un marchio esistente, usa la sua regola approvata prima di crearne una nuova. Questa guida segue una composizione originale attraverso calcolo, esportazione SVG e ridimensionamento. Se l'unico sorgente è un'immagine raster, recupera prima le forme visibili; un vettorializzatore non può dedurre la zona di esclusione approvata. ## Scegli un'unità propria di questo logo Usa un elemento misurabile che resti proporzionale quando il logo approvato cambia scala: altezza di un simbolo, dimensione di una lettera specifica o frazione definita dell'intera grafica. Indica esattamente cosa hai misurato. Evita regole come “lascia un po' di spazio” o un quadrato segnato X senza spiegazione. Le guide ufficiali mostrano perché si tratta di una regola di progetto, non di un rapporto universale. La [guida allo spazio di rispetto dell'University at Buffalo](https://www.buffalo.edu/brand/identity/usage/Clear-space.html) usa l'altezza delle lettere UB intrecciate attorno alla composizione principale del marchio, con indicazioni separate per la grafica al tratto. La [guida Vevo](https://brand.vevo.com/logo/clearspace/) distingue i marchi sopra e sotto i 30 px di altezza e fornisce distanze specifiche per web e tablet. Segui la regola del marchio e dell'applicazione effettivi. Nel nostro esempio originale, il simbolo rotondo è alto 40 unità. Scegliamo X come un quarto di quell'altezza: X = 10. Il margine richiesto è una X su ogni lato. È una regola inventata per l'esempio, non una raccomandazione affinché ogni marchio usi il 25% dell'altezza del simbolo. Scrivi la regola in modo semplice: “Per questa composizione orizzontale, X equivale a un quarto del diametro del cerchio. Lascia almeno una X all'esterno di ogni bordo della composizione completa.” Il testo conserva la regola anche quando un'applicazione ritaglia la tela vuota. ## Misura la composizione completa, poi aggiungi il margine Una composizione del logo è la disposizione approvata di simbolo e logotipo usati insieme. Misura l'intera disposizione. Usare soltanto i limiti del cerchio lascerebbe le lettere fuori dal calcolo della zona di esclusione. Il cerchio e le tre lettere disegnate vanno da x = 0 a 150 e da y = 0 a 40. Nell'esempio non ci sono tratti, ombre o oggetti nascosti. Il rettangolo di esclusione va quindi da x = -10 a 160 e da y = -10 a 50. ```text X = circle height / 4 = 40 / 4 = 10 zone width = artwork width + 2X = 150 + 20 = 170 zone height = artwork height + 2X = 40 + 20 = 60 ``` Se la grafica ha tratti o effetti visibili, includine l'estensione visibile nella verifica. Una misura della sola geometria può differire dal risultato dipinto. La [guida al rettangolo di delimitazione SVG](https://perfectvector.com/it/blog/svg-bounding-box) spiega questa distinzione; qui usiamo deliberatamente semplice geometria riempita. ![La stessa composizione originale di cerchio e logotipo con limiti stretti, guida della zona di esclusione da dieci unità e SVG con margini a due dimensioni](https://perfectvector.com/blog/logo-clear-space-calculation/clear-space-bounds.webp) *La grafica riempita misura 150 per 40 unità. Il margine scelto di 10 unità produce una tela 170 per 60. La guida serve alla documentazione ed è assente dalla grafica consegnata.* ## Conserva la regola in un SVG con margini Il [viewBox SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/viewBox) mappa un rettangolo di coordinate interne sul viewport visualizzato. In questo esempio, `viewBox="-10 -10 170 60"` include il margine calcolato senza spostare o ingrandire la grafica. Salva questo esempio completo come `logo-padded.svg`. Le lettere del logotipo sono forme disegnate, quindi non dipende da un font. Il disegno di cerchio e lettere è grafica originale dell'esempio, non una risorsa approvata di un altro marchio. ```xml ``` Per creare una risorsa alternativa senza margini, usa `width="150"`, `height="40"` e `viewBox="0 0 150 40"` conservando lo stesso cerchio e gli stessi tracciati. Assegna nomi che permettano al destinatario di capire quale file include il margine. Mantieni le guide di misura nel documento del marchio o in un livello di revisione separato, non nella grafica che verrà posizionata. > **La tela vuota richiede comunque un controllo del posizionamento** > > Un SVG con margini riserva spazio nel proprio viewport. Non può impedire a un altro oggetto dell'impaginazione di sovrapporsi a quel viewport né garantire che l'importatore ne conservi i limiti. Verifica il posizionamento effettivo rispetto alla regola scritta. ## Ridimensiona il file senza rimpicciolire il logo previsto Decidi se una larghezza si riferisce alla grafica visibile o all'intero file con margini. Con file largo 170 px, la grafica dell'esempio è larga 150 px e il margine è 10 px. Con file largo 340 px, la grafica è larga 300 px e il margine è 20 px. La regola proporzionale sopravvive al ridimensionamento uniforme. Se il brief richiede un logo visibile da 300 px, imposta la larghezza del file con margini a 340 px. Impostare il file a 300 px darebbe solo circa 264,7 px di grafica visibile, perché 300 × 150 / 170 è circa 264,7. | Cosa specifichi | Larghezza del viewport con margini | Larghezza della grafica visibile | Margine laterale | | ------------------------------ | ---------------------------------- | -------------------------------- | ---------------- | | Esempio base | 170 px | 150 px | 10 px | | Esempio raddoppiato | 340 px | 300 px | 20 px | | Intero file impostato a 300 px | 300 px | Circa 264,7 px | Circa 17,6 px | Nota sul metodo: abbiamo renderizzato in Chromium gli SVG completi senza margini e con margini. I limiti geometrici della grafica erano 150 per 40 unità. Alle larghezze con margini di 170 px e 340 px, le larghezze orizzontali misurate della grafica erano 150 px e 300 px, con margini di 10 px e 20 px. Questo verifica l'esempio creato nel browser; non dimostra il comportamento d'importazione di ogni editor. Quando il logo sembra troppo piccolo, controlla la tela del file prima di ingrandire oggetti a caso. Quando lo spazio scompare dopo l'importazione, esamina i limiti importati nella destinazione e ripristina il margine dalla regola X scritta. Per un logo largo dentro una cornice diversa, usa l'[adattamento del rapporto d'aspetto SVG](https://perfectvector.com/it/blog/svg-preserveaspectratio) per capire lo spazio vuoto aggiuntivo introdotto dal posizionamento. ## Il ruolo di PerfectVector nella consegna del logo PerfectVector può recuperare forme vettoriali quando un marchio ha solo una copia raster del logo. Una volta ottenute le forme, confronta il marchio completo con il riferimento approvato, elimina gli elementi di sfondo indesiderati e applica separatamente la regola documentata dello spazio di rispetto. Il [flusso di vettorializzazione del logo](https://perfectvector.com/it/vectorize-logo) tratta il recupero delle forme. Chiedi prima master vettoriale originale e linee guida del marchio. Questi file conservano grafica e decisioni di spaziatura meglio di un nuovo ricalco. Il bordo vuoto di un JPG potrebbe essere un margine di esportazione accidentale; non dimostra una regola del marchio. La [guida ai formati dei file del logo](https://perfectvector.com/it/blog/logo-file-formats) aiuta a scegliere cosa consegnare, mentre la [guida alla vettorializzazione del logo](https://perfectvector.com/it/blog/how-to-vectorize-a-logo) tratta preparazione e ispezione del sorgente. Concludi controllando grafica completa, definizione scritta di X, dimensioni del file con margini e impaginazione circostante effettiva. Conserva un master senza margini oltre alla risorsa prevista per il posizionamento. Altri controlli di consegna sono nella [raccolta dei flussi del blog](https://perfectvector.com/it/blog). ## Domande frequenti ### Lo spazio di rispetto del logo è sempre un quarto della sua altezza? No. Un quarto dell'altezza del cerchio è la regola scelta per questo esempio originale. I marchi esistenti possono definire altre unità, proporzioni ed eccezioni per applicazioni specifiche. ### Devo aggiungere un rettangolo bianco per mantenere lo spazio di rispetto? Puoi riservare spazio vuoto con il viewBox SVG senza aggiungere un rettangolo dipinto. Un rettangolo bianco cambia la grafica su uno sfondo colorato. Prova il file trasparente con margini nel posizionamento previsto. ### Un SVG con margini applica automaticamente la linea guida del marchio? No. Trasporta spazio vuoto dentro il proprio viewport, ma un importatore può ritagliarne i limiti e gli oggetti di impaginazione possono sovrapporvisi. Restano necessari la regola scritta e un controllo finale del posizionamento. ## Fonti 1. [University at Buffalo — Spazio di rispetto](https://www.buffalo.edu/brand/identity/usage/Clear-space.html) — Offre un esempio ufficiale di unità basata sul marchio ed eccezioni specifiche dell'applicazione. 2. [Vevo — Spazio di rispetto del logo](https://brand.vevo.com/logo/clearspace/) — Mostra come le indicazioni possano cambiare con dimensioni del marchio e contesto digitale. 3. [MDN — SVG viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/viewBox) — Spiega il rettangolo di coordinate usato per conservare il margine vuoto dell'esempio. *** Se manca il vettore originale, [recupera il logo raster con PerfectVector](https://perfectvector.com/it/vectorize-logo). Esamina la composizione completa rispetto al riferimento, poi applica la regola di rispetto approvata e verifica le dimensioni visibili del logo nel posizionamento finale. ## Explore - [Read the HTML article](https://perfectvector.com/it/blog/logo-clear-space-calculation) - [Centra otticamente il logo e conserva intatto il master](https://perfectvector.com/it/blog/logo-optical-centering.md) - [Etichette tessute: mantieni il logo chiaro in piccolo](https://perfectvector.com/it/blog/woven-label-logo-artwork.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)