Positioning SVG

Inkscape » SVG and the Web » Positioning SVG

	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:

If the <object> tag has the width or height attribute defined in absolute units or in percent, this is the size of the viewport (if only one of width or height is defined, the other defaults to the same value).
If the <object> does not have fixed width and height, then if the SVG has fixed width and/or height, the SVG values determine the size of the viewport. The SVG width and height attributes are set in the Inkscape Document Properties dialog.
If the viewport is still not determined, then if the SVG width and height are 100%, the viewport fills up the space available to the <object> tag. The meaning of percentage values less than 100% is unclear (browser differ). In Inkscape, you can only set the SVG width and height to 100% by using the XML Editor dialog. The viewBox (see below) attribute must be set first.

	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:

If the SVG viewBox attribute is defined, then the viewBox (see below on how to set in Inkscape) is mapped to the viewport according to the value of the SVG preserveAspectRatio attribute. The default value of this attribute is xMidYMid meet which means that the center of the viewBox is at the center of the viewport and that the SVG is scaled uniformly so that one pair of sides (top/bottom or left/right) of the viewBox coincide with the viewport while the other pair of sides is inside the viewport. See the figure below for the meaning of other possible values.
If there is no viewBox attribute defined, then the SVG is mapped so that the upper-left corner of the viewport corresponds to the (0, 0) coordinate of the SVG (normally the upper-left corner). The SVG is scaled so that one user unit (pixel) corresponds to one screen pixel. Scroll bars may be shown if the SVG (as defined by the width and height attributes) is larger than the 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.

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.

	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.


Simple SVG Display		Adding Links