Dlaczego font w Twoim SVG zmienia się po eksporcie lub imporcie

Font w Twoim SVG zmienia się, ponieważ edytowalny tekst SVG zwykle wskazuje nazwę fontu; nie zapisuje automatycznie kształtów jego liter w pliku. Jeśli przeglądarka, edytor, oprogramowanie plotera tnącego lub komputer odbiorcy nie mogą użyć wskazanego fontu, wybierają font zastępczy. Inne szerokości glifów zmieniają wtedy podział wierszy, wyrównanie i położenie sąsiednich elementów grafiki.

Masz do wyboru dwie niezawodne strategie przekazania pliku. Zachowaj edytowalny tekst, jeśli w miejscu docelowym słowa muszą dać się zaznaczać, wyszukiwać lub edytować i możesz prawidłowo dostarczyć font. Zamień tekst na ścieżki wektorowe, gdy wygląd musi pozostać niezmienny, a edycja treści nie jest już potrzebna. W obu przypadkach zachowaj osobny, edytowalny plik źródłowy.

Przy automatycznym eksporcie PNG jawnie wczytaj pliki fontów w resvg i porównaj wyrenderowane litery ze źródłem, zanim przekażesz plik dalej.

W przypadku ilustracji w dokumentach porównaj ilustracje SVG i etykiety składane w LaTeX. Oddzielenie geometrii rysunku od tekstu etykiet pozwala składać tekst w dokumencie, a Tobie zachować plik źródłowy SVG.

Najpierw ustal, czy SVG nadal zawiera tekst

Samo rozszerzenie pliku tego nie wyjaśnia. SVG może przedstawiać litery na co najmniej dwa popularne sposoby:

<text font-family="Example Sans" font-weight="600">Sample</text>

To edytowalny tekst. SVG przechowuje znaki i instrukcje dotyczące ich stylu. Mechanizm renderujący musi znaleźć pasujący font, aby zamienić te znaki w widoczne glify.

Tekst zamieniony na ścieżki wygląda raczej tak:

<path d="M ... Z" />

Tutaj każda litera została zamieniona na geometrię wektorową. Odbiorca nie potrzebuje fontu, ale słowo nie jest już zwykłym, edytowalnym ciągiem tekstowym.

Możesz to sprawdzić bez znajomości całego kodu:

1. zrób kopię SVG;
2. otwórz kopię w edytorze zwykłego tekstu;
3. wyszukaj <text i <tspan;
4. wyszukaj widoczną nazwę fontu;
5. jeśli ich nie ma, sprawdź, czy litery są zbudowane z elementów <path>.

W edytorze grafiki wektorowej wybierz narzędzie tekstowe i kliknij literę. Migający kursor tekstowy oznacza edytowalny tekst. Węzły wokół każdego glifu oznaczają ścieżki.

Trzy stany typografii

Przyczyna 1: docelowy font nie jest zainstalowany

Atrybut SVG font-family zawiera listę nazw rodzin uporządkowaną według priorytetu. Jak wyjaśnia dokumentacja atrybutu SVG font-family w MDN, mechanizm renderujący wybiera font z tej listy. Jeśli nie znajdzie pierwszej rodziny, przechodzi do kolejnej, a ostatecznie do rodziny ogólnej, takiej jak sans-serif lub serif.

Często dzieje się tak, gdy:

• projektant użył lokalnego fontu, którego odbiorca nie ma;
• font został aktywowany przez usługę subskrypcyjną tylko na jednym komputerze;
• SVG przeniesiono z edytora komputerowego na telefon, tablet, do aplikacji plotera tnącego lub pakietu biurowego;
• nazwa rodziny zapisana w foncie różni się od nazwy pliku lub nazwy widocznej w folderze pobierania;
• zainstalowany jest tylko jeden styl, a SVG wymaga innej grubości lub kursywy.

Zainstalowanie „czegoś podobnego” nie przywróci układu. Dwa fonty bezszeryfowe mogą mieć różne szerokości liter, wydłużenia górne, kerning i metryki linii bazowej. Zamiennik może wyglądać podobnie, a mimo to przesunąć wyśrodkowane słowo względem zamierzonego położenia. Gdy docelowy font jest już dostępny, przykład wyrównania tekstu SVG w pionie pomaga odróżnić położenie linii bazowej od wyśrodkowania pola tekstowego i wyśrodkowania optycznego.

Przyczyna 2: SVG wymaga fontu internetowego, który się nie wczytał

SVG używane na stronie internetowej może korzystać z fontów dostarczanych przez CSS tej strony. Może też zawierać blok stylów z regułą @font-face; SVG 2 wymaga obsługi pobieranych fontów zgodnie z modelem CSS Fonts. Takie rozwiązanie zawodzi, gdy adres URL fontu jest błędny, plik nie został opublikowany, dostęp jest zablokowany, wymagany format nie jest obsługiwany lub SVG otwarto osobno zamiast na stronie dostarczającej jego style.

Otwórz narzędzia deweloperskie przeglądarki i odśwież stronę. W panelu Network ustaw filtr tak, aby wyświetlał żądania dotyczące plików fontów, i poszukaj nieudanego żądania. W obliczonych stylach elementu <text> sprawdź, który font rzeczywiście został użyty do renderowania, zamiast polegać na zadeklarowanej nazwie rodziny.

SVG działające tylko po osadzeniu na jednej stronie niekoniecznie jest samodzielnym plikiem gotowym do przekazania. Przetestuj wyeksportowane SVG, otwierając je bezpośrednio w prywatnym oknie przeglądarki i na innym urządzeniu. Ujawni to ukryte zależności od usługi fontów wymagającej zalogowania, fontu w pamięci podręcznej lub arkusza stylów strony.

Osadzenie zasobu fontu może ułatwić przenoszenie SVG używanego w internecie, ale zwiększa rozmiar pliku, może napotkać ograniczenia obsługi w konkretnych aplikacjach i musi być dozwolone przez licencję fontu. Sprawdź faktyczne warunki licencji zamiast zakładać, że licencja na użytek komputerowy pozwala na dalsze rozpowszechnianie danych fontu.

Przyczyna 3: rodzina lub grubość nie pasuje dokładnie

Dopasowywanie fontów w CSS uwzględnia więcej niż widoczną nazwę rodziny. SVG może wymagać:

font-family: "Example Sans";
font-style: normal;
font-weight: 600;

Jeśli dostępne pliki zawierają tylko grubości 400 i 700, mechanizm renderujący może sztucznie wygenerować grubość lub wybrać zbliżoną odmianę. Fonty zmienne wprowadzają osie i nazwy instancji, które aplikacja importująca może interpretować inaczej. Starsze oprogramowanie projektowe lub do cięcia może ignorować niektóre funkcje OpenType, ligatury lub ustawienia zmienności.

Wyświetl oryginalny dokument i SVG obok siebie i porównaj:

• dokładną nazwę rodziny;
• styl i liczbową wartość grubości;
• odstępy między literami;
• użycie wielkich i małych liter oraz faktyczne znaki;
• funkcje OpenType, takie jak ligatury;
• wartości osi fontu zmiennego;
• zachowanie tekstu na ścieżce lub tekstu pionowego.

Nie naprawiaj niedopasowanej rodziny, ręcznie skalując każde słowo. To ukrywa objaw, ale pozostawia niewłaściwe glify.

Przyczyna 4: eksport zachował tekst, ale aplikacja importująca obsługuje go inaczej

Układ tekstu w SVG nie jest identyczny z układem w dokumencie do składu publikacji. Eksporter może używać zagnieżdżonych elementów <tspan>, osobnych współrzędnych, atrybutu text-anchor lub elementu <textPath>. Aplikacja importująca może spłaszczyć, ponownie pogrupować lub inaczej zinterpretować te elementy. Jeśli odtwarzasz znak w formie odznaki, poradnik edytowalnego tekstu SVG na ścieżce rozdziela emblemat, krzywą prowadzącą i edytowalne litery, dzięki czemu możesz przetestować każdą część.

Przy umieszczaniu grafiki w dokumencie skorzystaj z procedury pracy z ilustracjami SVG i grafiką w tekście w Typst. Zachowanie podpisów jako natywnego tekstu dokumentu pozwala sprawdzić litery na ilustracji osobno od numeracji ilustracji i typografii akapitów.

Aktualna dokumentacja eksportu SVG firmy Adobe wskazuje, że tekst na ścieżce po eksporcie może nie zachować identycznego wyglądu w każdej przeglądarce SVG. Rozróżnia też eksport edytowalnego tekstu korzystającego z fontu i opcję Convert To Outlines, która zamienia tekst na ścieżki wektorowe, aby zachować jego wygląd.

Jeśli właściwy font jest dostępny, ale położenie nadal się zmienia, sprawdź strukturę zamiast zmieniać krój pisma:

1. porównaj wygląd SVG w przeglądarce z jego wyglądem w edytorze źródłowym;
2. sprawdź, czy każdy znak ma własną pozycję x;
3. sprawdź zagnieżdżone transformacje w grupie tekstu;
4. zobacz, czy importer usunął text-anchor, kerning lub ustawienia linii bazowej;
5. przetestuj kopię ze zwykłym tekstem poziomym, aby wyodrębnić zachowanie tekstu na ścieżce.

W przypadku logo, odznaki lub jednowierszowego nagłówka, którego wygląd jest ważniejszy niż możliwość edycji, tekst zamieniony na ścieżki jest zwykle bezpieczniejszą formą przekazania.

Przyczyna 5: tekst został zamieniony na ścieżki, a oczekujesz dalszej edycji

Tekst zamieniony na ścieżki nie podlega zastępowaniu fontu, ponieważ już się do niego nie odwołuje. Mimo to po imporcie może Cię zaskoczyć:

• litery mogą pojawić się jako ścieżki złożone zamiast jednego edytowalnego słowa;
• puste przestrzenie wewnątrz liter mogą zostać wypełnione po rozdzieleniu ścieżki złożonej;
• wiele glifów może być zgrupowanych razem;
• aplikacja docelowa o ograniczonych możliwościach może scalać lub upraszczać ścieżki;
• plik może być większy niż wersja z edytowalnym tekstem.

To zmiany geometrii i możliwości edycji, a nie fontu. Jeśli same kształty odpowiadają źródłu, eksport tekstu jako ścieżek spełnił swoje zadanie.

Zawsze zachowuj dwa pliki:

• Edytowalny plik źródłowy: edytowalny tekst, informacje o oryginalnym foncie, nazwane warstwy i format aplikacji źródłowej.
• Kopia do przekazania: SVG, EPS lub PDF z tekstem zamienionym na ścieżki, gdy kluczowe jest zachowanie wyglądu.

Nigdy nie zamieniaj tekstu na ścieżki w jedynym pliku źródłowym. Gdy tekst staje się ścieżkami, poprawienie pisowni, tłumaczenie lub dodanie nowego hasła wymaga czasochłonnego ręcznego przerysowywania.

Które rozwiązanie wybrać?

Miejsce docelowe decyduje o kompromisie. Edytowalny tekst zachowuje znaczenie i możliwość edycji. Ścieżki zachowują wygląd. Jeden plik nie może maksymalizować obu tych korzyści bez dodatkowych zależności lub danych źródłowych.

Bezpieczna procedura zamiany tekstu na ścieżki

Gdy przy przekazaniu pliku kluczowe jest zachowanie wyglądu:

1. zapisz dokument źródłowy z edytowalnym tekstem;
2. zduplikuj go i dodaj -outlined lub -delivery do nazwy pliku;
3. zaznacz tekst i użyj Create Outlines, Convert to Curves, Object to Path lub równoważnego polecenia zamiany tekstu na ścieżki;
4. sprawdź otwory w literach i nakładające się kształty;
5. wyeksportuj SVG;
6. otwórz SVG w przeglądarce i drugim edytorze;
7. porównaj je ze źródłem w normalnym rozmiarze i przy dużym powiększeniu;
8. wyślij plik z tekstem zamienionym na ścieżki, a edytowalny plik źródłowy i informacje o licencji fontu zachowaj w archiwum.

Nie rasteryzuj tekstu tylko po to, by uniknąć problemu z brakującym fontem. PNG wewnątrz SVG zapobiega zastępowaniu fontu, ale usuwa skalowalną geometrię ścieżek. Zamiana tekstu na ścieżki zachowuje prawdziwą grafikę wektorową.

Jeśli jedyną zachowaną wersją logo jest obraz rastrowy

Czasem nie zachował się ani edytowalny tekst, ani plik źródłowy z tekstem zamienionym na ścieżki. Możesz mieć tylko mały plik PNG, JPG lub zrzut ekranu z logo. Poradnik wyboru metody wektoryzacji logo wyjaśnia, kiedy wektoryzować ten obraz rastrowy, a kiedy przerysować go ręcznie. Zainstalowanie fontów nie naprawi obrazu rastrowego, a rozpoznanie podobnego kroju pisma może nie odtworzyć indywidualnych modyfikacji liter.

W takiej sytuacji PerfectVector może pomóc pod pewnymi warunkami: wektoryzacja logo pozwala odtworzyć widoczne litery z obrazu rastrowego jako kształty wektorowe. Wynikiem jest grafika ze ścieżkami, a nie odzyskany edytowalny tekst. Narzędzie nie rozpoznaje oryginalnego fontu, nie przywraca ustawień kerningu ani nie sprawia, że treść znów można zmieniać przez wpisywanie znaków. Użyj go do odzyskania widocznej geometrii logo, a następnie zachowaj tę rekonstrukcję osobno od nowego pliku źródłowego ze złożonym tekstem.

Szerszą strategię przekazywania plików znajdziesz w poradniku formatów plików logo, który wyjaśnia, jakie formaty źródłowe i formaty do przekazania warto zachować.

Najczęściej zadawane pytania

Dlaczego moje SVG używa innego fontu na innym komputerze? SVG prawdopodobnie zawiera edytowalny tekst wskazujący font niedostępny na drugim komputerze. Mechanizm renderujący wybiera inną rodzinę z listy fontów zastępczych, zmieniając kształty glifów, szerokość, odstępy, a czasem także wyrównanie.

Czy SVG automatycznie osadza swój font? Nie. SVG może wskazywać font, korzystać z niego przez CSS strony lub zawierać zasób fontu, ale zwykły edytowalny tekst nie dołącza automatycznie pliku fontu z komputera. Nadal trzeba zadbać o dostępność, obsługę w przeglądarce i zgodność z licencją fontu.

Czy warto zamienić tekst SVG na ścieżki? Zamień tekst na ścieżki w kopii do przekazania, gdy wygląd musi pozostać niezmienny, zwłaszcza w przypadku logo, ozdobnego liternictwa, druku i oprogramowania do obsługi urządzeń wytwórczych. Zachowaj edytowalny tekst w pliku źródłowym, jeśli ważne są treść, dostępność, możliwość wyszukiwania lub lokalizacja.

Dlaczego tekst zamieniony na ścieżki przestał być edytowalny po imporcie? Zamiana tekstu na ścieżki zastępuje znaki ścieżkami wektorowymi. Odbiorca może edytować węzły i kształty, ale nie może umieścić kursora tekstowego ani zmienić fontu. To oczekiwane zachowanie, dlatego zachowaj i udostępnij plik źródłowy z edytowalnym tekstem, jeśli w przyszłości trzeba będzie zmienić treść.

Czy PerfectVector może odzyskać oryginalny font z rastrowego logo? Nie. PerfectVector może odtworzyć widoczne litery z obrazu rastrowego jako ścieżki wektorowe, ale nie rozpoznaje oryginalnego fontu ani nie przywraca edytowalnych znaków, kerningu i ustawień fontu. Użyj go, gdy celem jest odzyskanie widocznej geometrii logo.

Źródła

1. W3C — SVG Text — edytowalna zawartość <text> i <tspan>, właściwości fontów, układ i obsługa pobieranych fontów.
2. W3C — CSS Fonts Module Level 3 — dopasowywanie rodzin fontów, wybór odmiany, brakujące rodziny i systemowe fonty zastępcze.
3. MDN — SVG font-family — listy rodzin uporządkowane według priorytetu i ogólne rodziny zastępcze w SVG.
4. Adobe Illustrator — Create outline text — zamiana tekstu na ścieżki i wynikająca z niej utrata możliwości edycji tekstu.
5. Adobe Illustrator — Save artwork — eksport tekstu SVG, zamiana na ścieżki i zastrzeżenia dotyczące zgodności tekstu na ścieżce.

Gdy brakuje pliku źródłowego i masz tylko rastrowe logo, odtwórz jego widoczne litery jako ścieżki wektorowe w PerfectVector, a następnie sprawdź kształty w drugim edytorze. Jeśli edytowalny tekst nadal istnieje, rozwiąż problem zależności od fontu lub zamień tekst na ścieżki w kopii do przekazania, zamiast ponownie go wektoryzować.