Verschwommen SVG angezeigt, es sei denn als <object>

Unten finden Sie die Screenshot von meinem iPhone 5s Safari:Verschwommen SVG angezeigt, es sei denn als <object>

ersten beiden SVG-Icons als <object> angezeigt:

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

Dritte Das SVG-Symbol wird als angezeigt:

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

Vierte SVG-Symbol wird als inline css background angezeigt:

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

Problem: Das Problem ist, wie man sehen kann, dass es sei denn, SVG nicht als angezeigt <object> ist es verschwommen wiedergegeben. Ich weiß nicht, was zu Unschärfe führt. Ich möchte meine SVGs wegen des Zwischenspeicherns als oder css bg verwenden. Hast du irgendwelche Gedanken dazu, wie man es unscharf macht?

In IE 11 & Chrom gibt es keine Unschärfe.

EDIT:

tab_1_active.svg Quellcode:

<?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>

Quelle

2016-05-25 Edgar

Was ist in tab_1_active.svg? –

@RobertLongson getan. – Edgar

Ich denke, das ist ein UA-Fehler, die Maske wird in der falschen Auflösung gerendert. Wird durch das Entfernen der Maske die Unschärfe beseitigt? –

Nach dem Entfernen der Maske und den Export mit Illustrator statt Sketch blurriness gegangen.

Quelle

2017-03-09 18:47:57 Edgar

Verschwommen SVG angezeigt, es sei denn als <object>

Antwort

Verwandte Themen