Un peu tard, mais si certains d'entre vous sont devenus fous en essayant d'utiliser le SVG en ligne comme arrière-plan , les suggestions d'échappement ci-dessus ne fonctionnent pas tout à fait. D'une part, cela ne fonctionne pas dans IE, et selon le contenu de votre SVG, la technique causera des problèmes dans d'autres navigateurs, comme FF.
Si vous codez en base64 le svg (pas l'url entière, juste la balise svg et son contenu!) Cela fonctionne dans tous les navigateurs. Voici le même exemple jsfiddle en base64: http://jsfiddle.net/vPA9z/3/
Le CSS ressemble maintenant à ceci:
body { background-image:
url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+PGxpbmVhckdyYWRpZW50IGlkPSdncmFkaWVudCc+PHN0b3Agb2Zmc2V0PScxMCUnIHN0b3AtY29sb3I9JyNGMDAnLz48c3RvcCBvZmZzZXQ9JzkwJScgc3RvcC1jb2xvcj0nI2ZjYycvPiA8L2xpbmVhckdyYWRpZW50PjxyZWN0IGZpbGw9J3VybCgjZ3JhZGllbnQpJyB4PScwJyB5PScwJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJy8+PC9zdmc+");
N'oubliez pas de supprimer toute URL s'échappant avant la conversion en base64. En d'autres termes, l'exemple ci-dessus a montré color = '# fcc' converti en color = '% 23fcc', vous devez revenir à #.
La raison pour laquelle base64 fonctionne mieux est qu'il élimine tous les problèmes avec les guillemets simples et doubles et l'échappement d'url
Si vous utilisez JS, vous pouvez utiliser window.btoa()
pour produire votre svg base64; et si cela ne fonctionne pas (il pourrait se plaindre de caractères non valides dans la chaîne), vous pouvez simplement utiliser https://www.base64encode.org/ .
Exemple pour définir un arrière-plan 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>
Avec JS, vous pouvez générer des SVG à la volée, même en modifiant ses paramètres.
L'un des meilleurs articles sur l'utilisation de SVG est ici: http://dbushell.com/2013/02/04/a-primer-to-front-end-svg-hacking/
J'espère que cela t'aides
Mike