Использование SVG данных URI в качестве фонового изображения CSS

Предыстория:

  • Цель: создать треугольную тень, которая может быть применена через CSS и не зависит от масштаба (т.е. вектор, а не растровое изображение).
  • После долгих исследований (я, конечно, открыт для альтернатив) я решил использовать фоновое изображение SVG в качестве uri данных (чтобы избежать дополнительного HTTP-запроса).
  • Я знаю, что это может работать: http://jsfiddle.net/6WAtQ/

Где я застрял:

  • Я создал простой треугольник svg с эффектом размытия Gaussian, если он написан непосредственно в HTML (в отличие от CSS), svg работает отлично: http://jsfiddle.net/RAKWB/

    <svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="f1"> <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> </filter> </defs> <polygon points="200,0 200,200 0,200" filter="url(#f1)"/> </svg>​

  • Итак, я попытался воспроизвести выше (http://jsfiddle.net/6WAtQ/), используя собственный треугольник svg,

  • Я заменил хэш-знаки на "% 23", но без костей

  • Не работает: http://jsfiddle.net/ZPWxK/1/

    body { background-image: url("data:image/svg+xml;utf8,data:image/svg+xml;utf8,<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><filter id="f1"><feGaussianBlur in="SourceGraphic" stdDeviation="5" /></filter></defs><polygon points="200,0 200,200 0,200" filter="url(%23f1)"/></svg>"); }

Мысли?

Ответы

Ответ 1

Посмотрите, как рабочая скрипта имеет двойные кавычки только внутри url(), а затем все содержимое SVG использует одинарные кавычки? Вам нужно сделать то же самое. В противном случае анализатор не знает, где заканчивается содержимое URL.

В качестве альтернативы вы можете заставить URL использовать одинарные кавычки и сохранить содержимое SVG одинаковым.

body { background-image: url('data:image/svg+xml;utf8,<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><filter id="f1"><feGaussianBlur in="SourceGraphic" stdDeviation="5" /></filter></defs><polygon points="200,0 200,200 0,200" filter="url(%23f1)"/></svg>'); }

Ответ 2

Вы также можете использовать кодировку base64 для более чистого формата, даже если это увеличивает фактический размер файла SVG. Смотрите также css-tricks.com post.

то есть:

background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIy NCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxwYXRoIGQ9 Ik0wIDBoMjR2MjRoLTI0eiIgZmlsbD0ibm9uZSIvPgogICAgPHBhdGggZD0iTTEw LjA5IDE1LjU5bDEuNDEgMS40MSA1LTUtNS01LTEuNDEgMS40MSAyLjU4IDIuNTlo LTkuNjd2Mmg5LjY3bC0yLjU4IDIuNTl6bTguOTEtMTIuNTloLTE0Yy0xLjExIDAt MiAuOS0yIDJ2NGgydi00aDE0djE0aC0xNHYtNGgtMnY0YzAgMS4xLjg5IDIgMiAy aDE0YzEuMSAwIDItLjkgMi0ydi0xNGMwLTEuMS0uOS0yLTItMnoiLz4KPC9zdmc+ Cg==');

Вы можете использовать эту команду bash (протестировано на MacOS X), чтобы легко сгенерировать свойство фона CSS:

echo "background: url('data:image/svg+xml;base64,"$(openssl base64 < Downloads/material-design-icons-1.0.0/action/svg/ic_exit_to_app_24px.svg)"');"

Ответ 3

Убедитесь, что процентное кодирование в URI данных не закодировано с помощью base64.

Например, для SVG кодируйте так:

body { 
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20class%3D%22shadow%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%3E%3Cpolygon%20style%3D%22stroke%3A%23252423%3Bfill%3A%23252423%3B%22%20points%3D%220%2C200%200%2C0%20200%2C0%22%2F%3E%3C%2Fsvg%3E'); 
}

Это эквивалентно следующему SVG:

<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"><polygon style="stroke:#252423;fill:#252423;" points="0,200 0,0 200,0"/></svg>

Для процентного кодирования изображения вы можете использовать следующий код JavaScript:

console.log(encodeURIComponent('<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"><polygon style="stroke:#252423;fill:#252423;" points="0,200 0,0 200,0"/></svg>'))