SVG image does not scale well in IE11

Question

I have an external SVG image that will not preserve its aspect ratio in IE11.

.container { width: 400px; height: 400px; display: block; border: 1px solid blue; } img { max-height: 200px; border: 1px solid red; } 

 <div class="container"> <img src="http://www.wikipathways.org/wpi/wpi.php?action=downloadFile&type=svg&pwTitle=Pathway:WP3155_r80720" /> </div> 

( https://jsfiddle.net/9q3cL4cs/7/ )

The problem is that in IE11, the width does not scale according to the maximum height. The reason this doesn't work in IE11 is because the SVG image doesn't have a specific look.

Any decisions are appreciated!

Answer 1

Go to the image URL and upload it.

Open the image in GIMP or Illustrator somewhere where you can get the SVG code.

Get this code and paste it into your html.

Then play with the viewport attribute until you get the correct scaling.

You can also change anything in your SVG.

If you use SVG inside a container div, it’s useful to use

 svg{ width:100%; height:auto; } 

in CSS.

Because with this rule, SVG sizes are connected to their div containers.

In my experience, it is always better to use simple SVG XML for any SVG operation.