ぼやけSVG以下<object>

Question

として表示されない限りは、私のiPhone 5SのSafariからのスクリーンショットです：

第2 SVGアイコンが<object>として表示されます。

<object data="/svg/tabbar/tab_1_active.svg" type="image/svg+xml"></object>

第3 SVGアイコンは、<img>として表示されます。

<img src="/svg/tabbar/tab_1_active.svg">

第四 SVGのアイコンがinline css backgroundとして表示されます。

background: url("data:image/svg+xml,utf8,<svg ...> ... </svg>") //use of base64 does not change anything

問題：問題がない限り、SVGは次のように表示されていないことを、あなたが見ることができるように、あります<object>それはぼやけてレンダリングされます。私はぼやけの原因を知らない。私はキャッシュのために私のSVGを<img>またはcss bgとして使いたいです。あなたはそれについて考えていますか？それをぼやけないようにする方法はありますか？

IE 11 &クロムにはぼやけがありません。

EDIT：

tab_1_active.svgソースコード：

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <!-- Generator: Sketch 3.8 (29681) - http://www.bohemiancoding.com/sketch --> 
    <title>Tab Bar/tab_1_active</title> 
    <desc>Created with Sketch.</desc> 
    <defs> 
     <path d="M0,23.2992459 C0,24.9534168 1.28523416,25.9045372 2.87260618,25.4230395 L8.39696611,23.7473352 C9.45488626,23.4264362 11.1610036,23.4494105 12.2096711,23.7993121 L17.7903289,25.6613714 C18.8381075,26.0109764 20.5490005,26.0330683 21.6030339,25.7133483 L28.0844661,23.7473352 C29.1423863,23.4264362 30,22.2752576 30,21.1660515 L30,2.70075414 C30,1.04658319 28.7147658,0.0954628257 27.1273938,0.576960458 L21.6030339,2.25266483 C20.5451137,2.5735638 18.8389964,2.55058953 17.7903289,2.2006879 L12.2096711,0.3386286 C11.1618925,-0.0109764369 9.45099951,-0.0330683311 8.39696611,0.286651673 L1.91553389,2.25266483 C0.857613736,2.5735638 0,3.72474244 0,4.8339485 L0,23.2992459 Z" id="path-1"></path> 
     <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="30" height="25.8782498" fill="white"> 
      <use xlink:href="#path-1"></use> 
     </mask> 
    </defs> 
    <g id="v10" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
     <g id="StyleGuide" transform="translate(-100.000000, -389.000000)"> 
      <g id="1" transform="translate(100.000000, 389.000000)"> 
       <g id="Tab-Bar/tab_1_active"> 
        <g id="tab_1_active"> 
         <rect id="tab" x="0.857843137" y="0" width="49.0196078" height="50"></rect> 
         <g id="ic_map" transform="translate(10.000000, 12.000000)"> 
          <use id="Combined-Shape" stroke="#85B1D7" mask="url(#mask-2)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" xlink:href="#path-1"></use> 
          <rect id="Rectangle-556" fill="#85B1D7" x="8.90625" y="6.5" width="2.8125" height="11.1428571" rx="1.40625"></rect> 
          <rect id="Rectangle-556-Copy" fill="#85B1D7" x="18.28125" y="8.35714286" width="2.8125" height="11.1428571" rx="1.40625"></rect> 
         </g> 
        </g> 
       </g> 
      </g> 
     </g> 
    </g> 
</svg> 

Answer 1

マスクを除去し、代わりに行っスケッチぼけのイラストでエクスポートした後。