Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p><strong>Update 2013-10: Confirmed fixed in v24</strong> which now made it into the release channel</p> <hr> <p><strong>Update 2013-07: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=600207" rel="nofollow noreferrer">Bug is solved!</a></strong> Fix will make it into Firefox 24 which will be released somewhere between September and October</p> <hr> <p>I read about a somewhat simple solution to this problem somewhere that I now use in my projects (will add source when i find it again):</p> <p>simply set width and height of the svg-container to the maximum values the image is likely going to have and you are fine. Works in all current browsers just fine. only restriction is, that firefox and opera (yes, the same two browsers that caused this mess) dont work well with very big images --> dont use too high values for the dimensions</p> <p>original file:</p> <pre><code>&lt;svg width="64px" height="128px"&gt; </code></pre> <p>lets say the maxium width will be 3x that big, then your SVG should contain this:</p> <pre><code>&lt;svg width="192px" height="384px"&gt; </code></pre> <p>(yes, the <code>svg</code> node can have more attributes...)</p> <p>The reason why this works is that Opera and FF render SVGs before resizing them instead of the other way round as it is supposed to be done with vector gfx</p> <p>UPDATE: credits go to David Bushell who wrote a wonderfull article on <a href="http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/#comment-573707" rel="nofollow noreferrer">Resolution Independence With SVG</a>.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload