{"id":373,"date":"2026-07-22T12:48:00","date_gmt":"2026-07-22T10:48:00","guid":{"rendered":"https:\/\/www.lukaswojcik.com\/blog\/?p=373"},"modified":"2026-10-24T00:50:00","modified_gmt":"2026-10-23T22:50:00","slug":"tutorial-extracting-svg-graphics-from-websites-the-console-method-and-alternatives","status":"publish","type":"post","link":"https:\/\/www.lukaswojcik.com\/blog\/en\/web-development\/tutorials-en-web-development\/tutorial-extracting-svg-graphics-from-websites-the-console-method-and-alternatives\/","title":{"rendered":"Tutorial: Extracting SVG Graphics from Websites: The Console Method and Alternatives"},"content":{"rendered":"

An SVG can be embedded directly in HTML or loaded as a separate file. Copying an inline SVG often omits CSS rules from the surrounding page, changing colors or outlines. This method copies selected computed styles for simple, static SVG graphics.<\/p>\n

1. Find the appropriate source<\/h2>\n

Developer tools commonly open with F12 or Ctrl+Shift+I. Inspection in the Elements panel distinguishes an actual <svg><\/code> from an <img><\/code> or CSS background. An external SVG can be saved from its resource URL; searching for \u201csvg\u201d in the Network panel helps. The Img filter does not cover every loading method.<\/p>\n

For inline SVG, Copy outerHTML captures the structure. CSS rules outside the copied node are not included. Inline SVG may originally have come from a file; the embedded representation simply need not have a separate download URL.<\/p>\n

\"Inline
Inline SVG can be copied from the document. Selected styles improve a static export; external dependencies still need checking.<\/figcaption><\/figure>\n

2. Export a static copy<\/h2>\n

The console example selects the first inline SVG. The selector should first be narrowed to the intended graphic, for example svg#logo<\/code>. Chrome’s $0<\/code> refers to the most recently inspected element; that selection must be the SVG root. The code is intended for trusted, simple graphics and is not an SVG sanitizer.<\/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
The copy includes the root and all descendants. Colors, opacity, stroke width and selected text styles are fixed, and the current CSS dimensions are retained. The original graphic remains unchanged. The block can run again without colliding with earlier console variable declarations. The temporary object URL is released afterwards.<\/p>\n
3. Check the result and its limits<\/h2>\n
The saved file should be opened separately and compared with the original. The property list does not copy every CSS feature. Animations, CSS transforms, complex filters, external fonts, raster images and references to definitions outside the SVG can require further work. A <use><\/code> reference only works if its target is included or accessible in the intended context.<\/p>\n
A main-document query does not cross iframe documents or shadow roots. The relevant document or component source needs separate inspection. A cloned SVG can also contain existing scripts, event attributes and external references; these need a separate review before embedding.<\/p>\n
4. Use the file as a favicon<\/h2>\n
A self-contained SVG can be declared as an icon in the HTML head. An additional ICO file provides a fallback. Vector artwork still needs a recognizable design at small sizes.<\/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
Questions and answers<\/h2>\n
Why can colors still be missing?<\/h3>\n
Definitions or resources may lie outside the copy, such as a gradient defined in another SVG. Computed styles do not automatically resolve every dependency. CSS properties outside the copied list can also affect rendering.<\/p>\n
How can a favicon support dark mode?<\/h3>\n
An internal style block can change colors through prefers-color-scheme<\/code>. Fixed inline colors need removal or suitable reworking so the relevant rules can apply. The result needs testing in the intended browser.<\/p>\n
Can an extension capture every graphic automatically?<\/h3>\n
No. Access to frames, components and external resources depends on permissions and implementation. Developer tools are often enough for a single graphic; an extension is not required.<\/p>\n<\/div>\n
\n
Sources<\/h2>\n