svg изображение размыто во всех браузерах

Question

Я использую изображение svg на своем веб-сайте. Но изображение становится размытым во всех браузерах. Есть ли у кого-нибудь некоторые подсказки, почему это происходит?

Вот HTML:

<div class="panel"> 
    <img id="logo" src="img/teste.svg" alt=""> 
</div> 

(класс панель от фундамента)

Вот CSS-код:

#logo { 
position: absolute; 
top: 0%; 
height: 100%; 
left: 1%; 
width: 17%; 
min-width: 219px; 
min-height: 67px; 
z-index: 1;} 

Я не могу показать реальное изображение, но здесь является началом файла svg, не знаю, имеет ли он значение:

<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" 
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="722.964px" 
height="239.988px" viewBox="0 0 722.964 239.988" enable-background="new 0 0 722.964 239.988" xml:space="preserve"> 

Answer 1

<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" 
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="722.964px" 
height="239.988px" viewBox="0 0 722.964 239.988" enable-background="new 0 0 722.964 239.988" xml:space="preserve"> 

Ваш рост установлен как 239.988px - попробуйте округлить его до полного пикселя, если сможете. То же самое с шириной. У браузеров, как правило, есть проблемы с округлением пикселей, поэтому старайтесь оставаться внутри полных значений.

Answer 2

Это может быть связано с масштабированием элемента с изображением.

Я не уверен, что ваш случай тот же, но я заметил размытые svg css фоны, когда я использовал vw (ширина видового экрана), чтобы установить размер элемента. Очевидно, браузер сначала принимает некоторое абсолютное значение, а затем исправляет его на основе относительного значения (например,% или vw), которое предоставляется.

В любом случае, мне удалось получить лучшие результаты, делая это:

• двойной ширины и высоты значения: width: 7.2vw; становится width: 14.4vw;
• добавить transform: scale(0.5);

Оказывается браузер первой отображает svg на пиксели в два раза (поэтому очень подробный, но все же размытый), а затем, уменьшая его на половину размера, результат получается гораздо более четким.