CODEWITHSUNDEEP
htmlxmlsvg
user31782
user31782

Reputation: 7589

What is default value of viewBox attribute if omitted from svg?

I think if I omit the viewBox attribute from svg it is assumed to be viewBox="0 0 100 100". I tried two tests:

  1. With viewBox attribute: 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle" width='100' height='100'>
  <path d="M 50,5 95,97.5 5,97.5 z"/>
</svg>

  1. Without viewBox attribute 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle" width='100' height='100' viewBox="0 0 100 100">
    <path d="M 50,5 95,97.5 5,97.5 z"/>
</svg>

As both the results are same I think my guess is correct. Please give some reference to explain What is default value of viewBox attribute if omitted from svg.

Upvotes: 19

Views: 7347

Answers (1)

Tatarize
Tatarize

Reputation: 10786

https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute

The default value of an omitted viewbox is "As if not specified."

The problem here is a bit conceptual. So the equivalent viewbox to a non-specified viewbox is 0 0 width height but an unspecified viewbox simply does not exist. A viewbox is equal to a transform and you often, if rendering this stuff, would make the equivalent transform to a viewbox and add that into your matrix. And unspecified viewbox applies no transformation at all. So this question becomes what is the default value of an unspecified transform attribute.

It might help to think of the SVG object itself as an element within Euclidean space, just like the shapes within it. It would be possible for a circle object (though not within the spec) to have a viewbox. This would mean it would have a sort of zoom into the coordinate system of the circle and make that zoomed view equal to the size of the circle. So everything that can have a width and height within the space could have a viewbox, and a few of them actually do like image objects and nested SVG objects. Without a viewbox everything is the size that it actually exists within the space. In the case of the SVG object itself this means the viewbox is equal to the view which is equivalent to viewing it at 0 0 width height since that's the actual size of the object itself. But, really the effect of not having a viewbox is no-effect. Really a viewbox equal to 0 0 width height will end up applying no scale or translate values when turned into a transform. But, that could have been achieved by simply omitting it.

If the width and height are omitted they are taken to be equal to 100%. Which is to say they take up 100% of the space within the physical box being used to view them. The viewport as opposed to the viewbox.

Upvotes: 5

Related Questions