Трохи пізно, але якщо хтось із вас зійшов з розуму, намагаючись використати вбудований SVG як фон , подані вище пропозиції не дуже працюють. Для одного він не працює в IE, і залежно від вмісту вашого SVG техніка може спричинити неполадки в інших браузерах, як-от FF.
Якщо ви base64 кодуєте svg (не весь URL, а лише тег svg та його вміст!), Він працює у всіх браузерах. Ось той самий приклад jsfiddle в base64: http://jsfiddle.net/vPA9z/3/
Тепер CSS виглядає так:
body { background-image:
url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+PGxpbmVhckdyYWRpZW50IGlkPSdncmFkaWVudCc+PHN0b3Agb2Zmc2V0PScxMCUnIHN0b3AtY29sb3I9JyNGMDAnLz48c3RvcCBvZmZzZXQ9JzkwJScgc3RvcC1jb2xvcj0nI2ZjYycvPiA8L2xpbmVhckdyYWRpZW50PjxyZWN0IGZpbGw9J3VybCgjZ3JhZGllbnQpJyB4PScwJyB5PScwJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJy8+PC9zdmc+");
Не забудьте видалити будь-яку недоступну URL-адресу перед переходом до base64. Іншими словами, вищенаведений приклад показав color = '# fcc', перетворений у color = '% 23fcc', вам слід повернутися до #.
Причина, чому base64 працює краще, полягає в тому, що вона усуває всі проблеми за допомогою одинарних та подвійних лапок та усунення URL-адрес
Якщо ви використовуєте JS, ви можете використовувати window.btoa()
для створення базового64 svg; і якщо вона не працює (може скаржитися на недійсні символи в рядку), ви можете просто скористатися https://www.base64encode.org/ .
Приклад, щоб встановити фон div:
var mySVG = "<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='#F00'/><stop offset='90%' stop-color='#fcc'/> </linearGradient><rect fill='url(#gradient)' x='0' y='0' width='100%' height='100%'/></svg>";
var mySVG64 = window.btoa(mySVG);
document.getElementById('myDiv').style.backgroundImage = "url('data:image/svg+xml;base64," + mySVG64 + "')";
html, body, #myDiv {
width: 100%;
height: 100%;
margin: 0;
}
<div id="myDiv"></div>
За допомогою JS ви можете генерувати SVG на ходу, навіть змінюючи його параметри.
Одна з кращих статей про використання SVG тут: http://dbushell.com/2013/02/04/a-primer-to-front-end-svg-hacking/
Сподіваюсь, це допомагає
Майк