24

I'm just curious if anybody knows how viewBox values (i.e. 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 x 100px, drawn a line from the left side of the viewport (i.e. 0 horizontal value) to the right side (i.e. 100 horizontal value).

Strangely, however, when I save this document as a Plain SVG file, and then open the file in a text editor, the viewBox values 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 viewBox property manually in the document options, but I'm still curious as to why Inkscape sets them to funky values.

Improve this question
2
  • thank you for this question and the way you asked it. It is exactly what I was wondering, down to the P.S. at the bottom.
    – Corey
    Oct 4, 2021 at 18:45
  • @Corey glad it helped more than just me
    – oldboy
    Oct 6, 2021 at 11:09

1 Answer 1

Reset to default
28

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

This means 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)

  1. Default, mm:

Document properties mm

  1. Changed: px:

Document properties 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

Remarks:

  • Inkscape v0.92 uses a relation of 96px/in, Inkscape v0.91 and earlier used a value of 90px/in
Improve this answer
2
  • Wow. Very interesting. So there was a rhyme and reason to it. Thanks a lot for sharing your knowledge!
    – oldboy
    Jan 30, 2017 at 19:13
  • 1
    I'm going to remember the whiteout technique you used. I normally put red squares around the important parts of screenshots, yours is so much nicer.
    – aaaaaa
    Mar 29, 2018 at 20:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.