CSS рядный UTF-закодирован SVG - 404 Ошибка в Safari 8.0.3

В CSS документ, я использовал UTF-закодирован SVG сниппет для фонового изображения, как так:CSS рядный UTF-закодирован SVG - 404 Ошибка в Safari 8.0.3

body { 
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><circle fill="#529ECC" cx="8" cy="8" r="1"/></svg>'); 
}

SVG изображение отображается нормально однако, в Safari 8.0.3 я получаю ошибку консоли -

`Failed to load resource: the server responded with a status of 404 (Not Found)`

Вот jsbin demo - ошибка консоли показывает только на предварительном просмотре не на странице редактирования (нажмите значок со стрелкой выше панели вывода).

Почему существует ошибка 404 (это не URL-запрос, а строка данных?), И есть ли способ предотвратить это?

Обновление: Я включил версии с кодировкой URL в JSBin, не исправляет его. Base64 encode останавливает ошибку, но я хочу использовать UTF согласно статье this.

источник

2015-02-02 MachineElf

Синтаксис URL-адреса данных неверен, он должен быть закодирован в url (или закодирован в base64).

Например # незаконен, кодирование URL будет преобразовать его в% 23

источник

2015-02-02 22:28:20

Thx, я попробовал кодирование base64 и останавливает ошибку. Однако, согласно этой статье http://css-tricks.com/probably-dont-base64-svg/, безопасно и немного предпочтительнее кодировать CSS SVG как UTF. Так что мне интересно, если это всего лишь ошибка Safari? – MachineElf

@MachineElf Любой браузер, который * не * разбивает символ '#', является ошибкой (в настоящее время Chrome/Opera являются единственными, которые позволяют). Вы всегда должны URL-кодировать '#', если хотите, чтобы он был частью URL-адреса, а не началом целевого фрагмента. Для IE, в частности, вам также необходимо кодировать всю строку (пробелы и угловые скобки). Использовать кодировку URL или кодировку base-64 - это скорее открытая дискуссия; base-64 изначально короче, но URL-кодирование может быть меньше после сжатия gzip, потому что существует много повторяющихся последовательностей. – AmeliaBR

Thx снова, я пробовал URL-кодирование всех и некоторые строки UTF (например, # chara), но не могу остановить ошибку 404. Вы можете увидеть результаты здесь - http://jsbin.com/fadihu/8/edit?css,output - ошибка консоли Safari 8 отображается в режиме предварительного просмотра (кнопка со стрелкой над панелью вывода). – MachineElf

CSS рядный UTF-закодирован SVG - 404 Ошибка в Safari 8.0.3

ответ

Смежные вопросы