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

Question

From various sources I gather that vector-effect="non-scaling-stroke" in svg should work in the current versions Opera, Firefox and Chrome. (Not sure about IE10).

However I can only make it work in Opera and Firefox, and then only when it is directly embedded as an image, if it is scaled as a background image in CSS then it doesn't work.

My questions:

Why not chrome?

Why not in background images?

Is there a standard way I can use this in all latest browsers?

A fiddle example.

HTML :

<div><img src="http://dl.dropbox.com/u/60476509/close.svg" /></div>
<div><img id="one" src="http://dl.dropbox.com/u/60476509/close.svg" /></div>
<div id="two"></div>
<div id="three"></div>

CSS :

#one {
    width: 200px;
    height: 200px;
}

#two {
    background-image: url("http://dl.dropbox.com/u/60476509/close.svg");
    height: 100px;   /* native size */
    width: 100px;
    background-size: contain;        
}
#three {
    background-image: url("http://dl.dropbox.com/u/60476509/close.svg");
    height: 200px;
    width: 200px;
    background-size: cover;        
}

Works in Chrome if you place the SVG inline: jsfiddle.net/42mq6, not sure how to work around your problem though. — methodofaction

galdre galdre · Accepted Answer · 2013-06-23T04:34:57

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:

<img src="svg-source.svg"/>

to:

<object type="image/svg+xml" data="svg-source.svg"></object>

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

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

<object type="image/svg+xml" data="svg-source.svg">
    <img src="png-version.png"/>
</object>

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

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):

$(document).ready(function()
{
    $('.deferred-load').deferredLoad();
}
$.fn.deferredLoad = function()
{
    $(this).each(function()
    {
        $(this).load($(this).attr('data-load'));
    });
}

Now instead of <img src="svg.svg"/> I can write <div class="deferred-load" data-load="svg.svg"></div>.

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

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

2 Answers