svg en ligne dans css

Question

Est-il possible d'utiliser des définitions svg inline dans css?

Je veux dire quelque chose comme:

 .my_class 
  {
  ...
  background-image: <svg>...</svg>;
  ...
  }
 

Answer 1

Oui c'est possible. Essaye ça:

 body { background-image: 
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>");
      }
 

• http://jsfiddle.net/6WAtQ/

(Notez que le contenu SVG doit être échappé par une URL pour que cela fonctionne. Par exemple, # est remplacé par %23 .)

Cela fonctionne dans IE 9 (qui supporte SVG) . Les URL de données fonctionnent également dans les anciennes versions d'IE (avec des limitations), mais elles ne supportent pas nativement SVG.

Answer 2

Un peu en retard, mais si vous avez été allez fou en essayant de l'utiliser inline SVG comme un arrière-plan, l'échappement des suggestions ci-dessus ne font pas assez de travail. Pour l'un, il ne fonctionne pas dans IE, et selon le contenu de votre SVG la technique pourra causer des problèmes dans d'autres navigateurs, comme les FF.

Si vous base64 encode le svg (pas l'url en entier, juste la balise svg et son contenu! ), il fonctionne dans tous les navigateurs. Ici est le même jsfiddle exemple 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 d'enlever toutes les URL de s'échapper avant de les convertir en base64. En d'autres termes, l'exemple ci-dessus a montré color='#fcc " converti à la couleur='%23fcc', vous devriez retourner à #.

La raison pour laquelle base64 fonctionne mieux, c'est qu'il élimine tous les problèmes avec les guillemets simples et doubles et url de s'échapper

Si vous utilisez JS, vous pouvez utiliser la fenêtre.btoa() pour produire votre base64 svg; exemple, de définir une div arrière-plan:

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+"')";

Avec JS vous pouvez générer SVGs à la volée, même en changeant ses paramètres.

Un des meilleurs articles sur l'utilisation de SVG est ici : http://dbushell.com/2013/02/04/a-primer-to-front-end-svg-hacking/

Espérons que cette aide

Mike