How manage stroke with 2 SVGs with different size

Question

I use since shortly svg icon and stroke property for my website. But when 2 svg have different canvas size, the stroke are drawed before resizing.

So for a svg on 32px and a 2px stroke, the 64px result have 4px strok.. And the second (on 128px) have a 1px stroke on the final result.

For example i have done a Jsfiddle : http://jsfiddle.net/kX6tL/1/

<tr>
    <td>Stroke : 2</td>
    <td> <svg class="icon"><use xlink:href="#home-icon" /></svg> </td>
    <td> <svg class="icon"><use xlink:href="#earth-icon" /></svg></td>            
</tr>
<tr>
    <td>Stroke : 10</td>
    <td> <svg class="icon large-stroke"><use xlink:href="#home-icon" /></svg> </td>
    <td> <svg class="icon large-stroke"><use xlink:href="#earth-icon" /></svg></td>            
</tr>

.icon{
    width: 64px;
    height: 64px;

    fill: #AB1;

    stroke: red;
    stroke-width: 2px;
}
.large-stroke{
    stroke-width: 10px;
}

Someone have a solution ??

Thank you all for reading and help ! :)

Answer 1

You can use vector-effect="non-scaling-stroke".
This property is supported by FF,Chrome,opera and safari except IE.

http://www.w3.org/TR/2014/WD-SVG2-20140211/painting.html#NonScalingStroke