Search code examples
htmlsvgbase64internet-explorer-11

Base64 svg on ie11 not rendering when resized

I have a particular svg file encoded in base64 that I'm trying to display with an img tag.

My problem is; for this particular svg only the image is not rendered when resized on internet explorer only

You can try it yourself (I'm on windows7 with ie11): CodePen

Do you have any explanation/workaround for this ?

Best regards

Solution

  • If you look very close when playing with the size, we can see parts of the SVG are actually displayed. It seems that IE resizes the canvas but not the actual shape.

    Decoding your SVG file, here is what we get:

    <svg height="361.5" width="361.5" xmlns="http://www.w3.org/2000/svg"><path d="m-110.25-20.25h582v402h-582z" fill="none"/>...</svg>

    The height and width are fixed. Changing these properties with a viewBox property like this allows IE to resize the shape:

    <svg viewBox="0 0 361.5 361.5" xmlns="http://www.w3.org/2000/svg"><path d="m-110.25-20.25h582v402h-582z" fill="none"/>...</svg>

    Kind regards!