Weird behavior when embedding image in SVG and specifying width/height in a unit other than px
LaurenzV opened this issue · 1 comments
I wanted to do some digging into this issue, and at least one part of the problem can be reduced to the following weird behavior:
The first thing I did is to create a 50px x 50px image of a yellow rectangle and I tried to generate two different SVGs:
Version 1
I first tried the following SVG.
Input:
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<image xlink:href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAQ0lEQVR42u3PQREAAAgDINc/9Mzg14MGpJ3OAxERERERERERERERERERERERERERERERERERERERERERERERERERuVjg6JWdCD2ogQAAAABJRU5ErkJggg=="
id="image7eea7a0a44"/>
</svg>which correctly is outputted as the following:
Output:
Version 2
Now comes the weird thing though, if I specify the width and height of the SVG itself in pt but leave the view box unchanged, I get the following result.
Input:
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="100pt" height="100pt" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<image xlink:href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAQ0lEQVR42u3PQREAAAgDINc/9Mzg14MGpJ3OAxERERERERERERERERERERERERERERERERERERERERERERERERERuVjg6JWdCD2ogQAAAABJRU5ErkJggg=="
id="image7eea7a0a44"/>
</svg>Output:
So for some reason, the image is shifted down a bit and it's a bit too small. If I render the same svg in resvg, it looks like in Version 1.
I'll try to figure out what's going on, but I thought I'd post this anyways in case someone already knows what might be the problem here.