SVG importuje się w niewłaściwym rozmiarze: znajdź przyczynę i napraw problem

Gdy SVG importuje się w niewłaściwym rozmiarze, ścieżki zazwyczaj nie są uszkodzone. Aplikacja eksportująca i aplikacja importująca inaczej przeliczają jednostki współrzędnych SVG na piksele, cale lub milimetry. Dlatego ten sam plik może wyglądać poprawnie w przeglądarce, pojawić się jako maleńka grafika w Figma i trafić w jeszcze innej skali do programu CAD lub oprogramowania plotera tnącego.

Na razie nie rysuj poszczególnych elementów od nowa ani nie zmieniaj ich rozmiaru. Dodaj kwadrat referencyjny o znanym rozmiarze, zaimportuj cały plik i zmierz ten kwadrat. Jeden pomiar pokaże Ci, czy zmieniła się skala dokumentu, czy problem tkwi w samej grafice.

Trzy rozmiary zapisane w SVG

SVG może opisywać trzy powiązane ze sobą rzeczy, które potocznie nazywamy jego „rozmiarem”. Specyfikacja układów współrzędnych SVG 2 definiuje zależność między współrzędnymi użytkownika, obszarem wyświetlania i viewBox.

1. Geometria to współrzędne zapisane w ścieżkach i kształtach. Prostokąt może rozciągać się od 0 do 100 we własnym układzie współrzędnych pliku.
2. viewBox określa, który prostokątny fragment tego układu współrzędnych ma być widoczny. viewBox="0 0 100 100" oznacza, że widoczny obszar rysunku obejmuje 100 jednostek użytkownika w każdym kierunku.
3. Obszar wyświetlania to rozmiar, w jakim grafika jest wyświetlana lub importowana. Element główny może deklarować width="100mm", width="400" albo nie określać szerokości wcale. Aplikacja docelowa decyduje wtedy, jak przeliczyć tę wartość na własne jednostki dokumentu.

Oto kompletny kwadrat o boku 100 jednostek z jawnie określonym fizycznym rozmiarem wyjściowym:

<svg xmlns="http://www.w3.org/2000/svg"
  width="25mm" height="25mm" viewBox="0 0 100 100">
  <rect x="0" y="0" width="100" height="100" fill="#2563eb" />
</svg>

Geometria ma wymiary 100 na 100 jednostek użytkownika, a zamierzony obszar wyświetlania — 25 na 25 mm. viewBox odwzorowuje jedną przestrzeń współrzędnych w drugiej. Jeśli usuniesz width i height albo zmienisz ich wartości na liczby bez jednostek, importer będzie miał większą swobodę w wyborze rozmiaru wyświetlania.

Obszerniejszy poradnik edycji SVG omawia bezpieczne zmiany w kodzie. Przy tym problemie pozostaw dane ścieżek bez zmian i sprawdź główny element <svg>.

Dlaczego winą obarcza się DPI

Ścieżki SVG nie mają rozdzielczości w pikselach tak jak PNG czy JPG. DPI pojawia się w rozmowie, gdy oprogramowanie przelicza piksele CSS na jednostki fizyczne albo gdy aplikacja projektowa stosuje do tych jednostek własną konwencję eksportu.

Specyfikacja CSS Values definiuje 1in jako 96 pikseli CSS, a 1pt jako 1/72 cala. Proces, który błędnie traktuje piksele CSS jak punkty typograficzne, prowadzi do znanej rozbieżności skali w stosunku 96 do 72, czyli 1.333. Inne współczynniki mogą pojawić się wtedy, gdy importer ignoruje fizyczne wartości width i height, korzysta wyłącznie z viewBox lub stosuje własne ustawienie jednostek dokumentu.

Dlatego rada „zmień DPI” jest niepełna. W pliku może w ogóle nie być rastrowej wartości DPI, którą da się zmienić. Najpierw oblicz współczynnik skali:

scale factor = intended size / imported size

Jeśli kwadrat o boku 100 mm importuje się jako 75 mm, współczynnik korekty wynosi 100 / 75 = 1.3333. Pomnóż wszystkie wymiary zaimportowanego szkicu lub dokumentu przez ten współczynnik, a następnie ponownie sprawdź kwadrat.

Kwadrat referencyjny pozwala rozróżnić dwa problemy, które przy pierwszym imporcie mogą wyglądać identycznie. Jeśli kwadrat i grafika mają rozmiary odbiegające od zamierzonych w tej samej proporcji, skoryguj cały dokument. Jeśli kwadrat ma poprawny rozmiar, a grafika nie, pozostaw jednostki dokumentu bez zmian i sprawdź granice grafiki lub jej transformacje.

Przeprowadź test z kwadratem referencyjnym

Użyj kwadratu na tyle dużego, by wygodnie go zmierzyć, ale na tyle małego, by zmieścił się obok grafiki.

1. W edytorze źródłowym narysuj kwadrat o boku długości dokładnie 10 mm, 1 cala lub o innej znanej długości.
2. Nadaj mu wyróżniające się wypełnienie lub obrys i umieść go poza gotowym projektem.
3. Wyeksportuj grafikę i kwadrat razem jako jeden plik SVG.
4. Zaimportuj plik do aplikacji docelowej bez przeciągania uchwytu zmiany rozmiaru.
5. Zmierz kwadrat narzędziem do wymiarowania w aplikacji docelowej.
6. Podziel zamierzony wymiar przez wymiar po imporcie.
7. Przeskaluj całą zaimportowaną zawartość jednym przeskalowaniem. Nie zmieniaj rozmiaru poszczególnych kształtów.
8. Usuń kwadrat dopiero wtedy, gdy końcowy pomiar potwierdzi właściwy rozmiar.

Ten test pomaga też wykryć błędną diagnozę. Jeśli kwadrat referencyjny importuje się poprawnie, jednostki dokumentu prawdopodobnie są w porządku. Poszukaj wtedy grupy z transformacją, obrysu, którego widoczna szerokość została uwzględniona w granicach grafiki, obiektu poza obszarem roboczym lub importera, który dopasowuje zawartość do strony. Jeśli jeden ostry narożnik obrysu zmienia widoczne granice grafiki, skorzystaj z poradnika diagnozowania kolców na łączeniach typu miter, zanim zmienisz fizyczną skalę dokumentu.

W pracy z CNC, laserem i 3D używaj kwadratu o wymiarach określonych w jednostkach fizycznych. Kwadrat o wymiarach w pikselach może potwierdzić proporcjonalne skalowanie, ale nie zweryfikuje wymiarów w milimetrach potrzebnych do pracy z maszyną.

Poprawić plik czy import?

Edycja pliku przydaje się wtedy, gdy masz kontrolę nad plikiem głównym i regularnie używasz go w tym samym rodzaju procesu pracy. Korekta importu jest bezpieczniejsza, gdy aplikacja CAD lub oprogramowanie plotera tnącego stosuje znaną konwencję skali, a SVG działa poprawnie we wszystkich pozostałych miejscach.

Oprogramowanie CAD i ploterów tnących wymaga dodatkowej kontroli

Przeglądarka musi tylko wyświetlić obraz. Procesy CNC, laserowe i 3D wymagają dokładnego wyniku w wymiarach fizycznych. Gdy potwierdzisz skalę, osobno sprawdź geometrię:

• Upewnij się, że dokument używany do pracy z maszyną korzysta z oczekiwanych jednostek.
• Zmierz rzeczywisty element projektu, nie tylko całkowitą ramkę ograniczającą.
• Sprawdź, czy zamknięte profile pozostały zamknięte.
• Poszukaj ukrytego prostokąta tła, który powiększył granice grafiki.
• Sprawdź podgląd ścieżki narzędzia, szkicu lub wyciągnięcia przed rozpoczęciem pracy z materiałem.

Poradnik konwersji obrazu do SVG dla CNC omawia porządkowanie ścieżek i przekazywanie ich do CAM. Jeśli kolejnym krokiem jest wyciągnięcie, po skorygowaniu skali skorzystaj z procesu przygotowania SVG do druku 3D.

W przypadku Shaper Origin przejdź do listy kontrolnej rozmiaru fizycznego i rodzaju cięcia. Potwierdzenie skali to jeden z etapów; przed frezowaniem zaimportowanym ścieżkom trzeba też przypisać zamierzone rodzaje cięcia.

Po potwierdzeniu zamierzonych wymiarów sprawdź rozmiar na macie do cięcia, zanim przejdziesz do końcowego ekranu przygotowania w oprogramowaniu plotera tnącego.

W przypadku drukowanych kart obrazkowych poradnik układu kart do planu wizualnego pomaga sprawdzić dopasowanie grafiki, wymiary strony PDF i skalowanie wydruku. SVG o właściwym rozmiarze nadal może trafić na stronę, którą drukarka pomniejszy.

Gdzie przydaje się PerfectVector

PerfectVector przekształca grafikę rastrową w edytowalne ścieżki SVG. Proces przygotowania SVG i DXF dla CNC przydaje się, gdy jedynym źródłem jest PNG lub JPG, a potrzebujesz geometrii wektorowej do CAM. PerfectVector nie zna końcowego rozmiaru fizycznego Twojej części, więc nadal musisz ustawić i zweryfikować wymiary w oprogramowaniu docelowym.

Ten podział jest istotny. Wektoryzacja odtwarza skalowalne kształty. Kwadrat o znanym rozmiarze i pomiar w CAM pozwalają ustalić skalę fizyczną. Traktowanie ich jako dwóch osobnych kontroli zapobiega sytuacji, w której poprawnie zwektoryzowana grafika prowadzi do wycięcia elementu w niewłaściwym rozmiarze.

Najczęściej zadawane pytania

Dlaczego mój SVG importuje się jako mniejszy niż przy eksporcie? Aplikacje eksportująca i importująca mogą inaczej przeliczać jednostki użytkownika SVG, piksele CSS, punkty typograficzne lub jednostki fizyczne. Dodaj kwadrat o znanym rozmiarze i porównaj jego zamierzone wymiary z wymiarami po imporcie. Jeśli wszystkie wymiary w pliku zostały pomnożone przez ten sam współczynnik, przeskaluj dokument jeden raz, zamiast edytować poszczególne ścieżki.

Czy SVG ma DPI? Geometria SVG jest niezależna od rozdzielczości, więc nie ma stałej gęstości pikseli tak jak obraz rastrowy. Przeliczenia związane z DPI mają znaczenie wtedy, gdy oprogramowanie przelicza piksele CSS lub jednostki projektowe na cale lub milimetry. Źródłem rozbieżności często jest konwencja importera, a nie ukryta rozdzielczość obrazu.

Jak viewBox wpływa na rozmiar SVG? viewBox definiuje widoczny prostokątny obszar układu współrzędnych i pozwala mechanizmowi renderującemu odwzorować te jednostki użytkownika w obszarze wyświetlania. Sam w sobie nie określa rozmiaru fizycznego. O wielkości tego obszaru decydują width i height w elemencie głównym, CSS lub aplikacja docelowa.

Dlaczego mój SVG ma właściwy rozmiar w przeglądarce, ale niewłaściwy w Fusion lub LightBurn? Przeglądarka może renderować SVG w obszarze wyświetlania CSS, natomiast oprogramowanie CAD i laserowe musi przeliczyć go na fizyczne jednostki dokumentu. Te importery mogą stosować inną konwencję lub ignorować część metadanych dotyczących rozmiaru SVG. Zmierz kwadrat referencyjny i skoryguj całą zaimportowaną zawartość, używając obliczonego współczynnika skali.

Czy warto przekonwertować SVG na DXF, żeby poprawić jego rozmiar? Nie jako pierwszy krok. Konwersja formatu może zachować tę samą niejednoznaczność skali lub wprowadzić kolejną. Najpierw ustal współczynnik za pomocą kwadratu referencyjnego. Użyj DXF, gdy proces docelowy preferuje ten format, a następnie ponownie zweryfikuj wymiary po imporcie.

Źródła

1. W3C — SVG 2 Coordinate Systems — Definiuje jednostki użytkownika, obszary wyświetlania, viewBox i transformacje.
2. W3C — CSS Values and Units Level 4 — Definiuje przeliczenia referencyjne między pikselami CSS, calami i punktami typograficznymi.
3. Autodesk Fusion — Insert SVG — Opisuje umieszczanie SVG i ustawienia skali w szkicach Fusion.

Przed utworzeniem ścieżki narzędzia lub rozpoczęciem cięcia przygotuj SVG lub DXF dla CNC i sprawdź wynik. Zmierz kwadrat referencyjny i rzeczywisty element projektu oraz sprawdź końcowy podgląd CAM, zanim usuniesz kwadrat z pliku produkcyjnego.