У меня есть отзывчивый веб-дизайн с логотипом/изображением SVG, который является динамическим с его контейнером. Все основные браузеры, похоже, очень хорошо поддерживают SVG.
Мой SVG динамический, поэтому, если я увеличиваю окно браузера, SVG делает это тоже. В Chrome и IE9 он работает как шарм. В Firefox SVG размывается в некоторых размерах. Но я не могу сказать, что все это время размыто, когда оно превышает первоначальный размер SVG. Кажется, что это не значит, что вы все время пересматриваете правильно, пока я расширяю окно браузера.
То, что это выглядит иногда (посмотрите на fullsize, чтобы увидеть разницу):
Возможно, я использую неправильный способ его встраивания. Вот как выглядят мои CSS и HTML:
<div id="logo"></div>
CSS
#logo {
background-image: url('http://dl.dropbox.com/u/569168/jess.svg');
height: 22em;
background-repeat: no-repeat;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
Возьмите SVG со ссылкой в CSS, если вы хотите посмотреть на нее. Это сделано с помощью Adobe Illustrator.
Любая идея, как это исправить?