CSS3を適用するときにsvgのアンチエイリアスをオフにします：要素を拡大しますか？

Question

小さなSVGアイコン（9px：9pxズーム：1.5）にCSS3 Zoomを適用すると、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> 

Answer 1

は解決策自分自身を手に入れました。トリックは、SVG要素への追加です：

shape-rendering="crispEdges" 

をSVG要素に追加しています。 Mozilla MDNから

：

crispEdges は、ユーザーエージェントがレンダリング速度と幾何学的な精度を超えるアートワークのきれいなエッジ間のコントラストを強調しようとするものがあることを示します。鮮明なエッジを得るために、ユーザエージェントは、すべてのラインとカーブ、または垂直または水平に近い直線のアンチエイリアスをオフにすることがあります（）。また、ユーザエージェントは、行の位置と線の幅を調整して、デバイスのピクセルとエッジを揃えることができます。

jsFilddleの違いを参照してください。