Firefox SVG графика размыта

Question

У меня адаптивный веб-дизайн с логотипом / изображением 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.

Есть идеи, как это исправить?

Answer 1

Обновление 2013-10: подтверждено исправлено в v24 , который теперь попал в канал релиза

---

Обновление 2013-07: Ошибка устранена! Исправление превратится в Firefox 24, который будет выпущен где-то между сентябрем и октябрем

---

Я где-то читал о несколько простом решении этой проблемы, которое теперь использую в своих проектах (добавлю источник, когда найду его снова):

просто установите ширину и высоту svg-контейнера на максимальные значения, которые изображение, вероятно, будет иметь, и у вас все в порядке. Работает во всех современных браузерах просто отлично. Единственное ограничение заключается в том, что Firefox и Opera (да, те же два браузера, которые вызвали этот беспорядок) не работают с очень большими изображениями -> не используют слишком высокие значения для измерений

оригинальный файл:

<svg width="64px" height="128px"> 

скажем, максимальная ширина будет в 3 раза больше, тогда ваш SVG должен содержать это:

<svg width="192px" height="384px"> 

(да, узел svg может иметь больше атрибутов ...)

Причина, по которой это работает, заключается в том, что Opera и FF отображают SVG перед изменением их размера, а не наоборот, как это должно быть сделано с вектором gfx

ОБНОВЛЕНИЕ: заслуги Дэвида Бушелла, написавшего замечательную статью о Независимости разрешения с SVG .

Answer 2

Проблема в том, что когда вы используете SVG в качестве фонового изображения, Firefox выбирает, какой размер визуализировать векторы, а затем масштабирует эти пиксели на основе изображения по мере необходимости.Вот связанная ошибка: https://bugzilla.mozilla.org/show_bug.cgi?id=600207

Самое простое решение здесь - это не использовать SVG в качестве фонового изображения, а встроить SVG напрямую или ссылаться на него с помощью тега <img>.

Если вы создадите рабочий тестовый пример, показывающий проблему и файлы, мы поможем вам с реальным кодом и исправлениями.

Answer 3

Чтобы SVG-изображение масштабировалось до размера его контейнера , убедитесь, что у вашего тега svg установлено viewBox:

<svg viewBox="0 0 347 189">

, но не width или height атрибутов, т. Е. Нет:

<svg width="347px" height="189px" viewBox="0 0 347 189">

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

Answer 4

Я сам столкнулся с точно такой же проблемой. Мне удалось исправить это в Firefox, отредактировав SVG в текстовом редакторе и изменив значение атрибута width элемента <svg> на 100%, но оставив все остальные значения атрибута в покое. В вашем конкретном примере вот что нужно сделать:

<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" 
    x="0px"
    y="0px"
    width="100%"
    height="189px" 
    viewBox="0 0 347 189" 
    enable-background="new 0 0 347 189" 
    xml:space="preserve">

Это сработало для меня и должно сделать то же самое для вас; Однако я не могу быть на 100% без тестового примера.

Примечание: установка ширины и высоты на 100% нарушила рендеринг SVG в Safari в моем конкретном случае. Обязательно установите ширину только на 100%.

Answer 5

Другая похожая «ошибка», которую я обнаружил, была, когда я экспортировал svg из иллюстратора, ширина и высота не были круглыми числами - поэтому, когда я открыл SVG в редакторе, ширина была что-то вроде «100.6789px».Тщательно отредактировав изображение в иллюстраторе сначала для округления чисел, а затем используя одинаковую ширину и высоту для Firefox, он решил нечеткие изображения для меня.

Answer 6

Самое простое решение - увеличить SVG в редакторе векторных изображений, таком как Illustrator. Масштабируйте его до полученного разрешения в браузере (или выше). Поскольку это вектор, его масштабирование не повлияет на размер файла.