Ekstrakcja grafik SVG ze stron internetowych: Metoda konsoli i alternatywy
Pobieranie skalowalnych grafik wektorowych (SVG) ze stron internetowych bywa problematyczne, zwłaszcza gdy do ich formatowania wykorzystywane są zewnętrzne arkusze stylów CSS. Standardowe kopiowanie elementu często kończy się utratą pierwotnych kolorów i formatowania. Poniższy poradnik przedstawia metodę opartą na języku JavaScript, która pozwala na pobranie pliku SVG wraz z zaaplikowanymi stylami, a także opisuje rozwiązania alternatywne oraz instrukcję wdrożenia SVG jako ikony favicon.
Metoda 1: Skrypt w konsoli deweloperskiej
Metoda ta wykorzystuje konsolę deweloperską przeglądarki. Poniższy skrypt wybiera element SVG, klonuje go, aplikuje na sklonowanych elementach obliczone style CSS (ang. computed styles – takie jak wypełnienie, obramowanie i przezroczystość), a następnie automatycznie wymusza pobranie kompletnego pliku.
- Należy otworzyć narzędzia deweloperskie (F12 lub Ctrl+Shift+I).
- Przejść do zakładki Konsola (Console).
- Wkleić poniższy kod i zatwierdzić klawiszem Enter:
// 1. Zlokalizowanie elementu SVG (przy wielu elementach SVG na stronie konieczna jest zmiana selektora)
const svgElement = document.querySelector("svg");
// 2. Klonowanie elementu, aby nie modyfikować aktywnej strony
const clonedSvg = svgElement.cloneNode(true);
// 3. Znalezienie wszystkich elementów przechowujących style (ścieżki, koła, kształty)
const sourceElements = svgElement.querySelectorAll("*");
const clonedElements = clonedSvg.querySelectorAll("*");
// 4. Kopiowanie obliczonych stylów (kolory, wypełnienia) do sklonowanego SVG
sourceElements.forEach((sourceEl, index) => {
const clonedEl = clonedElements[index];
const computedStyle = window.getComputedStyle(sourceEl);
// Bezpośrednie przypisanie definicji układu i kolorów
clonedEl.style.fill = computedStyle.fill;
clonedEl.style.stroke = computedStyle.stroke;
clonedEl.style.color = computedStyle.color;
clonedEl.style.opacity = computedStyle.opacity;
});
// 5. Serializacja sklonowanego SVG z zaszytymi stylami
const svgString = new XMLSerializer().serializeToString(clonedSvg);
const svgBlob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
// 6. Pobranie gotowego pliku
const downloadLink = document.createElement("a");
downloadLink.href = URL.createObjectURL(svgBlob);
downloadLink.download = "colored-image.svg";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);Alternatywne metody pobierania SVG
Jeżeli zapisywanie obliczonych stylów CSS nie jest konieczne, do dyspozycji są inne, szybsze rozwiązania:
- Zbadaj element (Kopiuj outerHTML): Kliknięcie prawym przyciskiem myszy na SVG na stronie, wybór opcji Zbadaj, a następnie kliknięcie prawym przyciskiem na podświetlony tag
<svg>w drzewie DOM i wybór Kopiuj > Kopiuj outerHTML. Uzyskany kod wystarczy zapisać w lokalnym pliku z rozszerzeniem .svg. - Zakładka Network (Sieć): Po otwarciu narzędzi deweloperskich należy przejść do zakładki Sieć, włączyć filtr Img i odświeżyć stronę. Wszystkie grafiki SVG ładowane jako pliki zewnętrzne pojawią się na liście i mogą zostać bezpośrednio pobrane.
- Rozszerzenia przeglądarki: Dedykowane rozszerzenia, takie jak „SVG Grabber”, pozwalają na zautomatyzowane wyodrębnienie i pobranie wszystkich zasobów SVG obecnych na danej stronie.
Jak ustawić plik SVG jako Favicon
Wdrożenie formatu SVG jako ikony favicon witryny wymaga dodania odpowiedniego znacznika w kodzie HTML. Zaletą tego rozwiązania jest nieskończona skalowalność ikony oraz ostre krawędzie na ekranach o wysokiej rozdzielczości (High-DPI).
Poniższy kod należy umieścić w sekcji <head> dokumentu HTML:
<link rel="icon" href="/sciezka/do/favicon.svg" type="image/svg+xml">W celu zapewnienia wstecznej kompatybilności z systemami nieobsługującymi SVG jako favicon, zalecaną praktyką jest umieszczenie standardowego pliku .ico jako rozwiązania zapasowego (fallback).
Źródła
Powiązane artykuły
Jeden komentarz
Metoda z konsolą działa właśnie dlatego, że kopiuje style obliczone — przy zwykłym kopiowaniu węzła grafika traci kolory zdefiniowane w zewnętrznym arkuszu.
Warto jednak wiedzieć, co się przy tym dzieje z rozmiarem pliku. Skrypt dopisuje wskazane właściwości do każdego elementu, więc rysunek z tysiącem ścieżek dostaje tysiąc powtórzeń tego samego wypełnienia; przy ikonie to bez znaczenia, przy złożonej ilustracji plik potrafi urosnąć kilkukrotnie. Przepuszczenie wyniku przez SVGO porządkuje to w jednym kroku — narzędzie wynosi powtarzalne style i usuwa wartości domyślne. Przy grafice wstawianej bezpośrednio w kod strony ma to podwójne znaczenie, bo powiększa dokument przy każdym wczytaniu.