SVG-preserveAspectRatio: Grafik ohne Strecken einpassen

Verwende preserveAspectRatio="xMidYMid meet", wenn die gesamte SVG-viewBox ohne Strecken in ihren Anzeigebereich passen soll. Verwende slice, wenn dieser Bereich vollständig bedeckt sein muss und Inhalte über seine Kanten hinausreichen dürfen. Verwende none nur, wenn unterschiedliche horizontale und vertikale Skalierung beabsichtigt ist.

Der wichtige Unterschied besteht zwischen dem durch viewBox definierten Koordinatenrechteck der Grafik und dem Darstellungsbereich, in dem sie erscheint. Das Einpassen verändert die Abbildung des einen auf den anderen. Es zeichnet kein Logo neu, entfernt keine leere Quellzeichenfläche und löscht abgeschnittene Pfade nicht dauerhaft.

Zuerst das Einpassungsverhalten wählen

MDNs preserveAspectRatio-Referenz dokumentiert diese Werte und den Standard xMidYMid meet. Bei einem svg-Element benötigt diese Abbildung eine viewBox. Das Attribut unterscheidet Groß- und Kleinschreibung: Behalte das große A und R bei.

Beginne bei einem Logo mit meet. Einen Buchstaben zu verlieren oder einen Kreis in ein Oval zu verwandeln ist meist schlechter, als etwas Leerraum zu lassen. Bei einem dekorativen Hintergrund kann ein bewusster Zuschnitt akzeptabel sein. Entscheide das, bevor du die Ausrichtung wählst.

Ein Emblem in zwei Darstellungsformen testen

Dieses eigene Beispiel verwendet einen Kreis, ein Rechteck und ein außermittiges Dreieck. Der Kreis macht Strecken sichtbar; die ungleichen Teile machen Ausrichtungsänderungen leichter erkennbar als bei einem symmetrischen Abzeichen.

Füge dies in eine HTML-Datei ein und öffne sie in einem Browser:

<svg width="300" height="100" viewBox="0 0 200 100"
     preserveAspectRatio="xMidYMid meet"
     xmlns="http://www.w3.org/2000/svg"
     role="img" aria-label="Circle, rectangle, and triangle emblem"
     style="background:#f4ead4; overflow:hidden">
  <circle cx="40" cy="50" r="25" fill="#147d78" />
  <path d="M85 20 H130 V80 H85Z" fill="#e5a340" />
  <path d="M145 70 L170 25 L190 70Z" fill="#183549" />
</svg>

Die viewBox ist 200 Einheiten breit und 100 hoch. Ihr Seitenverhältnis ist 2:1. Der erste Darstellungsbereich ist 300 mal 100 CSS-Pixel groß, also 3:1. Ändere nur das Attribut, um xMidYMid slice und none zu vergleichen. Ändere anschließend den Darstellungsbereich zu width="100" height="300" und wiederhole den Test.

Wir haben diese Geometrie in Chrome mit einer kleinen selektorbasierten Testoberfläche gerendert. Ihre Anzeige verwendete die aktuelle Transformationsmatrix der Grafikgruppe. Die daraus resultierenden Skalierungen und Verschiebungen entsprachen diesen Werten; der slice-Versatz von ungefähr −25 Pixeln ist hier gerundet.

Im hohen Darstellungsbereich zeigte meet alle drei kleinen Formen. Zentriertes slice zeigte nur einen Teil der vergrößerten Komposition, dominiert vom goldenen Rechteck. none machte den Kreis schmal und hoch. Das ist eine Prüfung dieses Testbeispiels in Chrome, kein Versprechen über das Importverhalten jedes Grafikeditors.

Die Skalierungsregel ist für dieses Beispiel mit Nullursprung einfach. Teile die Breite des Darstellungsbereichs durch die viewBox-Breite und dann seine Höhe durch die viewBox-Höhe. meet verwendet das kleinere Verhältnis für beide Achsen; slice das größere. none hält beide Verhältnisse getrennt. Die SVG-Spezifikation der Koordinatensysteme definiert die Abbildung einschließlich Ausrichtung und viewBox-Ursprüngen ungleich null.

Mit der Ausrichtung bestimmen, wo der freie Platz liegt

Das erste Schlüsselwort steuert die Ausrichtung. xMin, xMid und xMax richten die linke Kante, die horizontale Mitte oder die rechte Kante der viewBox aus. YMin, YMid und YMax tun vertikal das Entsprechende. Sie beziehen sich auf das viewBox-Rechteck, das Leerraum um die tatsächlichen Pfade enthalten kann.

Für den hohen Testbereich gilt:

• xMinYMin meet platziert die eingepasste viewBox oben, statt sie vertikal zu zentrieren.
• xMinYMin slice richtet die linke Seite der viewBox an der linken Seite des Darstellungsbereichs aus. Die vergrößerte rechte Seite reicht darüber hinaus.
• xMidYMid slice verteilt den horizontalen Überlauf auf beide Seiten.

Wir haben die Testoberfläche von zentriert auf xMinYMin umgestellt. Sowohl meet- als auch slice-Verschiebung wurden null, während ihre Skalierungsfaktoren bei 0.5 beziehungsweise 3 blieben. Die Ausrichtung bewegte die Komposition; sie änderte nicht die Einpassungsskalierung.

Eine Ausrichtungsänderung ist nur auf einer Achse mit freiem Platz oder Überlauf sichtbar. Im breiten meet-Fall füllt die viewBox bereits die Höhe. Eine Änderung von YMid zu YMin hat daher keinen vertikalen Spielraum, in dem sie sie bewegen könnte.

Die Beschneidung ausdrücklich wählen

slice wählt eine Skalierung. Die Beschneidung bestimmt, ob du die Teile sehen kannst, die über den Darstellungsbereich hinausreichen. Das Beispiel setzt overflow:hidden ausdrücklich, damit der Zuschnitt vorhersehbar ist.

In der hohen Testoberfläche machte das Umschalten auf sichtbaren Überlauf den vergrößerten Kreis und das Dreieck außerhalb des slice-Bereichs sichtbar. Die Geometrie war nicht verschwunden. MDNs SVG-overflow-Referenz erklärt die Beziehung zwischen Überlauf und Beschneidung des Darstellungsbereichs einschließlich unterschiedlicher Standardstile in SVG-Kontexten.

Behandle slice nicht als Operation zum Kürzen von Pfaden. Wenn eine Übergabedatei nur die behaltene Geometrie enthalten darf, führe eine tatsächliche Bearbeitungsoperation durch und prüfe sie. Für ein eigenes nicht rechteckiges Anzeigefenster kann stattdessen ein clipPath das passende Werkzeug sein.

Ebenso garantiert meet, dass die viewBox hineinpasst; es kann nicht garantieren, dass alle gezeichneten Inhalte hineinpassen. Eine Kontur, ein Filter oder ein Pfad außerhalb dieses Quellrechtecks kann weiterhin darüber hinausreichen. Prüfe die sichtbaren Kanten, statt dem Attribut allein zu vertrauen.

Leerraum in der Quelle beheben, bevor du gegen die Ausrichtung arbeitest

Angenommen, ein kleines Zeichen belegt nur die Mitte einer sehr großen viewBox. meet passt dieses gesamte Koordinatenrechteck ein, einschließlich seiner leeren Ränder. Das Ergebnis kann zu klein aussehen, obwohl die Skalierung korrekt ist.

Prüfe die exportierte Zeichenfläche in deinem Editor. Wenn du die viewBox für eine engere Komposition änderst, berücksichtige die vorgesehenen Konturen und Effekte und prüfe jede Platzierung erneut. Entferne nicht automatisch jeden Rand: Die Quelle kann bewussten Schutzraum um ein Markenzeichen enthalten.

Probleme mit physischen Größen sind separat. Ein SVG, das mit der falschen Millimetergröße importiert wird, benötigt den Ablauf zur SVG-Größe; die Einpassungsausrichtung zu ändern behebt seine Einheitenannahmen wahrscheinlich nicht.

Inline-SVG und Bildeinpassung getrennt halten

Ändere bei Inline-SVG das Attribut am betreffenden svg-Element. CSS kann das Feld dieses Elements dimensionieren, während preserveAspectRatio seine viewBox in dieses Feld abbildet.

Bei einem externen SVG in einem HTML-Bildelement steuert CSS die Einpassung des ersetzten Bildinhalts:

<img class="brand-mark" src="emblem.svg" alt="Brand emblem">
<style>
  .brand-mark {
    width: 300px;
    height: 100px;
    object-fit: contain;
    object-position: center;
  }
</style>

MDNs object-fit-Dokumentation beschreibt, wie ersetzter Inhalt in sein CSS-Feld passt. Das ist eine andere Ebene als die interne Abbildung des SVG-Dokuments zu bearbeiten. Auch object-fit: contain kann leere Zeichenfläche in der Quelle nicht entfernen. Lies Inline-SVG gegenüber einem Bildelement, wenn du über das Einbettungsmodell entscheidest.

Es gibt außerdem ein SVG-Element image, ausgeschrieben statt des HTML-Elements img. Sein preserveAspectRatio steuert, wie das referenzierte Bild in das für dieses Element festgelegte Rechteck passt. Es ist die Ausnahme von der allgemeinen Anforderung, am selben Element eine viewBox anzugeben, wie die MDN-Attributreferenz erklärt. Diese drei Fälle getrennt zu halten vermeidet den Versuch, ein HTML-Bild durch ein ausschließlich für SVG bestimmtes Attribut zu reparieren.

Quellproportionen vor der Platzierung erhalten

Wenn du nur ein PNG oder JPG deines eigenen Zeichens hast und bearbeitbare Vektorgeometrie benötigst, kann PerfectVector eine SVG-Quelle rekonstruieren, bevor du das Layout aufbaust. Prüfe zuerst Konturen, kleine Aussparungen und Zeichenflächenbegrenzungen. Das Einpassen des Ergebnisses erhält seine aktuelle Geometrie; es kann keine verzerrte Quelle reparieren oder Details neu erzeugen, die nie rekonstruiert wurden.

Ein vorhandenes sauberes SVG kann direkt zu den Einpassungsprüfungen gehen. Für das einfache Emblem oben reicht von Hand geschriebene Geometrie. Der Überblick zur Bildvektorisierung erklärt, wann das Rekonstruieren von Pfaden aus einem Rasterbild hilfreich ist.

Teste bei einem reinen Rasterzeichen deine Quelle in PerfectVector, prüfe das SVG und vergleiche anschließend eine breite und eine hohe Platzierung mit meet, bevor du einen Zuschnitt erwägst. Behalte die ursprüngliche Vektorvorlage, damit Layoutentscheidungen umkehrbar bleiben.

FAQ

Warum hat mein SVG mit meet weiterhin Leerraum? Darstellungsbereich und viewBox können unterschiedliche Seitenverhältnisse haben, wodurch nach gleichmäßiger Skalierung freier Platz bleibt. Auch die Quell-viewBox kann Ränder um die Pfade enthalten. Die Ausrichtung bewegt dieses Rechteck; sie entfernt nicht seinen inneren Leerraum.

Beschneidet slice die Grafik dauerhaft? Nein. Es verändert die Skalierung, die den Darstellungsbereich bedeckt. Überlauf und Beschneidung steuern, welche Teile sichtbar sind. Die ursprüngliche Pfadgeometrie bleibt im Dokument, sofern du sie nicht separat bearbeitest.

Warum macht none aus meinem Kreis ein Oval? Es erlaubt unterschiedliche horizontale und vertikale Skalierungsfaktoren. Wenn sich die Verhältnisse von Darstellungsbereich und viewBox unterscheiden, kann ein Kreis zur Ellipse werden. Verwende meet oder slice mit einem Ausrichtungsschlüsselwort, um gleichmäßige Skalierung beizubehalten.

Quellen

1. MDN preserveAspectRatio — Definiert Einpassungswerte, Ausrichtung, Standardwerte und die Ausnahme für SVG-image.
2. SVG-Spezifikation der Koordinatensysteme — Definiert die Berechnung von Skalierung und Verschiebung für einen Darstellungsbereich.
3. MDN SVG overflow — Erklärt, wie Überlauf die Beschneidung des Darstellungsbereichs steuert.
4. MDN object-fit — Dokumentiert das Einpassen ersetzter Bildinhalte in ein CSS-Feld.