Extrahieren von SVG-Grafiken aus Websites: Konsolenmethode und Alternativen

Ein SVG kann direkt im HTML stehen oder als eigene Datei geladen werden. Beim Kopieren eines Inline-SVG fehlen häufig die CSS-Regeln der umgebenden Seite. Das Ergebnis hat dann andere Farben oder Konturen. Die folgende Methode übernimmt ausgewählte berechnete Stile für einfache, statische SVG-Grafiken.

1. Die passende Quelle finden

Die Entwicklertools lassen sich meist mit F12 oder Strg+Umschalt+I öffnen. Im Elemente-Bereich zeigt die Untersuchung, ob ein echtes <svg>, ein <img> oder ein CSS-Hintergrund vorliegt. Eine externe SVG-Datei lässt sich über die Ressourcenadresse speichern; im Netzwerkbereich hilft die Suche nach „svg“. Der Filter „Img“ zeigt nicht jede mögliche Ladeart.

Bei Inline-SVG kopiert „outerHTML“ die Struktur. CSS-Regeln außerhalb des kopierten Knotens werden dabei nicht mitgenommen. Inline-SVG kann ursprünglich durchaus aus einer Datei stammen; für die eingebettete Darstellung muss jedoch keine separate Download-URL existieren.

2. Eine statische Kopie exportieren

Das Konsolenbeispiel wählt das erste Inline-SVG. Vor dem Ausführen sollte der Selektor auf die gewünschte Grafik eingegrenzt werden, etwa svg#logo. In Chrome verweist $0 auf das zuletzt untersuchte Element; dabei muss tatsächlich das SVG-Wurzelelement ausgewählt sein. Der Code ist für vertrauenswürdige, einfache Grafiken gedacht und kein SVG-Bereinigungswerkzeug.

(() => {
  const source = document.querySelector("svg");
  if (!source) throw new Error("No inline SVG found");
  const copy = source.cloneNode(true);
  const originals = [source, ...source.querySelectorAll("*")];
  const copies = [copy, ...copy.querySelectorAll("*")];
  const properties = [
    "fill", "fill-opacity", "fill-rule", "stroke", "stroke-width",
    "stroke-opacity", "stroke-linecap", "stroke-linejoin",
    "stroke-dasharray", "stroke-dashoffset", "color", "opacity",
    "visibility", "display", "font-family", "font-size", "font-weight",
    "font-style", "text-anchor", "letter-spacing", "stop-color", "stop-opacity"
  ];
  originals.forEach((element, index) => {
    const styles = getComputedStyle(element);
    for (const property of properties) {
      copies[index].style.setProperty(property, styles.getPropertyValue(property));
    }
  });
  const rootStyle = getComputedStyle(source);
  copy.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  copy.setAttribute("width", rootStyle.width);
  copy.setAttribute("height", rootStyle.height);
  copy.style.width = rootStyle.width;
  copy.style.height = rootStyle.height;
  const xml = new XMLSerializer().serializeToString(copy);
  const url = URL.createObjectURL(new Blob([xml], { type: "image/svg+xml" }));
  const link = document.createElement("a");
  link.href = url;
  link.download = "exported.svg";
  document.body.append(link);
  link.click();
  link.remove();
  setTimeout(() => URL.revokeObjectURL(url), 1000);
})();

Die Kopie umfasst das Wurzelelement und alle Nachfahren. Farben, Deckkraft, Konturstärke und ausgewählte Textstile werden festgeschrieben; die aktuelle CSS-Größe wird übernommen. Die ursprüngliche Grafik bleibt unverändert. Der Block lässt sich erneut ausführen, ohne bereits deklarierte Konsolenvariablen zu überschreiben. Die temporäre Objekt-URL wird anschließend freigegeben.

3. Ergebnis und Grenzen prüfen

Die Datei sollte separat geöffnet und mit der ursprünglichen Darstellung verglichen werden. Die Liste kopiert nicht sämtliche CSS-Eigenschaften. Animationen, CSS-Transformationen, komplexe Filter, externe Schriftarten, Rasterbilder und Verweise auf Definitionen außerhalb des SVG können Nacharbeit erfordern. Ein <use>-Verweis bleibt nur funktionsfähig, wenn das Ziel in der Datei vorhanden oder im Nutzungskontext erreichbar ist.

Die Suche im Hauptdokument durchquert weder iframe-Dokumente noch Shadow DOM. Die passende Dokument- oder Komponentenquelle muss separat untersucht werden. Ein geklontes SVG kann zudem vorhandene Skripte, Ereignisattribute und externe Verweise enthalten; vor einer Einbindung sind solche Inhalte gesondert zu prüfen.

4. Als Favicon einbinden

Eine eigenständige SVG-Datei lässt sich im HTML-Kopf als Icon angeben. Eine zusätzliche ICO-Datei dient als Rückfalloption. Auch eine Vektorgrafik braucht ein gut erkennbares Motiv bei kleinen Abmessungen.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">