> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Logo-Schutzraum: Abstand berechnen und erhalten > Wähle eine Schutzraumeinheit für dein Logo, berechne die vollständige Ausschlusszone und erhalte sie in einer SVG, ohne Grafikgröße und Zeichenfläche mit Rand zu verwechseln. Source: https://perfectvector.com/de/blog/logo-clear-space-calculation Language: de Author: Irene Kim Published: 2026-10-12T08:00:00+09:00 Berechne den Logo-Schutzraum anhand einer festgelegten Einheit in der freigegebenen Grafik und miss dann von den sichtbaren Grenzen des vollständigen Logos nach außen. Beträgt die gewählte Einheit 10 und das Logo 150 mal 40, benötigt eine Ausschlusszone von einer Einheit auf jeder Seite insgesamt 170 mal 60. Das Logo selbst bleibt 150 mal 40 groß. Schutzraum ist die Fläche um ein Logo, die andere Inhalte freilassen müssen. Ein Dateirand kann diesen Platz in ein Layout übertragen, doch eine leere Zeichenfläche ist nur eine Liefermethode. Die Markenrichtlinie definiert die Regel. Wenn du Dateien einer bestehenden Marke vorbereitest, verwende zuerst deren freigegebene Regel, bevor du eine neue erstellst. Diese Anleitung verfolgt eine eigene Logoanordnung durch Berechnung, SVG-Export und Größenänderung. Wenn deine einzige Vorlage ein Rasterbild ist, gewinne zuerst die sichtbaren Formen. Ein Bildvektorisierer kann die freigegebene Ausschlusszone nicht erschließen. ## Wähle eine zu diesem Logo gehörende Einheit Verwende ein messbares Merkmal, das beim Skalieren des freigegebenen Logos proportional bleibt: die Höhe eines Symbols, ein bestimmtes Buchstabenmaß oder einen festgelegten Anteil der gesamten Grafik. Benenne genau, was du gemessen hast. Vermeide eine Regel wie „etwas Platz lassen“ oder ein unerklärtes, mit X markiertes Quadrat. Offizielle Markenhandbücher zeigen, warum dies eine Gestaltungsvorgabe und kein allgemeines Verhältnis ist. Die [Schutzraumanleitung der University at Buffalo](https://www.buffalo.edu/brand/identity/usage/Clear-space.html) verwendet die Höhe des ineinandergreifenden UB um ihre Hauptmarkenanordnung und gibt für Liniengrafiken separate Hinweise. [Vevos Anleitung](https://brand.vevo.com/logo/clearspace/) unterscheidet Zeichen über und unter 30 px Höhe und nennt kontextabhängige Web- und Tablet-Abstände. Folge der Regel für das tatsächliche Zeichen und seinen Einsatz. In unserem eigenen Beispiel ist das runde Symbol 40 Einheiten hoch. Wir wählen X als ein Viertel dieser Höhe: X = 10. Der erforderliche Abstand beträgt auf jeder Seite ein X. Das ist eine für dieses Beispiel erfundene Regel, keine Empfehlung, dass jede Marke 25% ihrer Symbolhöhe verwenden sollte. Formuliere die Regel klar: „Für diese horizontale Logoanordnung entspricht X einem Viertel des Kreisdurchmessers. Halte außerhalb jeder Kante der vollständigen Anordnung mindestens ein X frei.“ Der Text hält die Vorgabe fest, auch wenn eine Anwendung die leere Zeichenfläche beschneidet. ## Miss die vollständige Anordnung und ergänze den Abstand Eine Logoanordnung ist die freigegebene Kombination aus Symbol und Wortmarke. Miss diese vollständige Anordnung. Würdest du nur die Kreisgrenzen verwenden, lägen die Buchstaben außerhalb deiner Schutzraumberechnung. Unser Kreis und die drei gezeichneten Buchstaben reichen von x = 0 bis 150 und y = 0 bis 40. Dieses Beispiel enthält keine Konturen, Schatten oder verborgenen Objekte. Das Schutzrechteck reicht deshalb von x = -10 bis 160 und y = -10 bis 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 ``` Wenn deine Grafik sichtbare Konturen oder Effekte besitzt, beziehe deren sichtbare Ausdehnung in die Prüfung ein. Eine reine Geometriemessung kann vom gemalten Ergebnis abweichen. Die [Anleitung zu SVG-Begrenzungsrahmen](https://perfectvector.com/de/blog/svg-bounding-box) erklärt diesen Messunterschied. Hier verwenden wir bewusst einfache gefüllte Geometrie. ![Dieselbe eigene Anordnung aus Kreis und Wortmarke mit engen Grenzen, einer Schutzraumhilfe von zehn Einheiten und einer SVG mit Rand in zwei Größen](https://perfectvector.com/blog/logo-clear-space-calculation/clear-space-bounds.webp) *Die gefüllte Grafik ist 150 mal 40 Einheiten groß. Ein gewählter Rand von 10 Einheiten ergibt eine Zeichenfläche von 170 mal 60. Die Hilfslinie dient der Dokumentation und fehlt in der gelieferten Grafik.* ## Übertrage die Regel in eine SVG mit Rand Die [SVG-viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/viewBox) bildet ein internes Koordinatenrechteck auf den angezeigten Ansichtsbereich ab. In diesem Beispiel schließt `viewBox="-10 -10 170 60"` den berechneten Abstand ein, ohne die Grafik zu verschieben oder zu vergrößern. Speichere dieses vollständige Beispiel als `logo-padded.svg`. Die Buchstaben der Wortmarke sind gezeichnete Formen, sodass keine Schriftabhängigkeit besteht. Der Entwurf aus Kreis und Buchstaben ist eine eigene Beispielgrafik, keine freigegebene Datei einer anderen Marke. ```xml ``` Für eine eng beschnittene Begleitdatei verwende `width="150"`, `height="40"` und `viewBox="0 0 150 40"` mit demselben Kreis und denselben Pfaden. Benenne die Dateien so, dass der Empfänger erkennt, welche den Abstand enthält. Halte Maßhilfen im Markendokument oder einer separaten Prüfebene und nicht in der Grafik, die platziert werden soll. > **Eine leere Zeichenfläche braucht weiterhin eine Platzierungsprüfung** > > Eine SVG mit Rand reserviert Raum innerhalb ihres Ansichtsbereichs. Sie kann nicht verhindern, dass ein anderes Layoutobjekt diesen Ansichtsbereich überlappt, oder garantieren, dass ein Importer seine Grenzen erhält. Prüfe die tatsächliche Platzierung anhand der schriftlichen Regel. ## Ändere die Dateigröße, ohne das beabsichtigte Logo zu verkleinern Entscheide, ob eine Breite die sichtbare Grafik oder die gesamte Datei mit Rand meint. Bei 170 px Dateibreite ist die Beispielgrafik 150 px breit und der Abstand 10 px. Bei 340 px Dateibreite ist die Grafik 300 px breit und der Abstand 20 px. Die proportionale Regel bleibt bei gleichmäßiger Skalierung erhalten. Verlangt der Auftrag ein 300 px breites sichtbares Logo, setze diese Datei mit Rand auf 340 px Breite. Würdest du die gesamte Datei auf 300 px setzen, wäre die sichtbare Grafik nur etwa 264.7 px breit, denn 300 × 150 / 170 ergibt ungefähr 264.7. | Deine Angabe | Breite des Ansichtsbereichs mit Rand | Sichtbare Grafikbreite | Seitlicher Abstand | | ------------------------------- | ------------------------------------ | ---------------------- | ------------------ | | Ausgangsbeispiel | 170 px | 150 px | 10 px | | Beispiel verdoppeln | 340 px | 300 px | 20 px | | Gesamte Datei auf 300 px setzen | 300 px | Etwa 264.7 px | Etwa 17.6 px | Methodenhinweis: Wir renderten die vollständigen eng beschnittenen SVGs und SVGs mit Rand in Chromium. Die geometrischen Grafikgrenzen waren 150 mal 40 Einheiten. Bei 170 px und 340 px Gesamtbreite mit Rand betrugen die gemessenen horizontalen Grafikbreiten 150 px und 300 px mit 10 px und 20 px Abstand. Das verifiziert das selbst erstellte Browserbeispiel, nicht das Importverhalten jedes Editors. Wenn das Logo zu klein wirkt, prüfe die Zeichenfläche der Datei, bevor du beliebige Objekte vergrößerst. Verschwindet Raum nach dem Import, prüfe die importierten Grenzen im Zielprogramm und stelle den Abstand nach der schriftlichen X-Regel wieder her. Bei einem breiten Logo in einem anderen Rahmen erklärt [SVG-Anpassung mit erhaltenem Seitenverhältnis](https://perfectvector.com/de/blog/svg-preserveaspectratio) zusätzlichen Leerraum durch die Platzierung. ## Wo PerfectVector bei der Logoübergabe hilft PerfectVector kann Vektorformen gewinnen, wenn eine Marke nur eine Rasterkopie ihres Logos besitzt. Vergleiche nach dem Gewinnen dieser Formen das vollständige Zeichen mit der freigegebenen Referenz, entferne unbeabsichtigte Hintergrundteile und wende die dokumentierte Schutzraumregel der Marke separat an. Der [Ablauf zur Logovektorisierung](https://perfectvector.com/de/vectorize-logo) behandelt die Formwiedergewinnung. Frage zuerst nach dem ursprünglichen Vektormaster und den Markenrichtlinien. Diese Dateien erhalten die beabsichtigte Grafik und Abstandsentscheidungen besser als eine neue Nachzeichnung. Der leere Rand einer JPG kann zufälliger Exportrand sein; er belegt keine Markenvorgabe. Die [Anleitung zu Logodateiformaten](https://perfectvector.com/de/blog/logo-file-formats) hilft bei der Auswahl der Lieferdateien, und die [Anleitung zur Logovektorisierung](https://perfectvector.com/de/blog/how-to-vectorize-a-logo) behandelt Vorbereitung und Prüfung der Vorlage. Prüfe abschließend die vollständige Grafik, die schriftliche X-Definition, die Maße der Datei mit Rand und das tatsächliche umgebende Layout. Behalte neben der vorgesehenen Platzierungsdatei auch einen eng beschnittenen Master. Weitere Übergabeprüfungen findest du in der [Blog-Ablaufbibliothek](https://perfectvector.com/de/blog). ## Häufige Fragen ### Beträgt der Logo-Schutzraum immer ein Viertel der Logohöhe? Nein. Ein Viertel der Kreishöhe ist die für dieses eigene Beispiel gewählte Regel. Bestehende Marken können andere Einheiten, Verhältnisse und Ausnahmen für bestimmte Anwendungen definieren. ### Sollte ich ein weißes Rechteck hinzufügen, um den Schutzraum zu erhalten? Du kannst mit der SVG-viewBox Leerraum reservieren, ohne ein gemaltes Rechteck hinzuzufügen. Ein weißes Rechteck verändert die Grafik auf farbigem Hintergrund. Teste die transparente Datei mit Rand an ihrer vorgesehenen Position. ### Setzt eine SVG mit Rand die Markenrichtlinie automatisch durch? Nein. Sie enthält Leerraum innerhalb ihres Ansichtsbereichs, doch ein Importer kann Grenzen beschneiden und Layoutobjekte können sie überlappen. Die schriftliche Regel und eine abschließende Platzierungsprüfung bleiben notwendig. ## Quellen 1. [University at Buffalo — Schutzraum](https://www.buffalo.edu/brand/identity/usage/Clear-space.html) — offizielles Beispiel einer zeichenbasierten Einheit und anwendungsspezifischer Ausnahmen. 2. [Vevo — Logo-Schutzraum](https://brand.vevo.com/logo/clearspace/) — zeigt, wie Schutzraumvorgaben sich mit Zeichengröße und digitalem Kontext ändern können. 3. [MDN — SVG viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/viewBox) — erklärt das Koordinatenrechteck, das im Beispiel den leeren Abstand erhält. *** Wenn der ursprüngliche Vektor fehlt, [gewinne dein Rasterlogo mit PerfectVector zurück](https://perfectvector.com/de/vectorize-logo). Prüfe die vollständige Logoanordnung anhand der Referenz, wende anschließend die freigegebene Schutzraumregel an und kontrolliere die sichtbare Logogröße an der endgültigen Position. ## Explore - [Read the HTML article](https://perfectvector.com/de/blog/logo-clear-space-calculation) - [Ein Logo optisch zentrieren und den Master erhalten](https://perfectvector.com/de/blog/logo-optical-centering.md) - [Webetiketten: Ein Logo in kleiner Größe klar erhalten](https://perfectvector.com/de/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)