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 im aktuellen 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 desselben Ursprungs behandelt, was zu mehreren Sicherheitslücken geführt hat, z. B. zu Umgehung der Trusted Types 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, auf denen data:-URLs im SVG-Element <use> verwendet werden, gibt es mehrere Alternativen.
SVG-Bilder vom selben Ursprung verwenden
Sie können SVG-Bilder desselben Ursprungs 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.