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

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

Мой SVG динамический, поэтому, если я увеличиваю окно браузера, SVG делает это тоже. В Chrome и IE9 он работает как шарм. В Firefox SVG размывается в некоторых размерах. Но я не могу сказать, что все это время размыто, когда оно превышает первоначальный размер SVG. Кажется, что это не значит, что вы все время пересматриваете правильно, пока я расширяю окно браузера.

То, что это выглядит иногда (посмотрите на fullsize, чтобы увидеть разницу): enter image description here

Возможно, я использую неправильный способ его встраивания. Вот как выглядят мои 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.

Любая идея, как это исправить?

Ответы

Ответ 1

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

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

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

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

исходный файл:

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

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

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

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

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

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

Ответ 2

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

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

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

Ответ 3

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

<svg viewBox="0 0 347 189">

но не атрибуты width или height, я e not:

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

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

Вы можете изменить preserveAspectRatio всевозможные интересные способы, если это конкретное поведение не та, которую вы ищете.

Ответ 4

Я столкнулся с одной и той же проблемой сам. Я смог исправить его в Firefox, отредактировав SVG в текстовом редакторе и изменив значение атрибута ширины элемента <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% без тестового примера для работы.

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

Ответ 5

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

Ответ 6

Другим подобным "gotcha", который я обнаружил, было то, что когда я экспортировал svg из иллюстратора, ширина и высота не были круглыми числами, поэтому, когда я открывал SVG в редакторе, ширина была примерно как "100.6789px". Тщательно редактируя изображение в иллюстраторе сначала, чтобы быть круглыми числами, а затем используя ту же ширину и высоту для firefox, он решил для меня нечеткие изображения.