Jak sprawdzić, czy SVG zawiera obraz rastrowy

Tak, SVG może zawierać obraz rastrowy. W jednym dokumencie mogą znajdować się zarówno ścieżki wektorowe, jak i piksele, a sam plik może być w zasadzie tylko opakowaniem dla PNG lub JPEG. Rozszerzenie .svg wskazuje format kontenera, ale nie gwarantuje, że każdy widoczny element jest grafiką wektorową.

Wiarygodna metoda to sprawdzenie zarówno obiektów, jak i kodu źródłowego pliku. Powiększenie pomaga zauważyć problem, ale nie pozwala ustalić, czy aplikacja rasteryzowała podgląd, czy piksele rzeczywiście są zapisane w SVG.

W przypadku aplikacji WPF przewodnik po sposobach reprezentacji SVG w WPF rozróżnia źródło SVG, natywne obiekty rysunkowe i przekazywanie obrazu w postaci bitmapy. Sprawdź, co otrzymuje aplikacja, zanim uznasz zrasteryzowany widok za dowód dotyczący oryginalnego pliku.

Co może zawierać SVG

SVG to format graficzny oparty na XML, a jego model zawartości obejmuje więcej niż same ścieżki. Specyfikacja osadzonej zawartości SVG 2 definiuje element <image>, który umieszcza cały wskazany plik w prostokątnym obszarze. Może to być PNG, JPEG lub inny SVG.

Daje to cztery często spotykane struktury:

Mieszana zawartość nie oznacza automatycznie błędu. Mapa może wykorzystywać ścieżki do etykiet i granic, a cieniowaną warstwę satelitarną zachowywać jako obraz rastrowy. Na grafice produktu można umieścić edytowalną odznakę na fotografii. Problem zaczyna się wtedy, gdy oczekujesz od konwersji edytowalnych ścieżek, a otrzymujesz piksele w innym kontenerze.

Sprawdzenie 1: przyjrzyj się obiektom

Otwórz SVG w programie Illustrator, Inkscape, Affinity Designer lub innym edytorze z panelem Objects (Obiekty) albo Layers (Warstwy). Zaznacz obszar, który może zawierać obraz rastrowy.

• Pojedynczy prostokątny obiekt oznaczony jako obraz mocno wskazuje na zawartość obrazową.
• Widoczne węzły wzdłuż rzeczywistych krawędzi grafiki wskazują na geometrię wektorową.
• Ścieżka przycinająca może ukrywać prostokątny obraz, więc przed podjęciem decyzji rozwiń drzewo warstw lub obiektów.
• Ścieżki w innych miejscach nie dowodzą, że cały dokument jest grafiką wektorową. Jeden plik może zawierać oba rodzaje zawartości.

To sprawdzenie przydaje się projektantom, którzy nie chcą czytać XML, ale ma jedno ograniczenie: prostokątny obiekt <image> może odwoływać się do innego SVG. Sprawdzenie źródła pozwala ustalić, co obiekt faktycznie wczytuje.

Sprawdzenie 2: przyjrzyj się źródłu SVG

Zrób kopię, a następnie otwórz plik .svg w edytorze zwykłego tekstu. Wyszukaj <image. Jeśli nie ma elementu obrazu, plik nie korzysta z typowego mechanizmu osadzania obrazów. Jeśli go znajdziesz, odczytaj wartość jego atrybutu href.

Osadzony PNG często zaczyna się tak:

<image href="data:image/png;base64,iVBORw0KGgo..." />

Osadzony JPEG zwykle zaczyna się od data:image/jpeg;base64,. Dokumentacja adresów URL typu data w MDN wyjaśnia, że dane są umieszczane bezpośrednio w adresie URL, z opcjonalnym kodowaniem Base64. Bardzo długi, nieczytelny ciąg danych jest w tej postaci czymś normalnym.

Podlinkowany obraz rastrowy wygląda raczej tak:

<image href="photos/product-shot.png" />

Ten PNG nie jest zapisany wewnątrz SVG. Dokument zależy od osobnego pliku pod tą ścieżką. Jeśli przeniesiesz SVG lub wyślesz go e-mailem bez obrazu, grafika może zniknąć.

Natomiast poniższy zapis nie jest dowodem na zawartość rastrową:

<image href="icons/mark.svg" />

Dokumentacja <image> w MDN wyraźnie wskazuje, że element może wyświetlać formaty rastrowe lub inny SVG. Zanim go sklasyfikujesz, sprawdź typ mediów lub rozszerzenie pliku.

Trzy struktury wewnątrz SVG lub obok niego

Osadzanie i linkowanie to różne problemy

Podczas importowania obrazu Inkscape pozwala go podlinkować lub osadzić. Przewodnik po importowaniu obrazów jasno opisuje ten kompromis: linkowanie zmniejsza rozmiar SVG, ale uzależnia dokument od lokalizacji obrazu; osadzanie sprawia, że SVG jest samowystarczalny, ale zwiększa jego rozmiar.

Ta różnica ma znaczenie przy przekazywaniu pliku:

• Osadzony obraz rastrowy: można go przenosić jako część jednego pliku, ale nadal ogranicza go rozdzielczość, a rozmiar pliku bywa znacznie większy, niż oczekujesz.
• Podlinkowany obraz rastrowy: łatwiej aktualizować go niezależnie, ale odwołanie jest podatne na problemy przy przenoszeniu między folderami, komputerami, witrynami lub dostawcami.
• Ścieżki wektorowe: można edytować ich geometrię, ale tylko wtedy, gdy materiał źródłowy został zwektoryzowany lub narysowany jako ścieżki.

Osadzanie to pakowanie, a nie wektoryzacja. Base64 nie zamienia pikseli w krzywe. Jeśli przygotowujesz grafikę do serwisu stockowego, skorzystaj z audytu zgłoszeń grafiki wektorowej do Adobe Stock, aby dodatkowo sprawdzić obszar roboczy, możliwość edycji i źródło.

Dlaczego samo powiększanie nie wystarczy

Jeśli podejrzany obszar przy dużym powiększeniu w kilku przeglądarkach grafiki rozpada się na widoczne piksele, prawdopodobnie jest rastrowy. Mimo to przeglądarka grafiki może rasteryzować prawidłowy SVG na potrzeby miniatury, elementu canvas, podglądu wydruku lub pamięci podręcznej importu. Z kolei osadzony PNG o wysokiej rozdzielczości może wyglądać gładko przy zwykłym powiększeniu i pozostać niezauważony w dokumencie.

Traktuj powiększenie jako sposób sprawdzenia objawów, a następnie potwierdź wynik na podstawie obiektów lub źródła. Szerszy przewodnik wyjaśniający, dlaczego SVG wygląda na rozpikselowany, rozróżnia osadzoną zawartość, zachowanie przeglądarki grafiki i renderowanie małych ikon. W przypadku aplikacji korzystającej z elementu canvas porównaj importowanie obrazów i edytowalnych ścieżek w Konva, zanim uznasz pojedynczy węzeł obrazu za problem ze źródłem SVG.

Zdecyduj, czy zachować obraz, ponownie go podlinkować, czy zastąpić

Zachowaj obraz rastrowy, gdy piksele są zamierzone

Fotografie, skany, tekstury, miękkie oświetlenie i złożone malarskie detale często najlepiej sprawdzają się w postaci rastrowej. Jeśli SVG służy do połączenia takiego obrazu z wektorowymi etykietami lub nakładkami, mieszany plik może być właściwym rozwiązaniem projektowym. Upewnij się, że obraz rastrowy ma wystarczającą rozdzielczość przy docelowym rozmiarze fizycznym, i zdecyduj, czy przekazywany plik ma być samowystarczalny, czy spakowany razem z podlinkowanymi zasobami.

Ponownie podlinkuj lub osadź obraz, gdy problemem jest przenoszenie pliku

Jeśli podlinkowany obraz znika na innym komputerze, spakuj SVG i jego obraz z zachowaniem tej samej względnej struktury folderów albo osadź obraz przed przekazaniem pliku. To rozwiązuje problem brakującego zasobu. Nie sprawia jednak, że obraz można edytować jako ścieżki.

Zastąp obraz rastrowy, gdy obiecano ścieżki

Jeśli konwerter opakował płaskie logo, ikonę lub rysunek liniowy w SVG, znajdź oryginalny PNG lub JPEG. Jeśli oryginał jest niedostępny, wyodrębnij osadzony obraz lub wyeksportuj ten obiekt w jego natywnym rozmiarze. Następnie przekształć obraz w ścieżki wektorowe, sprawdź kształty i zastąp obiekt <image> zweryfikowanym wynikiem wektoryzacji.

PerfectVector przydaje się do odtwarzania odpowiedniej płaskiej grafiki jako edytowalnych kształtów. Nie zamienia magicznie fotografii o ciągłych przejściach tonalnych w niewielki zestaw ścieżek wiernie oddających obraz. W przypadku zdjęcia zachowaj obraz rastrowy, chyba że celem jest celowo posteryzowana interpretacja. Jeśli potrzebujesz kopii PNG zatwierdzonego SVG do przekazania, wyrenderuj ją bezpośrednio w docelowym rozmiarze w pikselach za pomocą Sharp; powiększenie małego PNG nie doda szczegółów żadnemu obrazowi rastrowemu osadzonemu w tym SVG.

Jeśli korzystasz z programu Scratch, sprawdź, dlaczego Convert to Vector nie przeprowadza wektoryzacji bitmapy, zanim wyeksportujesz kolejne opakowanie dla obrazu.

Odtwórz efekty zrasteryzowane podczas eksportu

Niektóre SVG są w większości grafiką wektorową, ale zawierają jeden zrasteryzowany cień, rozmycie, teksturę lub nieobsługiwany efekt. Zdecyduj, czy efekt musi pozostać edytowalny i poprawnie przenosić się między aplikacjami. Odtwórz prosty efekt za pomocą obsługiwanych funkcji wektorowych, świadomie spłaszcz go do obrazu rastrowego w rozdzielczości wymaganej przy przekazaniu pliku albo go usuń. Wektoryzacja miękkiego cienia zwykle tworzy chaotyczne kształty zamiast lepszego efektu.

Audyt mieszanego SVG przed przekazaniem

Zanim wyślesz plik na stronę internetową, do drukarni, plotera tnącego lub współpracownika:

1. Wyszukaj w źródle <image, data:image/, .png, .jpg i .jpeg.
2. Potwierdź, czy każdy wskazany zasób powinien być obrazem rastrowym, grafiką wektorową, czy w ogóle nie powinien się tam znajdować.
3. Tymczasowo przenieś podlinkowane pliki i ponownie otwórz SVG, aby ujawnić niedziałające zależności.
4. Zaznacz ważne elementy grafiki i sprawdź, czy części przeznaczone do edycji są ścieżkami.
5. Porównaj natywne wymiary obrazu rastrowego w pikselach z jego docelowym rozmiarem wyświetlania lub wydruku.
6. Ponownie otwórz przekazywaną kopię w drugiej aplikacji.
7. Zachowaj oryginalne źródło i rastrowy podgląd wzorcowy, gdy wygląd jest ważniejszy niż możliwość edycji.

W przypadku cięcia lub produkcji usuń dekoracyjne obrazy rastrowe z pliku dla maszyny i przeprowadź kontrolę SVG przed cięciem. Ploter tnący podąża po ścieżkach; nie zamienia osadzonej fotografii w kontur cięcia.

Najczęściej zadawane pytania

Czy SVG może zawierać PNG lub JPEG? Tak. Element obrazu w SVG może odwoływać się do PNG lub JPEG jako osobnego pliku albo przechowywać jego dane wewnątrz SVG. Obraz rastrowy zachowuje swoje pierwotne właściwości wynikające z budowy pikselowej.

Czy znacznik image zawsze oznacza, że SVG zawiera obraz rastrowy? Nie. Element image może też odwoływać się do innego SVG. Zanim go sklasyfikujesz, sprawdź wartość jego atrybutu href lub starszego xlink:href, aby ustalić typ mediów, adres URL typu data lub nazwę pliku.

Jak sprawdzić, czy obraz rastrowy jest osadzony, czy podlinkowany? Osadzony obraz zwykle ma atrybut href zaczynający się od data:image, więc jego bajty znajdują się wewnątrz SVG. Podlinkowany obraz ma ścieżkę lub adres URL, taki jak images/photo.png, i zależy od tego osobnego zasobu.

Czy mogę usunąć osadzony obraz z SVG? Tak. Usuń go, jeśli jest zbędny, zastąp go świadomie wybranym zasobem rastrowym albo przeprowadź wektoryzację odpowiedniej płaskiej grafiki i wstaw uzyskane ścieżki w jego miejsce. Zanim zaczniesz edytować XML, zachowaj kopię zapasową.

Dlaczego moje SVG zawiera ścieżki i obraz? To mieszany SVG. Plik może celowo łączyć zdjęcie z wektorowymi nakładkami albo program eksportujący mógł zrasteryzować efekt. Zanim wprowadzisz zmiany, sprawdź, które części muszą być edytowalne.

Źródła

1. W3C — SVG 2 Embedded Content — Definiuje element <image>, jego atrybut href oraz zasoby rastrowe lub SVG, do których może się odwoływać.
2. MDN — SVG <image> — Praktyczna dokumentacja obsługiwanej zawartości obrazowej i zachowania przy ustalaniu rozmiaru.
3. Inkscape Beginners' Guide — Importing Pictures — Wyjaśnia różnicę między podlinkowanymi a osadzonymi importowanymi obrazami oraz kompromis związany z przenoszeniem pliku.
4. MDN — Data URLs — Dokumentuje schemat data:, powszechnie używany do przechowywania danych obrazu wewnątrz SVG.

W miejscu edytowalnych ścieżek masz bitmapę opakowaną w SVG? Przekształć oryginalną płaską grafikę w prawdziwą grafikę wektorową, ponownie otwórz SVG i sprawdź, czy ważne obiekty dają się teraz zaznaczać jako kształty.