Demo 1

Breite und Höhe der SVG entsprechen Breite und Höhe der Viewbox

Demo 2

Breite der SVG ist 100%. Höhe der SVG entspreicht der Höhe der Viewbox

Demo 3

Breite und Höhe der SVG sind Größer als Breite und Höhe der Viewbox. Die Viewbox ist allerdings ohne Einheiten angegeben und wird daher auf die Größe der SVG skaliert.

Demo 4

Breite und Höhe der SVG sind Größer als Breite und Höhe der Viewbox. Die Viewbox ist mit PX-Einheiten angegeben und wird daher nicht skaliert.

Demo 5

Breite und Höhe der SVG sind Größer als die angegebene Viewbox. Die Viewbox skaliert proportional bis die Größe von SVG erreicht ist. Die Position der Viewbox in SVG wird durch preserveAspectRatio bestimmt. Hier xMidYMid.

Demo 6

Breite und Höhe der SVG sind Größer als die angegebene Viewbox. Die Viewbox skaliert proportional bis die Größe von SVG erreicht ist. Die Position der Viewbox in SVG wird durch preserveAspectRatio bestimmt. Hier xMaxYMin.

Demo 6

Breite und Höhe der SVG sind Größer als die angegebene Viewbox. Die Viewbox skaliert proportional bis die Größe von SVG erreicht ist. Die Position der Viewbox in SVG wird durch preserveAspectRatio bestimmt. Hier xMaxYMax.

Demo 8

Breite und Höhe der SVG sind Größer als die angegebene Viewbox. Die Viewbox skaliert proportional über die Größe von SVG hinaus. Die Position der Viewbox in SVG und die Beschneidung wird durch preserveAspectRatio bestimmt. Hier xMidYMid slice.

Demo 9

Breite und Höhe der SVG sind Größer als die angegebene Viewbox. Die Viewbox verzerrt auf die Größe der SVG. Das wird durch preserveAspectRatio bestimmt. Hier none.