Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Resizing attributes in the svg root element

Resizing behaviour

Code Block
xml
xml
 viewBox="0 0 400 400" preserveAspectRatio="xMidYMid meet" 

The svg document is scaled to fit the display window and the aspect ratio is preserved.

Code Block
xml
xml
 viewBox="0 0 400 400" preserveAspectRatio="none" 

The svg document is scaled and stretched to fill the window (aspect ratio is not preserved).

Code Block
xml
xml
 width="1200" height="700" 

Only the region with coordinates 0 <= x <= 1200 and 0 <= y <= 700 pixels is shown. The svg document is not resized when the display window is resized.

Background information:
The width and height attributes in the root svg element of an svg file determine the size of the viewport, in other words the size of the svg document when it is viewed. The coordinates of the objects in the svg file are specified in user space, which is different from the viewport space. The viewBox attribute in the root svg element defines the rectangle in user space that should be mapped to the edges of the viewport. The preserveAspectRatio attribute in the root svg element determines how this mapping takes place. The mapping can use one of three methods: "stretch", "meet" or "slice". See ViewBoxAttribute and PreserveAspectRatioAttribute for detailed information.

Aligning text within svg text objects

...