Die SVG-Spezifikation wurde vor Kurzem aktualisiert, um die Unterstützung für data:-URLs im SVG-<use>-Element einzustellen.
Das verbessert die Sicherheit der Webplattform und die Kompatibilität zwischen Browsern, da Webkit keine data:-URLs im SVG-<use>-Element unterstützt.
Grund für die Entfernung
Mit dem SVG-Element <use> können externe SVG-Bilder abgerufen und im aktuellen Dokument geklont werden. Dies ist eine leistungsstarke Funktion, die auf SVG-Bilder mit derselben Herkunft beschränkt ist.
data:-URLs werden jedoch als Ressourcen desselben Ursprungs behandelt, die zu mehreren Sicherheitslücken geführt haben, z. B. Umgehungen von vertrauenswürdigen Typen und der Sanitizer API.
Diese Sicherheitslücken führten zu einer Diskussion über den besten Lösungsansatz. Außerdem haben wir uns zwischen den Browseranbietern Mozilla und Apple geeinigt, dass die Unterstützung für data:-URLs im SVG-<use>-Element am besten entfernt werden sollte.
Für Websites, die data:-URLs im SVG-<use>-Element verwenden, gibt es mehrere Alternativen.
SVG-Bilder mit derselben Quelle verwenden
Mit dem <use>-Element kannst du SVG-Bilder mit derselben Quelle laden.
<div class="icon">
<svg width="1em" height="1em">
<use xlink:href="svgicons.svg#user-icon"></use>
</svg>
</div>
SVG-Inline-Bilder verwenden
Du kannst 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 verwenden: URLs
Wenn du keine Kontrolle über die HTML-Ressourcen oder Ressourcen desselben Ursprungs (z. B. JavaScript-Bibliotheken) einer Seite hast, kannst du 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.