Why doesn't this SVG graphic scale in IE9 and 10 (preview)?

Question

According to IE website SVG is supported. And according to this answer too What are SVG (Scalable Vector Graphics) supported browsers?

http://jsfiddle.net/jitendravyas/2UWNe/show/

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" height="100%" viewBox="0 0 480 360"
  xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <linearGradient id="button_surface" gradientUnits="objectBoundingBox"
      x1="1" x2="1" y1="0" y2="1">
      <stop stop-color="#434343" offset="0"/>
      <stop stop-color="#000000" offset="0.67"/>
    </linearGradient>

    <linearGradient id="virtual_light" gradientUnits="objectBoundingBox"
      x1="0" x2="0" y1="0" y2="1">
      <stop stop-color="#EEEEEE" offset="0" stop-opacity="1"/>
      <stop stop-color="#EEEEEE" offset="0.4" stop-opacity="0"/>
    </linearGradient>
  </defs>

  <!-- button content -->
  <rect x="10" y="10" rx="15" ry="15" width="150" height="80"
    fill="url(#button_surface)" stroke="#363636"/>

  <text x="30" y="55" fill="white"
    font-family="Tahoma" font-size="20" font-weight="500">
    SVG Button
  </text>

  <!-- vitual lighting effect -->
  <rect x="12" y="12" rx="15" ry="15" width="146" height="76"
    fill="url(#virtual_light)" stroke="#FFFFFF" stroke-opacity="0.4"/>
</svg>

Answer 1

IE seems to be mishandling the missing preserveAspectRatio attribute. You can get it to scale in IE by adding preserveAspectRatio="xMinYMin slice" as seen here: http://jsfiddle.net/2UWNe/4/show

However, what IE is showing is not the correct behavior, and thus this change causes other browsers to behave differently than IE. (Microsoft, however, believes that they support preserveAspectRatio.)

I haven't looked deeply at your units or content bounding boxes. What effect are you really trying to achieve?

Answer 2

SVGs don't scale the same way as raster images like JPG, PNG, and GIF which have a clearly defined size.

You will need to resort to hacks to guarantee same display across browsers.

Try this:

<svg width="100%" height="100%" viewBox="0 0 480 360" preserveAspectRatio="xMidYMin slice" style="width: 100%; padding-bottom: 99.99%; height: 1px; overflow: visible; box-sizing: content-box; enable-background:new 0 0 381.1 381.1;" ... >

See Demo

Learn more

Answer 3

The problem is that you are using percentages for height and width, as explained here (http://www.seowarp.com/blog/2011/06/svg-scaling-problems-in-ie9-and-other-browsers/).

If the width and height are either defined as something as useless as 100% or if they aren’t defined at all, these browsers will make a guess as to what the dimensions ought to be based on the points and shapes defined in the body of the SVG file.

Change to width=480 and height=360 and you should be fine.

Answer 4

Another option is to use viewport units. This way your SVG will scale according to the size of the window:

<svg width="100%" height="20vw" viewBox="0 0 150 150"> 
      <rect x="10" y="10" width="150" height="130" fill="#00ff00"/>
</svg>

https://jsfiddle.net/orikon/qy43fb0p/