Inline-SVG in CSS

Question

Ist es möglich, eine Inline-SVG-Definition in CSS zu verwenden?

Ich meine so etwas wie:

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

Answer 1

Ja, das ist möglich. Versuchen Sie dies:

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/

(Beachten Sie, dass der SVG-Inhalt url-escaped sein muss, damit dies funktioniert, z. B. # wird ersetzt durch %23 .)

Dies funktioniert im IE 9 (der SVG unterstützt) . Data-URLs funktionieren auch in älteren Versionen des IE (mit Einschränkungen), aber sie unterstützen SVG nicht von Haus aus.

Answer 2

Falls jemand von Ihnen bei dem Versuch verrückt geworden ist, die Inline SVG als Hintergrund Die obigen Vorschläge zum Escaping funktionieren nicht ganz. Zum einen funktioniert es nicht in IE, und je nach dem Inhalt Ihrer SVG die Technik wird Probleme in anderen Browsern, wie FF verursachen.

Wenn Sie die svg-Datei mit base64 kodieren (nicht die gesamte URL, sondern nur das svg-Tag und dessen Inhalt!), funktioniert sie in allen Browsern. Hier ist das gleiche jsfiddle Beispiel in base64: http://jsfiddle.net/vPA9z/3/

Das CSS sieht nun wie folgt aus:

body { background-image: 
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+PGxpbmVhckdyYWRpZW50IGlkPSdncmFkaWVudCc+PHN0b3Agb2Zmc2V0PScxMCUnIHN0b3AtY29sb3I9JyNGMDAnLz48c3RvcCBvZmZzZXQ9JzkwJScgc3RvcC1jb2xvcj0nI2ZjYycvPiA8L2xpbmVhckdyYWRpZW50PjxyZWN0IGZpbGw9J3VybCgjZ3JhZGllbnQpJyB4PScwJyB5PScwJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJy8+PC9zdmc+");

Denken Sie daran, vor der Konvertierung in base64 alle URL-Escapings zu entfernen. Mit anderen Worten, im obigen Beispiel wurde color='#fcc' in color='%23fcc' konvertiert, Sie sollten zu # zurückkehren.

Der Grund, warum base64 besser funktioniert, ist, dass es alle Probleme mit einfachen und doppelten Anführungszeichen und url escaping eliminiert

Wenn Sie JS verwenden, können Sie window.btoa() um Ihre base64 svg zu erzeugen; und wenn das nicht funktioniert (es könnte sich über ungültige Zeichen in der Zeichenkette beschweren), können Sie einfach verwenden https://www.base64encode.org/ .

Beispiel für die Einstellung eines Div-Hintergrunds:

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>

Mit JS können Sie SVGs im laufenden Betrieb erzeugen und sogar die Parameter ändern.

Einer der besseren Artikel über die Verwendung von SVG ist hier zu finden: http://dbushell.com/2013/02/04/a-primer-to-front-end-svg-hacking/

Answer 3

Meine Lösung war https://yoksel.github.io/url-encoder/ Sie fügen einfach Ihr svg ein und erhalten den Hintergrundbild-Code zurück

Answer 4

Für diejenigen, die immer noch Schwierigkeiten haben, habe ich es geschafft, dies auf allen modernen Browsern ab IE11 zum Laufen zu bringen.

base64 war keine Option für mich, weil ich SASS verwenden wollte, um SVG-Symbole auf der Grundlage einer bestimmten Farbe zu erzeugen. Zum Beispiel: @include svg_icon(heart, #FF0000); Auf diese Weise kann ich ein bestimmtes Symbol in einer beliebigen Farbe erstellen und muss die SVG-Form nur einmal in das CSS einbetten. (mit base64 müssten Sie die SVG in jeder einzelnen Farbe, die Sie verwenden möchten, einbetten)

Es gibt drei Dinge, die Sie beachten müssen:

1. URL-CODIEREN SIE IHR SVG Wie bereits von anderen vorgeschlagen, müssen Sie Ihre gesamte SVG-Zeichenkette URL-kodieren, damit sie im IE11 funktioniert. In meinem Fall habe ich die Farbwerte in Feldern wie fill="#00FF00" y stroke="#FF0000" und ersetzte sie durch eine SASS-Variable fill="#{$color-rgb}" so dass diese durch die gewünschte Farbe ersetzt werden können. Sie können verwenden jeder Online-Konverter um den Rest der Zeichenkette zu verschlüsseln. Am Ende erhalten Sie eine SVG-Zeichenkette wie diese:

   %3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20494.572%20494.572%27%20width%3D%27512%27%20height%3D%27512%27%3E%0A%20%20%3Cpath%20d%3D%27M257.063%200C127.136%200%2021.808%20105.33%2021.808%20235.266c0%2041.012%2010.535%2079.541%2028.973%20113.104L3.825%20464.586c345%2012.797%2041.813%2012.797%2015.467%200%2029.872-4.721%2041.813-12.797v158.184z%27%20fill%3D%27# {$color-rgb} %27%2F%3E%3C%2Fsvg%3E

---

2. DEN UTF8-ZEICHENSATZ IN DER DATENURL WEGLASSEN Wenn Sie Ihre Daten-URL erstellen, müssen Sie den Zeichensatz weglassen, damit sie im IE11 funktioniert.

   ノット Hintergrundbild: url( data:image/svg+xml;utf-8,%3Csvg%2....)
   BUT Hintergrundbild: url( data:image/svg+xml,%3Csvg%2....)

---

3. RGB() ANSTATT HEX-Farben VERWENDEN Firefox mag kein # im SVG-Code. Sie müssen also Ihre Hex-Farbwerte durch RGB-Werte ersetzen.

   ノット fill="#FF0000"
   BUT fill="rgb(255,0,0)"

In meinem Fall verwende ich SASS, um einen gegebenen Hex-Wert in einen gültigen RGB-Wert umzuwandeln. Wie in den Kommentaren hervorgehoben, ist es am besten, URL kodieren Sie Ihre RGB-Zeichenfolge als gut (so Komma wird %2C)

@mixin svg_icon($id, $color) {
   $color-rgb: "rgb(" + red($color) + "%2C" + green($color) + "%2C" + blue($color) + ")";
   @if $id == heart {
      background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20494.572%20494.572%27%20width%3D%27512%27%20height%3D%27512%27%3E%0A%20%20%3Cpath%20d%3D%27M257.063%200C127.136%200%2021.808%20105.33%2021.808%20235.266c0%204%27%20fill%3D%27#{$color-rgb}%27%2F%3E%3C%2Fsvg%3E');
   }
}

---

Mir ist klar, dass dies vielleicht nicht die beste Lösung für sehr komplexe SVGs ist (Inline-SVG ist in diesem Fall nie die beste Lösung), aber für flache Icons mit nur ein paar Farben funktioniert das wirklich gut.

Ich war in der Lage, ein ganzes Sprite-Bitmap wegzulassen und es durch Inline-SVG in meinem CSS zu ersetzen, was nach der Komprimierung nur etwa 25kb ausmachte. Es ist also eine gute Möglichkeit, die Anzahl der Anfragen zu begrenzen, die Ihre Website zu tun hat, ohne Ihre CSS-Datei aufzublähen.

Answer 5

Unter Mac/Linux können Sie mit diesem einfachen Bash-Befehl eine SVG-Datei in einen base64-kodierten Wert für das CSS-Hintergrundattribut umwandeln:

echo "background: transparent url('data:image/svg+xml;base64,"$(openssl base64 < path/to/file.svg)"') no-repeat center center;"

Getestet unter Mac OS X. Auf diese Weise vermeiden Sie auch das URL-Escaping-Durcheinander.

Denken Sie daran, dass die base64-Kodierung einer SVG-Datei deren Größe erhöht, siehe css-tricks.com Blogbeitrag .