CSS3 लागू करते समय svg पर एंटी-एलाइजिंग बंद करें: तत्व पर ज़ूम करें?

Question

मैंने पाया कि जब CSS3 ज़ूम छोटे एसवीजी आइकन (9 पीएक्स: 9 पीएक्स ज़ूम के साथ: 1.5) पर लागू होता है, तो एसवीजी आइकन धुंधला हो सकता है। इस मामले में एक तेज और साफ आइकन पाने के लिए कोई विचार? अग्रिम में धन्यवाद।

एसवीजी:

<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

एक समाधान अपने आप को मिल गया। चाल जोड़ रही है:

shape-rendering="crispEdges" 

एसवीजी तत्वों के लिए।

Mozilla MDN से:

crispEdges इंगित करता है कि उपयोगकर्ता एजेंट प्रतिपादन की गति और ज्यामितीय परिशुद्धता से अधिक कलाकृति की साफ किनारों के बीच इसके विपरीत पर जोर करने का प्रयास करेगा। कुरकुरा किनारों को प्राप्त करने के लिए, उपयोगकर्ता एजेंट एंटी-एलाइजिंग को सभी लाइनों और वक्रों के लिए बंद कर सकता है या संभवतः केवल सीधे रेखाओं के लिए जो ऊर्ध्वाधर या क्षैतिज के करीब हैं। साथ ही, उपयोगकर्ता एजेंट डिवाइस पिक्सल के साथ किनारों को संरेखित करने के लिए लाइन स्थिति और रेखा चौड़ाई समायोजित कर सकता है।

jsFilddle पर अंतर देखें।