I’m just curious if anybody knows how
viewBox="a b c d") are determined.
I’m trying to understand Inkscape’s SVG functionality, so what I’ve done is created a document in Inkscape that is
100px, drawn a line from the left side of the viewport (i.e.
0horizontal value) to the right side (i.e.
Strangely, however, when I save this document as a Plain SVG file, and then open the file in a text editor, the
viewBoxvalues are set to
viewBox="0 0 26.458333 26.458334"instead of, say,
viewBox="0 0 100 100".
Does anybody know how these values (
0 0 26.458333 26.458334) are determined, and why there is seemingly no relation between them and the viewport dimensions?
P.S. I know you can edit the
viewBoxproperty manually in the document options, but I’m still curious as to why Inkscape sets them to funky values.
Inkscape uses mm as the default display-unit or user-unit for your document. User-units are used to store values in the SVG file.
<svg width="100" height="100" viewBox="0 0 26.458333 26.458333">
This tag describes a drawing size of
100px x 100px. The viewBox attribute defines that
100px x 100px is equivalent to
26.458333 x 26.458333 user units.
The SVG scale factor would be
1px / 0.2645 user-unit, which can be used by a SVG renderer to convert all the values that are stored in user-units to the real-world drawing dimensions.
In this case Inkscape wants to store the values in
mm, so it has to know how
px relates to
mm. The CSS specification describes that absolute length units are fixed in relation to each other:
96px = 1in
100px = 1.041666667in = 2.645833333cm = 26.45833333mm
So that’s where the
26.45833333 comes from.
If you want Inkscape to store all your values in
px, you can change the default Display units or user-units to
px in the document properties (File > Document Properties > Tab: Page > General > Display Units)
- Default, mm:
- Changed: px:
Exporting the same document will result in the following SVG tag:
<svg width="100" height="100" viewBox="0 0 100 100">
Now the SVG scale factor is
1px / 1 user-unit.
If you want to know more about this subject, there is a more detailed explanation in the Inkscape Wiki
- Inkscape v0.92 uses a relation of
96px/in, Inkscape v0.91 and earlier used a value of