Отключение сглаживания на svg при применении CSS3: увеличение элемента?

Я обнаружил, что когда CSS3 Zoom применяется на маленьких значках SVG (9px: 9px с увеличением: 1,5), значки SVG могут быть размытыми. Любая идея получить острый и чистый значок в этом случае? Спасибо заранее.

SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
         x="0px" y="0px" width="9px" height="9px" viewBox="0 0 9 9" enable-background="new 0 0 9 9">
    <g>
        <g fill="none" transform="translate(0.5, 0.5)"> 
            <g stroke="#000000" stroke-width="0.5" stroke-linecap="square" >
                <line x1="2" y1="4"  x2="6" y2="4"/>
                <line x1="4"  y1="2" x2="4" y2="6"/>
            </g>
            <g stroke="#909090" stroke-width="1" stroke-linecap="square" >
                <rect x="0" y="0" width="8" height="8"/>
            </g>
        </g>
    </g>
</svg>

Ответы

Ответ 1

Получил решение сам. Трюк добавляет:

shape-rendering="crispEdges"

для элементов SVG.

Из Mozilla MDN:

crispEdgesУказывает, что пользовательский агент должен попытаться подчеркнуть контраст между чистыми краями обложки над скоростью рендеринга и геометрической точностью. Для достижения четких краев пользовательский агент может отключить сглаживание для всех линий и кривых или, возможно, только для прямых линий, которые близки к вертикали или горизонтали. Кроме того, пользовательский агент может корректировать позиции линий и ширину линии для выравнивания краев с пикселями устройства.

Посмотрите разницу на jsFilddle.