SVG images not displaying in table properly compared to other browsers

user_11700881 0
Viewed 360

I've created a simple table to display payment gateway icons on my website, works as expected on chrome/firefox/android

enter image description here

HTML / CSS:

<div id="draw-zone-wrapper" style="height: 25px;">
<table class="MyTable" style="border-collapse: collapse; width: 100%;" border="0">
<tbody>
<tr>
    <td style="width: 18%;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://www.example.com/afterpay_logo.svg" /></td>
    <td style="width: 19%;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://www.example.com/klarna_logo.svg" /></td>
    <td style="width: 14%;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://www.example.com/zip_logo.svg" /></td>
    <td style="width: 21%;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://www.example.com/laybuy_logo.svg" /></td>
    <td style="width: 28%;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://www.example.com/latitude_logo.svg" /></td>
</tr>
</tbody>
</table>
</div>


.MyTable td
{
    padding: 10px;
}

Unfortunately IE does whatever it wants, and displays it like this: enter image description here

Any suggestions on how I can improve what I've done so that all browsers play nicely?

svg css html
3 Answers

Internet explorer doesn't apply any SVG clip to a html element, so you need an SVG <image> element instead of HTML <img> element and adjust the height and width of each SVG. Try it once

user_102188780

Can you please check the below code? Hope it will work for you. You have to just add max-width:100%; to the img.

.MyTable img
{
    max-width: 100%;
}
user_122138960

Since the width of images are different, you can try max-height for images like below. Also make sure that the svg image has viewBox defined.

.MyTable img {
    max-height: 30px;
    max-width: 100%;
    width: auto;
}
user_11558760
Related