Extrahieren von SVG-Grafiken aus Websites: Konsolenmethode und Alternativen
Das Extrahieren von skalierbaren Vektorgrafiken (SVGs) aus Websites kann problematisch sein, insbesondere wenn die Formatierung über externe CSS-Stylesheets erfolgt. Beim standardmäßigen Kopieren gehen häufig Farben und Layout-Eigenschaften verloren. Die folgende Anleitung beschreibt eine JavaScript-basierte Methode zum Extrahieren von SVGs mit fest integrierten Stilen (baked-in styles), gefolgt von alternativen Lösungsansätzen und der Einrichtung eines SVG-Favicons.
Methode 1: Das Skript für die Entwicklerkonsole
Diese Methode nutzt die Entwicklerkonsole des Browsers. Das Skript erfasst ein SVG, erstellt einen Klon, wendet die berechneten CSS-Stile (wie Füllung, Kontur und Deckkraft) explizit auf die geklonten Elemente an und startet automatisch den Download der vollständigen Datei.
- Die Entwicklertools öffnen (F12 oder Strg+Umschalt+I).
- Zum Tab Konsole (Console) wechseln.
- Den folgenden Code einfügen und mit Enter ausführen:
// 1. Das SVG-Element anvisieren (bei mehreren SVGs auf der Seite muss der Selektor angepasst werden)
const svgElement = document.querySelector("svg");
// 2. Das Element klonen, um die Live-Webseite nicht zu verändern
const clonedSvg = svgElement.cloneNode(true);
// 3. Alle Elemente finden, die Farbstile enthalten (Pfade, Kreise, Formen)
const sourceElements = svgElement.querySelectorAll("*");
const clonedElements = clonedSvg.querySelectorAll("*");
// 4. Berechnete Stile (Farben, Füllungen, Konturen) auf das geklonte SVG kopieren
sourceElements.forEach((sourceEl, index) => {
const clonedEl = clonedElements[index];
const computedStyle = window.getComputedStyle(sourceEl);
// Farb- und Layoutdefinitionen explizit kopieren
clonedEl.style.fill = computedStyle.fill;
clonedEl.style.stroke = computedStyle.stroke;
clonedEl.style.color = computedStyle.color;
clonedEl.style.opacity = computedStyle.opacity;
});
// 5. Das geklonte SVG mit den integrierten Stilen serialisieren
const svgString = new XMLSerializer().serializeToString(clonedSvg);
const svgBlob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
// 6. Die Datei herunterladen
const downloadLink = document.createElement("a");
downloadLink.href = URL.createObjectURL(svgBlob);
downloadLink.download = "colored-image.svg";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);Alternative Methoden zur SVG-Extraktion
Wenn das Kopieren berechneter Stile nicht zwingend erforderlich ist, stehen andere Methoden zur Verfügung:
- Element untersuchen (outerHTML kopieren): Ein Rechtsklick auf das SVG auf der Webseite, Untersuchen auswählen, ein Rechtsklick auf das markierte
<svg>-Tag im DOM-Baum und Kopieren > outerHTML kopieren wählen. Dieser Code kann in einer lokalen .svg-Datei gespeichert werden. - Netzwerk-Tab: Die Entwicklertools öffnen, zum Tab Netzwerk navigieren, nach Img filtern und die Seite neu laden. Als externe Dateien geladene SVGs werden hier aufgelistet und können direkt heruntergeladen werden.
- Browser-Erweiterungen: Spezielle Erweiterungen wie “SVG Grabber” können automatisch alle auf einer Webseite vorhandenen SVG-Assets erfassen und herunterladen.
Ein SVG als Favicon verwenden
Die Implementierung einer SVG-Datei als Website-Favicon erfordert das Hinzufügen eines spezifischen Link-Tags in das HTML-Dokument. Dieser Ansatz bietet unbegrenzte Skalierbarkeit und gestochen scharfe Darstellung auf hochauflösenden Bildschirmen.
Der folgende Code muss in den <head>-Bereich des HTML-Dokuments eingefügt werden:
<link rel="icon" href="/pfad/zum/favicon.svg" type="image/svg+xml">Für eine maximale Kompatibilität mit älteren Systemen wird oft empfohlen, zusätzlich zur SVG-Deklaration eine standardmäßige .ico-Datei bereitzustellen.
Quellen
Passend dazu
