2016-07-14 22 views
0

Ich versuche Daten-URIs für meine SVG-Bilder zu verwenden, in CSS. Der grundlegende Ansatz besteht darin, den vollständigen Daten-URI auf = den Wert der Hintergrundeigenschaft für die CSS-Klasse festzulegen.Inline SVG über URI

.bg { 
    background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>'); 
} 

Meine Frage ist: Wie kann ich die Daten URI-Wert in eine separate Datei zu brechen, und Referenz, die in meinem CSS-Klasse-Datei. Ziel: Trennen Sie alle Daten-URIs von Basisstilen, damit sie das CSS nicht lächerlich lang machen.

Niemals URIs verwendet, um SVGs zu implementieren, so bin auch offen für alle Ideen, die jeder haben kann: Implementierung von SVGs durch URI. Vielen Dank! :)

P.S. Wenn es eine gute Möglichkeit gibt, dies zu automatisieren, verwende ich gulp und bootstrap sass für dieses Projekt.

+1

Sie würden die Daten uri als Datei speichern und dann darauf verweisen. Natürlich ist es zu diesem Zeitpunkt kein Daten-URI mehr, sondern lediglich ein URI. –

+0

Das ist super einfach, aber wie würden Sie die Datei referenzieren. Welche Erweiterung würden Sie der Datei geben? Wie kann ich nur eine SVG innerhalb dieser Datei referenzieren? –

+0

Hängt davon ab, wo Sie es hinstellen. Die offensichtliche Erweiterung wäre .svg, oder? Ich verstehe die letzte Frage nicht wirklich. –

Antwort

1

Ich bevorzuge die Verwendung von grunt-grunticon, die CSS-Klassen für Sie mit Fallback zu PNG bei Bedarf produziert. Dann können Sie scss oder sass verwenden, um das Symbol so zu erweitern, dass Sie es verwenden möchten. Zum Beispiel @extend .icon-undo;

Hoffe das hilft. Viel Glück.