{"id":377,"date":"2026-07-22T12:49:43","date_gmt":"2026-07-22T10:49:43","guid":{"rendered":"https:\/\/www.lukaswojcik.com\/blog\/?p=377"},"modified":"2026-10-24T00:50:00","modified_gmt":"2026-10-23T22:50:00","slug":"ekstrakcja-grafik-svg-ze-stron-internetowych-metoda-konsoli-i-alternatywy","status":"publish","type":"post","link":"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/tutorials-pl-tworzenie-stron-internetowych\/ekstrakcja-grafik-svg-ze-stron-internetowych-metoda-konsoli-i-alternatywy\/","title":{"rendered":"Ekstrakcja grafik SVG ze stron internetowych: Metoda konsoli i alternatywy"},"content":{"rendered":"

SVG mo\u017ce by\u0107 osadzone bezpo\u015brednio w HTML albo \u0142adowane jako osobny plik. Kopiowanie osadzonego SVG cz\u0119sto pomija regu\u0142y CSS otaczaj\u0105cej strony, zmieniaj\u0105c kolory lub kontury. Poni\u017csza metoda kopiuje wybrane obliczone style prostych, statycznych grafik SVG.<\/p>\n

1. Znalezienie w\u0142a\u015bciwego \u017ar\u00f3d\u0142a<\/h2>\n

Narz\u0119dzia deweloperskie zwykle otwieraj\u0105 si\u0119 po F12 lub Ctrl+Shift+I. Inspekcja w panelu element\u00f3w pozwala odr\u00f3\u017cni\u0107 rzeczywiste <svg><\/code> od <img><\/code> lub t\u0142a CSS. Zewn\u0119trzne SVG mo\u017cna zapisa\u0107 z adresu zasobu; w panelu sieci pomocne jest wyszukanie \u201esvg\u201d. Filtr Img nie obejmuje ka\u017cdego sposobu \u0142adowania.<\/p>\n

Dla osadzonego SVG polecenie Copy outerHTML kopiuje struktur\u0119. Regu\u0142y CSS spoza kopiowanego w\u0119z\u0142a nie s\u0105 do\u0142\u0105czane. Osadzone SVG mog\u0142o wcze\u015bniej pochodzi\u0107 z pliku; bie\u017c\u0105ca posta\u0107 w dokumencie nie musi jednak mie\u0107 osobnego adresu pobierania.<\/p>\n

\"Eksport
Osadzone SVG mo\u017cna skopiowa\u0107 z dokumentu. Wybrane style poprawiaj\u0105 eksport statyczny; zewn\u0119trzne zale\u017cno\u015bci nadal wymagaj\u0105 kontroli.<\/figcaption><\/figure>\n

2. Eksport statycznej kopii<\/h2>\n

Przyk\u0142ad konsolowy wybiera pierwsze osadzone SVG. Przed wykonaniem selektor powinien wskazywa\u0107 zamierzon\u0105 grafik\u0119, np. svg#logo<\/code>. W Chrome $0<\/code> oznacza ostatnio badany element; wyb\u00f3r musi obejmowa\u0107 korze\u0144 SVG. Kod jest przeznaczony dla prostych, zaufanych grafik i nie stanowi narz\u0119dzia oczyszczaj\u0105cego SVG.<\/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
Kopia obejmuje korze\u0144 oraz wszystkich potomk\u00f3w. Utrwalane s\u0105 kolory, krycie, szeroko\u015b\u0107 konturu i wybrane style tekstu, a tak\u017ce bie\u017c\u0105ce wymiary CSS. Oryginalna grafika pozostaje bez zmian. Blok mo\u017cna uruchomi\u0107 ponownie bez konfliktu z wcze\u015bniejszymi deklaracjami zmiennych konsoli. Tymczasowy adres obiektu zostaje nast\u0119pnie zwolniony.<\/p>\n
3. Kontrola wyniku i ogranicze\u0144<\/h2>\n
Zapisany plik powinien zosta\u0107 otwarty osobno i por\u00f3wnany z orygina\u0142em. Lista w\u0142a\u015bciwo\u015bci nie obejmuje ca\u0142ego CSS. Animacje, transformacje CSS, z\u0142o\u017cone filtry, zewn\u0119trzne fonty, obrazy rastrowe i odwo\u0142ania do definicji spoza SVG mog\u0105 wymaga\u0107 dalszej pracy. Odwo\u0142anie <use><\/code> dzia\u0142a tylko wtedy, gdy cel znajduje si\u0119 w pliku lub jest dost\u0119pny w danym kontek\u015bcie.<\/p>\n
Zapytanie w g\u0142\u00f3wnym dokumencie nie przeszukuje dokument\u00f3w iframe ani korzeni shadow DOM. W\u0142a\u015bciwy dokument lub komponent wymaga osobnej inspekcji. Klon SVG mo\u017ce r\u00f3wnie\u017c zawiera\u0107 skrypty, atrybuty zdarze\u0144 i odwo\u0142ania zewn\u0119trzne; przed osadzeniem potrzebna jest osobna kontrola tych element\u00f3w.<\/p>\n
4. U\u017cycie jako favicon<\/h2>\n
Samodzielny plik SVG mo\u017cna zadeklarowa\u0107 jako ikon\u0119 w sekcji head HTML. Dodatkowy plik ICO zapewnia wariant zapasowy. Grafika wektorowa nadal wymaga czytelnego motywu w ma\u0142ym rozmiarze.<\/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
Pytania i odpowiedzi<\/h2>\n
Dlaczego po eksporcie nadal brakuje kolor\u00f3w?<\/h3>\n
Definicje lub zasoby mog\u0105 znajdowa\u0107 si\u0119 poza kopi\u0105, np. gradient w innym SVG. Obliczone style nie rozwi\u0105zuj\u0105 automatycznie wszystkich zale\u017cno\u015bci. Na wygl\u0105d mog\u0105 te\u017c wp\u0142ywa\u0107 w\u0142a\u015bciwo\u015bci CSS spoza kopiowanej listy.<\/p>\n
Jak favicon mo\u017ce obs\u0142ugiwa\u0107 tryb ciemny?<\/h3>\n
Wewn\u0119trzny blok styl\u00f3w mo\u017ce zmienia\u0107 kolory przez prefers-color-scheme<\/code>. Utrwalone kolory inline wymagaj\u0105 usuni\u0119cia lub odpowiedniej przebudowy, aby regu\u0142y mog\u0142y zadzia\u0142a\u0107. Wynik wymaga sprawdzenia w docelowej przegl\u0105darce.<\/p>\n
Czy rozszerzenie automatycznie pobierze ka\u017cd\u0105 grafik\u0119?<\/h3>\n
Nie. Dost\u0119p do ramek, komponent\u00f3w i zewn\u0119trznych zasob\u00f3w zale\u017cy od uprawnie\u0144 i implementacji. Dla jednej grafiki cz\u0119sto wystarczaj\u0105 narz\u0119dzia deweloperskie; rozszerzenie nie jest wymagane.<\/p>\n<\/div>\n
\n
\u0179r\u00f3d\u0142a<\/h2>\n