逐步调整svg文件大小以避免模糊

Question

所以我想将svg文件用于图标。 例如像这样

.icon-page{
    background-image: url("../../layout/icons.svg");
    background-size: 2em 2em;
}

我希望它与用户的字体大小一起扩展，这就是为什么我认为我使用em。 但是如果用户默认的字体大小大约是23px左右，那么svg就会模糊不清，因为图标不能很好地适应像素。有没有办法解决这个问题？我可以使用mediaquery检测用户的字体大小，并将图标字体大小设置为某个值以确保图标看起来不错吗？

比较22px（差/模糊）到24px（正确）

演示：http://jsfiddle.net/TgHLf/17/