|Positioning and Sizing Subject to Change|
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:
|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:
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.
|© 2005-2017 Tavmjong Bah.||Get the Book or EBook.|