SVG
Das SVG-Element

viewBox

Das viewBox-Attribut definiert das Koordinatensystem für ein <svg> -Element. Auf diese Weise können Sie die Größe und den relativen Anteil einer SVG-Grafik leicht ändern, ohne die Position und Abmessungen jedes einzelnen gezeichneten Elements anpassen zu müssen.

<!-- stretches a small icon to 60px square -->
<svg viewBox="0 0 16 16" height="60px" width="60px">
    <path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>

Dieser Code sieht folgendermaßen aus:

Ohne die viewBox sieht es so aus:

erhalteAspectRatio

preserveAspectRatio ist ein Attribut, das angibt, ob das Bild einheitlich skaliert werden soll. Dieses Attribut funktioniert nur, wenn das Element <svg> auch eine viewBox .

Der Standardwert ist xMidYMid , der das Seitenverhältnis beibehält und den Pfad innerhalb des SVG-Containers zentriert:

<!-- when not included `preserveAspectRatio` defaults to `xMidYMid` -->
<svg viewBox="0 0 16 16" height="60" width="120">
    <path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>

Wenn preserveAspectRatio auf none , wird das Symbol so angezeigt, dass es in das Feld passt:

<svg viewBox="0 0 16 16" height="60" width="120" preserveAspectRatio="none">
    <path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>

Es gibt viele andere Werte für preserveAspectRatio , aber diese beiden sind bei weitem die gebräuchlichsten.

preserveAspectRatio - Attribute treffen und in Scheiben schneiden

Das preserveAspectRatio Attribut hat einen optionalen Parameter: meet | slice Das Standardverhalten ist " meet wodurch der Inhalt sowohl in der x- als auch in der y-Dimension gedehnt wird, bis entweder die Breite oder Höhe der viewBox gefüllt wird. Die Alternative - slice behält das Seitenverhältnis des Inhalts bei, vergrößert jedoch die Grafik, bis sowohl die Breite als auch die Höhe der Viewbox gefüllt ist (wobei der Inhalt abgeschnitten wird, der die ViewBox überläuft).

Dies ist das Beispiel mit slice

<svg viewBox="0 0 16 16" height="60px" width="120px" preserveAspectRatio="xMinYMin slice">
<path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />

was macht als:

und dasselbe Beispiel mit meet

    <svg viewBox="0 0 16 16" height="60px" width="120px" preserveAspectRatio="xMinYMin meet">
    <path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>

was macht als: