SVG
Het SVG-element

Viewbox

Het kenmerk viewBox definieert het coördinatensysteem voor een <svg> -element. Hiermee kunt u eenvoudig de grootte en het relatieve aandeel van een SVG-afbeelding wijzigen zonder de positie en afmetingen van elk afzonderlijk getekend element aan te passen.

<!-- 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>

Die code ziet er zo uit:

Zonder de viewBox ziet het er zo uit:

behoud van beeldverhouding

preserveAspectRatio is een kenmerk dat aangeeft of de afbeelding uniform moet worden geschaald. Dit kenmerk werkt alleen als het element <svg> ook een viewBox .

De standaardwaarde is xMidYMid , die de beeldverhouding behoudt en het pad in de SVG-container centreert:

<!-- 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>

Als preserveAspectRatio is ingesteld op none , wordt het pictogram uitgerekt om in het vak te passen:

<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>

Er zijn veel andere waarden voor preserveAspectRatio , maar deze twee zijn veruit de meest voorkomende.

preserveAspectRatio - meet- en segmentattributen

Het kenmerk preserveAspectRatio heeft een optionele parameter: meet | slice . Standaard wordt meet waarvan de inhoud in zowel de x- als y dimensie rekt totdat de breedte of hoogte van de Viewbox vult. Het alternatief - slice behoudt de beeldverhouding van de inhoud, maar schaalt de afbeelding op totdat deze zowel de breedte als de hoogte van de viewbox vult (de content die de viewBox overstroomt, wordt geknipt).

Dit is het voorbeeld met 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" />

die wordt weergegeven als:

en hetzelfde voorbeeld met 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>

die wordt weergegeven als: