Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Negative viewbox values are not respected #101

Open
mlaggner opened this issue Dec 30, 2022 · 3 comments
Open

Negative viewbox values are not respected #101

mlaggner opened this issue Dec 30, 2022 · 3 comments

Comments

@mlaggner
Copy link

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
Copy link
Owner

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

@mlaggner
Copy link
Author

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
Copy link
Contributor

weisJ commented Jan 1, 2023

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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants