> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# Responsive SVG-Logos: Bei kleinen Größen Variante wechseln

> Wähle mit picture-Medienbedingungen ein detailliertes oder kompaktes SVG-Logo. Prüfe die gewählte Quelle bei drei Viewport-Breiten und trenne Motivwahl von Skalierung.

Source: https://perfectvector.com/de/blog/responsive-svg-logo-lockup

Language: de
Author: Irene Kim
Published: 2026-10-06T08:00:00+09:00
Updated: 2026-10-06T08:00:00+09:00

Ein responsives SVG-Logo kann zwischen einer detaillierten Logokombination und einem kompakten Zeichen wechseln, statt alle Teile gemeinsam zu verkleinern. Erstelle zuerst die beiden Kompositionen. Verwende dann eine `<picture>`-Quelle mit Medienbedingung, um zwischen ihnen zu wählen. Prüfe das `currentSrc` des Bilds bei den Breiten, die du unterstützen möchtest.

Dieses Beispiel verwendet eine selbst erstellte Logokombination der fiktiven Marke Cove: eine hohle Raute mit gezeichneten Buchstaben und eine reine Zeichenvariante. Ihr Wechsel hängt von der Viewport-Breite des Dokuments ab. Ein schmaler Container innerhalb einer breiten Seite löst denselben Wechsel nicht aus.

## Skalierung und Motivwahl lösen unterschiedliche Aufgaben

Gewöhnliche Skalierung erhält die gesamte Komposition. Symbol, Schrift und ihre Abstände werden gemeinsam kleiner. Die Motivwahl entscheidet sich für eine andere, zuvor erstellte Komposition. Schrift zu entfernen oder ein Zeichen neu anzuordnen ist eine Gestaltungsentscheidung. Eine SVG-Datei trifft sie nicht automatisch, nur weil sie skalierbar ist.

Die [HTML-picture-Referenz](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture) beschreibt alternative Quellen, die über Medienbedingungen und den `img`-Rückfall ausgewählt werden. Hier bieten wir bei 599 Pixeln oder schmaler ein kompaktes SVG an, andernfalls ein detailliertes. Der Bildrahmen bleibt gleich groß, während sein Inhalt wechselt.

**Logokombination skalieren oder andere Komposition wählen**

![Schematischer Vergleich einer detaillierten Logokombination mit hohler Raute, ihrer kleineren skalierten Kopie und eines kompakten Zeichens ohne Schrift](https://perfectvector.com/blog/responsive-svg-logo-lockup/scale-and-switch.webp)

*Illustration: Eine skalierte Logokombination behält ihre Details, während eine eigens erstellte kompakte Version Schrift weglassen kann. Tatsächliche Quellwahl und Elementgrenzen unten stammen aus der unabhängigen Cove-Vorlage, nicht aus diesem erzeugten Diagramm.*

## Erstelle zwei bearbeitbare Dateien

Speichere diese selbst erstellte detaillierte Logokombination als `detailed.svg`. Die Buchstaben sind gezeichnete Pfade, deshalb benötigt dieses kleine Beispiel keine Schriftdatei:

```svg
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="96" viewBox="0 0 300 96">
  <g fill="#176b5b" fill-rule="evenodd">
    <path d="M48 8 L88 48 L48 88 L8 48 Z M48 30 L66 48 L48 66 L30 48 Z"/>
    <path d="M130 24 H160 V32 H138 V64 H160 V72 H130 Z"/>
    <path d="M168 24 H198 V72 H168 Z M176 32 V64 H190 V32 Z"/>
    <path d="M206 24 H214 L225 60 L236 24 H244 L229 72 H221 Z"/>
    <path d="M252 24 H282 V32 H260 V43 H278 V51 H260 V64 H282 V72 H252 Z"/>
  </g>
</svg>
```

Speichere die kompakte Version als `compact.svg`:

```svg
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
  <path d="M48 8 L88 48 L48 88 L8 48 Z M48 30 L66 48 L48 66 L30 48 Z" fill="#176b5b" fill-rule="evenodd"/>
</svg>
```

Der Rautenpfad ist in beiden Dateien identisch. Die detaillierte Datei enthält fünf Pfade, die kompakte einen. Keine enthält ein Bildelement oder aktiven Text. Die beiden `viewBox`-Breiten unterscheiden sich aufgrund der unterschiedlichen Kompositionen, nicht weil eine Datei gleichmäßig skaliert wurde.

Behalte beide Quellversionen. Entscheide für deine eigene Marke, welche Merkmale in der kompakten Komposition erkennbar bleiben müssen. Prüfe dann Öffnung, Ränder und Proportionen. Unser [Leitfaden zu Logo-Dateiformaten](https://perfectvector.com/de/blog/logo-file-formats) behandelt das umfassendere Quell- und Ausgabepaket. Dieses Beispiel ergänzt eine Browserwahl zwischen zwei freigegebenen Versionen.

## Führe die vollständige picture-Vorlage aus

Speichere dies als `starter.html` neben den beiden SVGs und stelle den Ordner lokal bereit. Ist Python installiert, ist `python3 -m http.server 8766` eine Möglichkeit. Öffne dann `http://localhost:8766/starter.html` im Browser.

```html
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cove logo source selection</title>
<style>
  body { margin: 24px; font: 16px system-ui; background: #f6f2e8; }
  .slot { width: 200px; border: 1px dashed #b9c8be; margin-bottom: 24px; }
  .narrow { width: 120px; }
  .slot img { display: block; width: 100%; height: 80px; object-fit: contain; }
  pre { white-space: pre-wrap; font-size: 12px; }
</style>
<h1>Cove: choose the composition</h1>
<p>Art-directed image, constant 200-pixel container:</p>
<div class="slot">
  <picture>
    <source media="(max-width: 599px)" srcset="compact.svg" type="image/svg+xml">
    <img id="directed" src="detailed.svg" width="300" height="96" alt="Cove">
  </picture>
</div>
<p>Ordinary scaling, same container:</p>
<div class="slot">
  <img id="scaled" src="detailed.svg" width="300" height="96" alt="Cove">
</div>
<p>Art direction in a narrower 120-pixel container:</p>
<div class="slot narrow">
  <picture>
    <source media="(max-width: 599px)" srcset="compact.svg" type="image/svg+xml">
    <img id="narrow" src="detailed.svg" width="300" height="96" alt="Cove">
  </picture>
</div>
<pre id="report"></pre>
<script>
  const images = [...document.images];
  function report() {
    document.getElementById('report').textContent = JSON.stringify({
      viewportWidth: innerWidth,
      mediaMatches: matchMedia('(max-width: 599px)').matches,
      images: images.map(image => ({ id: image.id, currentSrc: image.currentSrc,
        complete: image.complete, naturalWidth: image.naturalWidth,
        naturalHeight: image.naturalHeight,
        containerWidth: image.parentElement.closest('.slot').clientWidth,
        elementWidth: image.getBoundingClientRect().width,
        elementHeight: image.getBoundingClientRect().height, alt: image.alt })),
    }, null, 2);
  }
  images.forEach(image => image.addEventListener('load', report));
  addEventListener('resize', report);
  report();
</script>
</html>
```

Die Medienbedingung lautet `(max-width: 599px)`. Das [CSS-Medienmerkmal width](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/width) wertet die Viewport-Breite aus. Bei 600 Pixeln ist die Bedingung falsch, daher wählt diese Vorlage die detaillierte `img`-Quelle. Die Zahl ist ein Beispiel-Breakpoint für dieses Layout, keine Regel der Markengestaltung.

Das CSS reserviert eine Bildhöhe von 80 Pixeln und verwendet [`object-fit: contain`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit), um das gewählte Bild in seinen Elementrahmen einzupassen. So bleiben beide Kompositionen sichtbar, ohne auf dasselbe Seitenverhältnis verzerrt zu werden. Wende den Einpassungsstil auf das `img` an, das die gewählte Quelle darstellt.

`alt="Cove"` benennt in beiden Fällen die fiktive Marke. Gib deinem eigenen Bild eine passende Textalternative, wie die [HTML-img-Referenz](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img) beschreibt. Ein kompaktes Zeichen sollte seinen zugänglichen Namen nicht verlieren, wenn die sichtbare Schrift verschwindet.

## Was der Browser bei drei Breiten auswählte

Wir öffneten genau diese Vorlage in Chrome bei Dokument-Viewport-Breiten von 480, 600 und 960 Pixeln. Bei jeder Breite wurden alle drei Bilder vollständig geladen. Der Hauptcontainer blieb 200 Pixel breit und der schmalere Kontrollcontainer 120 Pixel.

| Dokument-Viewport | Motivwahl, 200-Pixel-Container | Gewöhnliche Skalierung, 200-Pixel-Container | Motivwahl, 120-Pixel-Container |
| ----------------- | ------------------------------ | ------------------------------------------- | ------------------------------ |
| 480 Pixel         | compact.svg                    | detailed.svg                                | compact.svg                    |
| 600 Pixel         | detailed.svg                   | detailed.svg                                | detailed.svg                   |
| 960 Pixel         | detailed.svg                   | detailed.svg                                | detailed.svg                   |

Wir prüften die gewählte URL über [`HTMLImageElement.currentSrc`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/currentSrc) zusammen mit den geladenen Bildabmessungen. Eine gewählte URL allein ist kein Test auf erfolgreiches Laden. Prüfe auch `complete` und die natürlichen Abmessungen. Unsere kompakte Quelle meldete 96×96, die detaillierte 300×96.

Das Hauptbildelement blieb bei allen drei Breiten 200×80 groß. Der schmale Kontrollfall blieb 120×80. Bei 480 Pixeln war das kompakte Zeichen in jedem Rahmen zentriert, während der gewöhnlich skalierte Kontrollfall weiterhin die ganze Logokombination zeigte. Bei 600 und 960 Pixeln verkleinerte ein auf 120 Pixel verengter Container die detaillierte Logokombination. Er wählte nicht die kompakte Datei.

Dieser Unterschied ist in einer Seitenleiste oder wiederverwendbaren Komponente wichtig. Diese HTML-Medienbedingung reagiert auf den Viewport, nicht auf die gemessene Breite ihres Containers. Muss deine Logowahl von der verfügbaren Komponentenbreite abhängen, plane und teste den separaten Mechanismus, statt anzunehmen, dieser Breakpoint beobachte die Komponente.

Diese Ergebnisse gelten für die ursprünglichen Dateien, einen Browser und drei ausdrücklich gewählte Viewport-Breiten. Sie belegen nicht jeden Browser, jede Einbettungsmethode oder jedes Exportziel. Die Vorlage testet auch keine Medienregeln innerhalb eines externen SVGs.

## Prüfe Rahmen und Grafik getrennt

Ein Elementrahmen ist nicht dasselbe wie die bemalten Logogrenzen. Die Browser-Geometriegrenzen der detaillierten Quelle waren x8, y8, Breite274, Höhe80 innerhalb einer viewBox von 300×96. Die kompakte Quelle hatte x8, y8, Breite80, Höhe80 innerhalb einer viewBox von 96×96. Diese Ränder bleiben Teil der Einpassungsberechnung der Quelle.

Wirkt das gewählte Logo zu klein, prüfe Quellleerraum, bevor du seine Elementabmessungen vergrößerst. Wirkt es verzerrt, prüfe Bildrahmen und Einpassungsregel. Der [preserveAspectRatio-Leitfaden](https://perfectvector.com/de/blog/svg-preserveaspectratio) erklärt eine verwandte SVG-Viewport-Berechnung. Diese Abbildung zu ändern erstellt nicht von selbst eine zweite Logokombination.

Diese Vorlage verwendet externe SVG-Bilder über `img`. Nutze den [Leitfaden zu Inline-SVG und img](https://perfectvector.com/de/blog/inline-svg-vs-img), wenn du eine andere Einbettung wählen musst. Eine heruntergeladene oder gedruckte SVG-Datei enthält diesen HTML-Rahmen zur Quellwahl nicht. Liefere die tatsächliche Komposition, die der Empfänger braucht, und behalte die bearbeitbaren Versionen.

## Bereite Versionen aus einem Rasterlogo vor

Liegt deine einzige Markengrafik als PNG oder JPG vor und brauchst du bearbeitbare Geometrie, [bereite mit PerfectVector ein SVG-Logo vor](https://perfectvector.com/de/vectorize-logo). Prüfe Silhouette und innere Öffnungen und behalte diese saubere Masterdatei. Erstelle anschließend die detaillierte und kompakte Komposition und teste ihre Auswahl auf deiner Seite. Vektorisierung bereitet die Grafik vor. Sie entscheidet nicht, welche Schrift du entfernst, und wählt nicht deinen Breakpoint. Vorhandene saubere SVG-Grafik kann direkt zur Kompositionsarbeit gehen. Der [Vektorisierungsleitfaden](https://perfectvector.com/de/blog/what-is-image-vectorization) erklärt, wann Konvertierung hilft.

## Häufige Fragen

**Vereinfacht SVG ein Logo auf einem kleinen Bildschirm automatisch?**
Dieses Beispiel wählt zwischen zwei erstellten SVG-Dateien. Das Skalieren einer Datei erhält ihre ursprüngliche Komposition. Vereinfachung benötigt eine separate Gestaltungsentscheidung.

**Warum zeigt ein schmaler Container weiterhin das detaillierte Logo?**
Die Breitenbedingung der picture-Quelle prüft den Dokument-Viewport. In den getesteten Viewports mit 600 und 960 Pixeln behielt selbst der 120-Pixel-Container die detaillierte Quelle.

**Wie bestätige ich, welche Datei verwendet wurde?**
Prüfe currentSrc, Ladestatus und natürliche Bildabmessungen. Die Vorlage gibt sie zusammen mit Element- und Containerabmessungen aus.

**Ist der responsive Wechsel enthalten, wenn ich ein SVG herunterlade?**
Die Quellwahlregel liegt im HTML-Rahmen. Behalte und liefere das detaillierte oder kompakte SVG, das der Empfänger für seine tatsächliche Verwendung braucht.

## Quellen

1. [HTML-picture-Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture) – Alternative Quellen, Medienbedingungen und Rückfallverhalten.
2. [CSS-Medienmerkmal width](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/width) – Die Dokument-Viewport-Bedingung der Vorlage.
3. [Image-Eigenschaft currentSrc](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/currentSrc) – Prüfung der gewählten Quell-URL.
4. [CSS object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit) – Einpassung jeder gewählten Komposition in den Bildrahmen.
5. [HTML-img-Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img) – Bilddarstellung und Textalternativen.

***

Für dein eigenes PNG- oder JPG-Logo [bereite eine bearbeitbare SVG-Masterdatei vor](https://perfectvector.com/de/vectorize-logo), prüfe Umriss und Öffnungen und behalte sie neben den freigegebenen Logokombinationen. Prüfe dann gewählte Quelle und sichtbare Komposition bei den Viewport-Breiten, die deine Seite verwenden wird.

## Explore

- [Read the HTML article](https://perfectvector.com/de/blog/responsive-svg-logo-lockup)
- [Logo-Schutzraum: Abstand berechnen und erhalten](https://perfectvector.com/de/blog/logo-clear-space-calculation.md)
- [So vektorisierst du ein Logo: Auto-Trace vs. Nachzeichnen (und woran du einen falschen Vektor erkennst)](https://perfectvector.com/de/blog/how-to-vectorize-a-logo.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)