{"id":375,"date":"2026-07-22T12:49:11","date_gmt":"2026-07-22T10:49:11","guid":{"rendered":"https:\/\/www.lukaswojcik.com\/blog\/?p=375"},"modified":"2026-10-24T00:50:00","modified_gmt":"2026-10-23T22:50:00","slug":"extrahieren-von-svg-grafiken-aus-websites-konsolenmethode-und-alternativen","status":"publish","type":"post","link":"https:\/\/www.lukaswojcik.com\/blog\/de\/web-entwicklung\/tutorials-de-web-entwicklung\/extrahieren-von-svg-grafiken-aus-websites-konsolenmethode-und-alternativen\/","title":{"rendered":"Extrahieren von SVG-Grafiken aus Websites: Konsolenmethode und Alternativen"},"content":{"rendered":"

Ein SVG kann direkt im HTML stehen oder als eigene Datei geladen werden. Beim Kopieren eines Inline-SVG fehlen h\u00e4ufig die CSS-Regeln der umgebenden Seite. Das Ergebnis hat dann andere Farben oder Konturen. Die folgende Methode \u00fcbernimmt ausgew\u00e4hlte berechnete Stile f\u00fcr einfache, statische SVG-Grafiken.<\/p>\n

1. Die passende Quelle finden<\/h2>\n

Die Entwicklertools lassen sich meist mit F12 oder Strg+Umschalt+I \u00f6ffnen. Im Elemente-Bereich zeigt die Untersuchung, ob ein echtes <svg><\/code>, ein <img><\/code> oder ein CSS-Hintergrund vorliegt. Eine externe SVG-Datei l\u00e4sst sich \u00fcber die Ressourcenadresse speichern; im Netzwerkbereich hilft die Suche nach \u201esvg\u201c. Der Filter \u201eImg\u201c zeigt nicht jede m\u00f6gliche Ladeart.<\/p>\n

Bei Inline-SVG kopiert \u201eouterHTML\u201c die Struktur. CSS-Regeln au\u00dferhalb des kopierten Knotens werden dabei nicht mitgenommen. Inline-SVG kann urspr\u00fcnglich durchaus aus einer Datei stammen; f\u00fcr die eingebettete Darstellung muss jedoch keine separate Download-URL existieren.<\/p>\n

\"Inline-SVG-Export
Inline-SVG l\u00e4sst sich aus dem Dokument kopieren. Ausgew\u00e4hlte Stile verbessern den statischen Export; externe Abh\u00e4ngigkeiten bleiben zu pr\u00fcfen.<\/figcaption><\/figure>\n

2. Eine statische Kopie exportieren<\/h2>\n

Das Konsolenbeispiel w\u00e4hlt das erste Inline-SVG. Vor dem Ausf\u00fchren sollte der Selektor auf die gew\u00fcnschte Grafik eingegrenzt werden, etwa svg#logo<\/code>. In Chrome verweist $0<\/code> auf das zuletzt untersuchte Element; dabei muss tats\u00e4chlich das SVG-Wurzelelement ausgew\u00e4hlt sein. Der Code ist f\u00fcr vertrauensw\u00fcrdige, einfache Grafiken gedacht und kein SVG-Bereinigungswerkzeug.<\/p>\n

(() => {\n  const source = document.querySelector("svg");\n  if (!source) throw new Error("No inline SVG found");\n  const copy = source.cloneNode(true);\n  const originals = [source, ...source.querySelectorAll("*")];\n  const copies = [copy, ...copy.querySelectorAll("*")];\n  const properties = [\n    "fill", "fill-opacity", "fill-rule", "stroke", "stroke-width",\n    "stroke-opacity", "stroke-linecap", "stroke-linejoin",\n    "stroke-dasharray", "stroke-dashoffset", "color", "opacity",\n    "visibility", "display", "font-family", "font-size", "font-weight",\n    "font-style", "text-anchor", "letter-spacing", "stop-color", "stop-opacity"\n  ];\n  originals.forEach((element, index) => {\n    const styles = getComputedStyle(element);\n    for (const property of properties) {\n      copies[index].style.setProperty(property, styles.getPropertyValue(property));\n    }\n  });\n  const rootStyle = getComputedStyle(source);\n  copy.setAttribute("xmlns", "http:\/\/www.w3.org\/2000\/svg");\n  copy.setAttribute("width", rootStyle.width);\n  copy.setAttribute("height", rootStyle.height);\n  copy.style.width = rootStyle.width;\n  copy.style.height = rootStyle.height;\n  const xml = new XMLSerializer().serializeToString(copy);\n  const url = URL.createObjectURL(new Blob([xml], { type: "image\/svg+xml" }));\n  const link = document.createElement("a");\n  link.href = url;\n  link.download = "exported.svg";\n  document.body.append(link);\n  link.click();\n  link.remove();\n  setTimeout(() => URL.revokeObjectURL(url), 1000);\n})();<\/code><\/pre>\n
Die Kopie umfasst das Wurzelelement und alle Nachfahren. Farben, Deckkraft, Konturst\u00e4rke und ausgew\u00e4hlte Textstile werden festgeschrieben; die aktuelle CSS-Gr\u00f6\u00dfe wird \u00fcbernommen. Die urspr\u00fcngliche Grafik bleibt unver\u00e4ndert. Der Block l\u00e4sst sich erneut ausf\u00fchren, ohne bereits deklarierte Konsolenvariablen zu \u00fcberschreiben. Die tempor\u00e4re Objekt-URL wird anschlie\u00dfend freigegeben.<\/p>\n
3. Ergebnis und Grenzen pr\u00fcfen<\/h2>\n
Die Datei sollte separat ge\u00f6ffnet und mit der urspr\u00fcnglichen Darstellung verglichen werden. Die Liste kopiert nicht s\u00e4mtliche CSS-Eigenschaften. Animationen, CSS-Transformationen, komplexe Filter, externe Schriftarten, Rasterbilder und Verweise auf Definitionen au\u00dferhalb des SVG k\u00f6nnen Nacharbeit erfordern. Ein <use><\/code>-Verweis bleibt nur funktionsf\u00e4hig, wenn das Ziel in der Datei vorhanden oder im Nutzungskontext erreichbar ist.<\/p>\n
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\u00fcfen.<\/p>\n
4. Als Favicon einbinden<\/h2>\n
Eine eigenst\u00e4ndige SVG-Datei l\u00e4sst sich im HTML-Kopf als Icon angeben. Eine zus\u00e4tzliche ICO-Datei dient als R\u00fcckfalloption. Auch eine Vektorgrafik braucht ein gut erkennbares Motiv bei kleinen Abmessungen.<\/p>\n
<link rel="icon" href="\/favicon.ico" sizes="any">\n<link rel="icon" href="\/favicon.svg" type="image\/svg+xml"><\/code><\/pre>\n
\n
Fragen und Antworten<\/h2>\n
Warum fehlen trotz Export noch Farben?<\/h3>\n
M\u00f6glicherweise liegen Definitionen oder Ressourcen au\u00dferhalb der Kopie, etwa ein Farbverlauf in einem anderen SVG. Berechnete Stile l\u00f6sen nicht automatisch alle Abh\u00e4ngigkeiten auf. Auch nicht kopierte CSS-Eigenschaften k\u00f6nnen die Darstellung ver\u00e4ndern.<\/p>\n
Wie funktioniert ein Favicon mit Dunkelmodus?<\/h3>\n
Ein eigener Style-Block kann Farben \u00fcber prefers-color-scheme<\/code> \u00e4ndern. Festgeschriebene Inline-Farben m\u00fcssen daf\u00fcr entfernt oder passend \u00fcberarbeitet werden, damit die betreffenden Regeln greifen. Die Darstellung ist im vorgesehenen Browser zu pr\u00fcfen.<\/p>\n
Erfasst eine Erweiterung jede Grafik automatisch?<\/h3>\n
Nein. Zugriff auf Frames, Komponenten und externe Ressourcen h\u00e4ngt von Berechtigungen und Implementierung ab. F\u00fcr eine einzelne Grafik reichen die Entwicklertools oft aus; eine Erweiterung ist keine Voraussetzung.<\/p>\n<\/div>\n
\n
Quellen<\/h2>\n