Rectangle 27 0

css svg and vector effect="non scaling stroke" browser compatibility?


$(document).ready(function()
{
    $('.deferred-load').deferredLoad();
}
$.fn.deferredLoad = function()
{
    $(this).each(function()
    {
        $(this).load($(this).attr('data-load'));
    });
}
<div class="deferred-load" data-load="svg.svg"></div>
<img src="svg-source.svg"/>
<img src="svg.svg"/>
<object type="image/svg+xml" data="svg-source.svg">
    <img src="png-version.png"/>
</object>
<object type="image/svg+xml" data="svg-source.svg"></object>

According to this answer, using object is better practice anyway. Here is a decent blog post that recommends (for cross-browser compatibility):

EDIT: I discovered that as embedded objects, SVGs were interfering with "hover" and "click" events, so I finally buckled and decided that I must embed SVGs fully. But I had no interest in pasting every single one, so I have the following at the top of my javascript file (I'm using JQuery):

I have no idea what's going on under the hood, but there is an easier solution, at least for inline SVG's (not sure about backgrounds). Change:

I have not tested this latter option, but if it works it is much simpler than this solution.

In addition, you need to make sure you have viewBox defined for the svg document.

Of course, this doesn't work without Javascript enabled. But it's way better than pasting all that ugly XML.

Note
Rectangle 27 0

css svg and vector effect="non scaling stroke" browser compatibility?


This bug has just been fixed in Firefox. You can try in a Nightly today or wait for the release in September.

Under the hood UAs need to draw the SVG and then turn it into a bitmap to create an image (including a background image). The easiest way is to draw it is to reuse the non-image rendering code and then scale the bitmap but when the bitmap is scaled it becomes both blurred and also doesn't render non-scaling stroke properly. The right way is to figure out what size you eventually want to draw the bitmap at and tell the SVG drawing code to draw into that.

Note
Rectangle 27 0

css svg and vector effect="non scaling stroke" browser compatibility?


This bug has just been fixed in Firefox. You can try in a Nightly today or wait for the release in September.

Under the hood UAs need to draw the SVG and then turn it into a bitmap to create an image (including a background image). The easiest way is to draw it is to reuse the non-image rendering code and then scale the bitmap but when the bitmap is scaled it becomes both blurred and also doesn't render non-scaling stroke properly. The right way is to figure out what size you eventually want to draw the bitmap at and tell the SVG drawing code to draw into that.

Note