.svg изображение размыто на определенных уровнях масштабирования в Chrome

Я решил иметь логотип своего сайта в качестве svg, но он, похоже, не очень хорошо отображается в chrome. На уровне 100% масштабирования он выглядит размытым, но если я уменьшу масштаб несколько раз, то все будет в порядке. Вот сайт, на котором я его использую:

www.confide.re/confide

кто-нибудь знает, что может быть причиной этого и как это исправить? Спасибо

Я сделал svg в Illustrator CS5, если это имеет значение.

9
css google-chrome html svg xml

3 ответов

причина в том, что вы используете процент для установки ширины элемента, в котором находится логотип (родительский элемент)

это означает, что логотип сначала растрируется из вектора во внутреннее растровое изображение, которое составляет 100% от размера, установленного для изображения. Затем в вашем правиле css # header вы используете 80% для элемента заголовка, внутри которого находится изображение.

что происходит, так это то, что внутреннее растровое изображение, используемое браузером для хранения растеризованного векторного изображения, масштабируется от 100% до 80% вместо повторная растеризация вектора. Поскольку это включает интерполяцию, это приведет к некоторым размытым краям. Это выбор производительности, сделанный браузерами для родительского контента.

раствор для удаления 80% масштабирование заголовка (родителя) элемент. Вы можете добавить новое правило и установить ширину изображения следующим образом (вы можете, конечно, использовать процент - пока родительский элемент не масштабируется, это не будет проблемой) - f.ex:

#header {
    margin: 0 auto;
    padding: 0;
    text-align: center;
    /*width: 80%;*/
}

.header-img {
    width:200px;
    height:auto;
    }

затем в HTML-код:

<img class="header-img" src="logo.svg" alt="" />

(вы могли бы установить #header img {...} но это потеря производительности).

вот доказательство концепции (небольшая разница от 100 до 80%, но видимая-сравните последнюю часть):

использование растрового растрового изображения 100% для размера логотипа, масштабируемого браузером до 80%:

enter image description here

удаление 80% из элемента заголовка (родительского) и, например, установка ширины изображения в 200px:

enter image description here

8

Я не считаю, что есть проблема с вашим SVG, поскольку это 100% вектор (без встроенных PNG fies).

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

на высоком разрешении MacBook pro и iPhone retina ваш логотип выглядит отлично и четко.

Он увеличивает OK тоже.

enter image description here

2

поместите этот код на страницу, использующую Panzoom:

<style>
        .panzoom {
            -webkit-backface-visibility: initial !important;
            -webkit-transform-origin: 50% 50%;
        }
</style>
1