Die SVG-Spezifikation wurde vor Kurzem aktualisiert, um die Unterstützung für data:-URLs im SVG-Element <use> einzustellen.
Hierdurch wird die Sicherheit der Webplattform und die Kompatibilität zwischen Browsern verbessert, da Webkit keine data:-URLs im SVG-Element <use> unterstützt.
Grund für die Entfernung
Mit dem SVG-Element <use> können externe SVG-Bilder abgerufen und in das aktuelle Dokument geklont werden. Da es sich um eine leistungsstarke Funktion handelt, ist sie auf SVG-Bilder mit demselben Ursprung beschränkt.
data:-URLs werden jedoch als Ressourcen mit demselben Ursprung behandelt, die mehrere Sicherheitslücken verursachen, z. B. die Umgehung von vertrauenswürdigen Typen und der Sanitizer API.
Diese Sicherheitslücken führten zu einer Diskussion darüber, wie sie am besten behoben werden können. Wir haben uns unter den Browseranbietern (Mozilla und Apple) darauf geeinigt, dass die Unterstützung für data:-URLs im SVG-Element <use> am besten eingestellt wird.
Für Websites, die data:-URLs im SVG-<use>-Element verwenden, gibt es mehrere Alternativen.
SVG-Bilder mit demselben Ursprung verwenden
Sie können SVG-Bilder am selben Ursprung mit dem Element <use> laden.
<div class="icon">
<svg width="1em" height="1em">
<use xlink:href="svgicons.svg#user-icon"></use>
</svg>
</div>
Inline-SVG-Bilder verwenden
Sie können mit dem <use>-Element auf Inline-SVG-Bilder verweisen.
<svg style="display:none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="user-icon" viewBox="0 0 32 32">
<path d="M25.333 9.335c0 5.153-4.179 9.333-9.333 9.333s-9.333-4.18-9.333-9.333c0-5.156 4.179-9.335 9.333-9.335s9.333 4.179 9.333 9.335zM23.203 18.908c-2.008 1.516-4.499 2.427-7.203 2.427-2.707 0-5.199-0.913-7.209-2.429-5.429 2.391-8.791 9.835-8.791 13.095h32c0-3.231-3.467-10.675-8.797-13.092z">
</symbol>
<!-- And potentially many more icons -->
</defs>
</svg>
<div class="icon">
<svg width="1em" height="1em">
<use xlink:href="#user-icon"></use>
</svg>
</div>
SVG-Bilder mit blob:-URLs verwenden
Wenn Sie keine Kontrolle über die HTML- oder Ressourcen desselben Ursprungs einer Seite haben (z. B. JavaScript-Bibliotheken), können Sie SVG-Bilder mit blob:-URLs im <use>-Element laden.
const svg_content = `<svg style="display:none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="user-icon" viewBox="0 0 32 32">
<path d="M25.333 9.335c0 5.153-4.179 9.333-9.333 9.333s-9.333-4.18-9.333-9.333c0-5.156 4.179-9.335 9.333-9.335s9.333 4.179 9.333 9.335zM23.203 18.908c-2.008 1.516-4.499 2.427-7.203 2.427-2.707 0-5.199-0.913-7.209-2.429-5.429 2.391-8.791 9.835-8.791 13.095h32c0-3.231-3.467-10.675-8.797-13.092z">
</symbol>
<!-- And potentially many more icons -->
</defs>
</svg>`;
const blob = new Blob([svg_content], {type: 'image/svg+xml'});
const url = URL.createObjectURL(blob);
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
use.setAttribute('href', url + '#user-icon');
svg.appendChild(use);
document.body.appendChild(svg);
Live-Beispiele
Live-Beispiele für diese Alternativen finden Sie auf GitHub.