[Warning] Warning

This section not yet updated for Inkscape v0.92.

Positioning SVG

[Warning]Positioning and Sizing Subject to Change

This section is based on current browser behaviour and the SVG specification. There is active discussion on changing the specification by the SVG standards group.

Now that you know how to get SVG to display in an HTML file, the next question is how does it get placed? The process is a bit convoluted and the results across browsers are not always the same. There are two steps. The first is to determine the viewport or area allocated to the SVG by the web page, the second is to determine how the SVG fits into the viewport. For this discussion we will assume the SVG is being inserted via the <object> tag.

Determining the area of the page that is allocated for the SVG is a multistep process:

[Tip]SVG Width and Height

Think of the SVG width and height attributes as recommendations to the renderer about the size of the viewport if the HTML doesn't define the size. They are not(!) always the width and height of the drawing.

Now that the viewport is defined, how the SVG is fitted inside that viewport must be determined. Again this is a several step process:

Viewport.

This figure shows how an SVG file is placed in an HTML page using the <object> tag. The SVG is nominally 150 px wide and 100 px tall. It contains a black rectangle with the same dimensions as the nominal size and with a 10 px wide stroke. A circle is placed in the center of the rectangle. A dashed rectangle surrounds the black rectangle. It is outside the nominal SVG area. The inside of the gray rectangle marks the viewport (created by setting the padding attribute of the <object> to 10 px).

From left to right: <object> width and height attributes set to 120, SVG width set to 150, height set to 100, viewBox undefined. <object> width and height attributes set to 120, SVG width and height undefined (defaults to 100%), viewBox set to 0, 0 150, 100. <object> width and height attributes not set, either SVG width set to 150, height set to 100, or viewBox set to 0, 0 150, 100.

Aspect.

This figure shows how an SVG file is placed depending on the preserveAspectRatio attribute. One possible value, not shown, is none in which case the SVG is stretched to fit the viewport. The other possible values take the form: xAYB C, where A and B can have the values Min, Mid, or Max; and C can have the value meet or slice. The values A and B determine which part of the viewport and viewBox are aligned while the value of C determines if the image is scaled so that two edges of the viewBox coincide with the viewport while the other two are inside (meet) or if two edges of the viewBox coincide with the viewport while the other two are outside (slice).

The SVG shown is the same as in the previous figure. From left to right: Top row: xMinYMin meet, xMidYMin meet, xMaxYMin meet. Bottom row: xMinYMin slice, xMinYMid slice, xMinYMax slice. Note, not all possible combinations are shown.

To set the viewBox attribute in Inkscape Open the XML Editor dialog and select the SVG root element (<svg:svg...>). In an Inkscape created file, the width and height attributes will have been defined while the viewBox will not have been defined. If you open an SVG file created by another application the viewBox may be defined instead of or in addition to width and height. If the viewBox attribute is already defined, select it from the window on the right. You can then change the values. If it is not defined, click on the text entry box near the bottom of the window, in the same line as the Set button. Type in viewBox. Then in the box below, type in four numbers separated by spaces, the x and y values of the upper-left corner (normally 0 and 0) and the width and height. The values are in user units (pixels). Click on the Set button or use Ctrl+Enter to register your values. Once the viewBox is defined, you can modify the width and height attributes including deleting them or changing them to 100%. Modifying the Width and Height in the Document Properties dialog will now modify the viewBox if width and height attributes are not defined in fixed units, otherwise it will modify the width and height attributes as well as proportionally modify the viewBox attribute.

[Note]Clipping by Viewport

An SVG is clipped by the viewport and not by the viewBox or the SVG width and height attributes. This means that objects outside the Inkscape page may be displayed in the HTML page under some circumstances.