Skip to main content
Participant
March 9, 2017
Question

SVG files shrink in IE

  • March 9, 2017
  • 1 reply
  • 280 views

I've created an .svg graphic in ai cc for an existing web page, and it looks exactly as I expected - except when viewed in IE, where it is significantly smaller. It's the program snapshot at the top right of the page, as seen in Chrome and IE:

How can I fix this issue? Here's the code I'm using:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 277.08 348.51"><defs><style>.cls-1{fill:#fff;stroke-width:2px;}.cls-1,.cls-4{stroke:#dddede;stroke-miterlimit:10;}.cls-2{fill:#dddede;}.cls-11,.cls-12,.cls-3,.cls-5,.cls-6,.cls-8{isolation:isolate;}.cls-3{font-size:21.41px;fill:#231f20;}.cls-3,.cls-7,.cls-8{font-family:Arial-BoldMT, Arial;font-weight:700;}.cls-4{fill:none;}.cls-12,.cls-6{font-size:15px;font-family:ArialMT, Arial;}.cls-11,.cls-12,.cls-6{fill:#59463d;}.cls-7,.cls-8{font-size:29.85px;fill:#008eb1;}.cls-9{letter-spacing:-0.06em;}.cls-10{letter-spacing:0em;}.cls-11{font-size:13px;font-family:Arial-ItalicMT, Arial;font-style:italic;}.cls-12{letter-spacing:-0.07em;}</style></defs><title>snapshot mshs</title><rect class="cls-1" x="1" y="1" width="275.08" height="346.51"/><rect class="cls-2" x="1" y="332.51" width="275" height="15"/><text class="cls-3" transform="translate(23.92 51.77)">Program Snapshot</text><line class="cls-4" x1="24.92" y1="70" x2="252.08" y2="70"/><g class="cls-5"><text class="cls-6" transform="translate(118.59 90)">Credits required</text><text class="cls-6" transform="translate(118.59 108)">to complete</text><text class="cls-6" transform="translate(118.59 126)">M.S.</text></g><text class="cls-7" transform="translate(31.51 171.48)">$606</text><text class="cls-8" transform="translate(23.51 224.35)">$<tspan class="cls-9" x="16.6" y="0">1</tspan><tspan class="cls-10" x="31.56" y="0">087</tspan></text><text class="cls-7" transform="translate(47.84 114.48)">30</text><text class="cls-6" transform="translate(119.58 191.81)">Cost per credit hour</text><line class="cls-4" x1="24.92" y1="135" x2="252.08" y2="135"/><line class="cls-4" x1="24.92" y1="240.82" x2="252.08" y2="240.82"/><text class="cls-11" transform="translate(119.58 164.14)">(In state)</text><text class="cls-11" transform="translate(119.5 218.14)">(Out of state)</text><g class="cls-5"><text class="cls-12" transform="translate(118.59 261.02)">A</text><text class="cls-6" transform="translate(128.32 261.02)">verage number of</text><text class="cls-6" transform="translate(118.59 279.02)">months required to</text><text class="cls-6" transform="translate(118.59 297.02)">complete M.S.</text><text class="cls-11" transform="translate(118.59 312.62)">(may take up to 3 years).</text></g><text class="cls-7" transform="translate(47.84 291.83)">18</text></svg>

Advice appreciated - thanks!

This topic has been closed for replies.

1 reply

Jacob Bugge
Community Expert
Community Expert
March 9, 2017

stephzin,

I am afraid there are some strange things going on in some of the browsers.

I believe it may be worth considering your asking in the Dreamweaver (or whichever application you use) forum, or in an IE forum.

Dreamweaver support forum