Negative viewbox values are not respected

[mlaggner]

If you use a SVG image with negative viewbox values, the rendered image is not aligned in the same way the SVG is.

Take the checkmark of FontAwesome for example:

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="-96 0 512 512">
    <path d="M312.1 375c9.369 9.369 9.369 24.57 0 33.94s-24.57 9.369-33.94 0L160 289.9l-119 119c-9.369 9.369-24.57 9.369-33.94 0s-9.369-24.57 0-33.94L126.1 256L7.027 136.1c-9.369-9.369-9.369-24.57 0-33.94s24.57-9.369 33.94 0L160 222.1l119-119c9.369-9.369 24.57-9.369 33.94 0s9.369 24.57 0 33.94L193.9 256L312.1 375z"/>
</svg>

this icon is centered if you view it directly (image editor, browser, ...), but if you render it to e.g. 15x15 with svgSalamander, the icon is left aligned (if the viewbox x value would be zero)

[blackears]

I'm having trouble finding documentation on this. What exactly is the negative value supposed to indicate?

[mlaggner]

sorry, I am not familiar with the SVG specifications - I only saw that creating some font awesome icons with svgSalamander resulted in wrong aligned images. Only by changing the viewbox the icons got rendered as they should

[weisJ]

Negative coordinates in viewBox effectively shift the coordinat system used for resolving geometry bounds. It effectively effects like a translation e.g. if viewBox="x y w h" Then this would be "the same as" viewBox="0 0 w h" transform=translate(-x -y). Though this is only partially true as there are different behaviours of viewBox w.r.t to preserveAspectRatio and depending on which element it is applied to (the above example mostly works only for top level svg elements).