Stylus Inline SVG-Daten-URI ohne base64-Codierung

Question

Wie kann ich ein SVG-Daten-URI in CSS einbetten, indem der Präprozessor Stylus verwendet wird, ohne dass das SVG Base64-codiert ist?

So:

background: url('data:image/svg+xml;utf8,<svg>[...]</svg>'); 

statt dessen:

background: url('data:image/svg+xml;base64,PD94bWwg[...]'); 

Normaly habe ich verwendet stylus.url() Bilder einbetten, aber es wird auch Base64 kodieren SVGs.

Ich möchte Daten anstelle von externen Dateien verwenden, um Dateianfragen zu speichern. Und ich habe festgestellt, dass Base64-Codierung SVGs Bytes tatsächlich hinzufügt, anstatt die Größe zu reduzieren.

Ich kann keine Methode zum Einbetten der SVG wie sie ist finden.

Answer 1

Da ich keinen etablierten Weg finden konnte, musste ich es selbst lösen. Ich schrieb ein einfaches Knotenmodul, das stylus.url() umschließt, aber ersetzt, wie SVGs inline sind.

Link zu dem Modul: https://www.npmjs.com/package/stylus-inline-svg

Mit Ausnahme einiger Kontrollen im Grunde tut es dies:

found = stylus.utils.lookup(url.string, options.paths); 

if(!found) return literal; 

buf = fs.readFileSync(found); 

buf = String(buf) 
    .replace(/<\?xml(.+?)\?>/, '') 
    .replace(/^\s+|\s+$/g, '') 
    .replace(/(\r\n|\n|\r)/gm, ''); 

return new stylus.nodes.Literal("url('data:image/svg+xml;utf8," + buf + "')"); 

Answer 2

Stylus jetzt diese Funktionalität eingebaut:

http://stylus-lang.com/docs/functions.url.html

Die embedurl Funktion mit utf8 Unterstützung wurde in Version 0.54.0 hinzugefügt am 5. März 2016.

Answer 3

Verwenden CSS Wörtliche:

@css { 
    .svg { 
     background: url('data:image/svg+xml;base64,PD94bWwg[...]'); 
    } 
} 

Kompilieren zu:

.svg { 
     background: url('data:image/svg+xml;base64,PD94bWwg[...]'); 
    }