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.
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. –
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? –
Hängt davon ab, wo Sie es hinstellen. Die offensichtliche Erweiterung wäre .svg, oder? Ich verstehe die letzte Frage nicht wirklich. –