Ekstrakcja grafik SVG ze stron internetowych: Metoda konsoli i alternatywy

SVG może być osadzone bezpośrednio w HTML albo ładowane jako osobny plik. Kopiowanie osadzonego SVG często pomija reguły CSS otaczającej strony, zmieniając kolory lub kontury. Poniższa metoda kopiuje wybrane obliczone style prostych, statycznych grafik SVG.

1. Znalezienie właściwego źródła

Narzędzia deweloperskie zwykle otwierają się po F12 lub Ctrl+Shift+I. Inspekcja w panelu elementów pozwala odróżnić rzeczywiste <svg> od <img> lub tła CSS. Zewnętrzne SVG można zapisać z adresu zasobu; w panelu sieci pomocne jest wyszukanie „svg”. Filtr Img nie obejmuje każdego sposobu ładowania.

Dla osadzonego SVG polecenie Copy outerHTML kopiuje strukturę. Reguły CSS spoza kopiowanego węzła nie są dołączane. Osadzone SVG mogło wcześniej pochodzić z pliku; bieżąca postać w dokumencie nie musi jednak mieć osobnego adresu pobierania.

2. Eksport statycznej kopii

Przykład konsolowy wybiera pierwsze osadzone SVG. Przed wykonaniem selektor powinien wskazywać zamierzoną grafikę, np. svg#logo. W Chrome $0 oznacza ostatnio badany element; wybór musi obejmować korzeń SVG. Kod jest przeznaczony dla prostych, zaufanych grafik i nie stanowi narzędzia oczyszczającego SVG.

(() => {
  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);
})();

Kopia obejmuje korzeń oraz wszystkich potomków. Utrwalane są kolory, krycie, szerokość konturu i wybrane style tekstu, a także bieżące wymiary CSS. Oryginalna grafika pozostaje bez zmian. Blok można uruchomić ponownie bez konfliktu z wcześniejszymi deklaracjami zmiennych konsoli. Tymczasowy adres obiektu zostaje następnie zwolniony.

3. Kontrola wyniku i ograniczeń

Zapisany plik powinien zostać otwarty osobno i porównany z oryginałem. Lista właściwości nie obejmuje całego CSS. Animacje, transformacje CSS, złożone filtry, zewnętrzne fonty, obrazy rastrowe i odwołania do definicji spoza SVG mogą wymagać dalszej pracy. Odwołanie <use> działa tylko wtedy, gdy cel znajduje się w pliku lub jest dostępny w danym kontekście.

Zapytanie w głównym dokumencie nie przeszukuje dokumentów iframe ani korzeni shadow DOM. Właściwy dokument lub komponent wymaga osobnej inspekcji. Klon SVG może również zawierać skrypty, atrybuty zdarzeń i odwołania zewnętrzne; przed osadzeniem potrzebna jest osobna kontrola tych elementów.

4. Użycie jako favicon

Samodzielny plik SVG można zadeklarować jako ikonę w sekcji head HTML. Dodatkowy plik ICO zapewnia wariant zapasowy. Grafika wektorowa nadal wymaga czytelnego motywu w małym rozmiarze.

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