Tekst SVG na ścieżce: odtwórz edytowalny napis na odznace

Aby umieścić tekst SVG na ścieżce, zdefiniuj ścieżkę z identyfikatorem, odwołaj się do niej z elementu <textPath> wewnątrz <text> i wpisz słowa między znacznikami. Aby wyśrodkować napis, połącz startOffset="50%" z text-anchor="middle". Zachowaj emblemat w osobnej grupie, aby móc zmieniać słowa bez odtwarzania grafiki.

Takie rozdzielenie przydaje się podczas odtwarzania odznaki klubowej, znaku sklepu lub logo wydarzenia. Możesz potrzebować ścieżek wektorowych dla centralnego emblematu, a jednocześnie nadal chcieć poprawić datę lub zmienić nazwę. Wektoryzacja całej odznaki daje kształty liter, a nie edytowalny ciąg tekstowy. Odtwórz typografię jako edytowalny tekst, jeśli treść ma pozostać możliwa do zmiany.

W przypadku poziomego napisu obok emblematu dopasuj prostą etykietę SVG za pomocą textLength i porównaj zmiany odstępów, zanim zmienisz proporcje glifów.

Zacznij od trzech oddzielnych części

Odznaka potrzebuje emblematu, ścieżki prowadzącej i tekstu, który biegnie wzdłuż tej ścieżki. Ścieżka prowadząca określa położenie napisu; nie musi być widoczna w gotowym projekcie. MDN — textPath opisuje połączenie href między tekstem a jego ścieżką.

Na potrzeby poniższego przykładu narysowaliśmy w kodzie SVG prostą sosnę i półkolistą ścieżkę prowadzącą. Oba elementy są oryginalnymi grafikami demonstracyjnymi, a nie wynikiem konwersji w PerfectVector. Na odznace widnieje napis PINE TRAIL CLUB; przez wszystkie etapy tworzenia napis pozostaje ciągiem tekstowym.

Zbuduj edytowalną odznakę

Zapisz ten kod jako badge.svg i otwórz go w przeglądarce. Zachowaj plik jako edytowalny plik główny. Jeśli dopiero poznajesz ten format, nasz przewodnik po plikach SVG wyjaśnia różnicę między tekstem, ścieżkami i osadzonymi obrazami.

<svg xmlns="http://www.w3.org/2000/svg"
     width="400" height="400" viewBox="0 0 400 400"
     role="img" aria-labelledby="badge-title">
  <title id="badge-title">Pine Trail Club badge</title>
  <defs>
    <path id="badge-arc"
          d="M70 215 A130 130 0 0 1 330 215" />
  </defs>
 
  <circle cx="200" cy="205" r="166"
          fill="#f8f3e7" stroke="#214b41" stroke-width="6" />
  <g id="emblem" fill="#214b41">
    <path d="M200 150 148 220 175 220 133 273
             267 273 225 220 252 220Z" />
    <path d="M188 269H212V303H188Z" />
  </g>
 
  <text fill="#214b41" font-family="Georgia, serif"
        font-size="29" text-anchor="middle">
    <textPath href="#badge-arc" startOffset="50%">PINE TRAIL CLUB</textPath>
  </text>
</svg>

Ścieżka zaczyna się w punkcie (70, 215) i biegnie po górnym półokręgu do punktu (330, 215). Jej promień wynosi 130 jednostek. Umieszczenie ścieżki w <defs> pozwala się do niej odwoływać bez rysowania widocznego obrysu. Jasne koło zewnętrzne jest osobnym, widocznym kształtem.

Zastąp PINE TRAIL CLUB własną krótką nazwą, zapisz plik i odśwież widok. Drzewo powinno pozostać na miejscu, a nowe słowa powinny biec wzdłuż tej samej ścieżki prowadzącej. Dłuższa nazwa wymaga ponownego sprawdzenia dopasowania; wyśrodkowanie nie sprawi, że dowolny tekst zmieści się na łuku.

Wyśrodkuj tekst za pomocą przesunięcia i kotwicy

startOffset="50%" umieszcza punkt odniesienia tekstu w połowie długości ścieżki. text-anchor="middle" wyrównuje środek tekstu do tego punktu. Pierwsze ustawienie wybiera miejsce na krzywej; drugie określa, która część tekstu ma się tam znaleźć. MDN — startOffset i MDN — text-anchor opisują te ustawienia.

Spróbuj zmienić tylko text-anchor na start. W przypadku tego tekstu pisanego od lewej do prawej słowa zaczynają się teraz w połowie ścieżki i biegną w stronę prawego punktu końcowego. W naszym teście w przeglądarce przesunęło to napis na prawą stronę, a część frazy znalazła się poza użytecznym odcinkiem łuku. Przywróć middle, zanim zmienisz rozmiar fontu.

W przypadku symetrycznej odznaki oceń efekt wzrokowo po matematycznym wyśrodkowaniu. Litery mają różne kształty i boczne odstępy; nawet tekst wyśrodkowany na podstawie łącznej szerokości glifów wraz z odstępami może wymagać niewielkiej korekty optycznej. Wprowadzaj taką korektę świadomie, zamiast zmieniać kilka niezwiązanych ze sobą współrzędnych, aż efekt będzie wyglądał mniej więcej dobrze.

Sprawdź kierunek ścieżki, zanim przesuniesz tekst

Odwróć dokładnie ten górny łuk, zastępując jego wartość d następującą:

d="M330 215 A130 130 0 0 0 70 215"

Początek i koniec zamieniają się miejscami, a flaga kierunku łuku się zmienia. Wizualne objaśnienie obu flag łuku znajdziesz w artykule o czterech kombinacjach flag łuku SVG. Geometryczna krzywa pozostaje w tym samym miejscu, ale tekst biegnie po niej w przeciwnym kierunku. W naszym teście w przeglądarce takie odwrócenie zmieniło orientację napisu. Przywróć oryginalną ścieżkę, aby napis u góry tej odznaki miał prawidłową orientację.

Odwrócenie ścieżki to coś innego niż odwrócenie kolejności liter w słowach lub ustawienie kierunku pisma danego języka. Zachowaj słowa bez zmian. Specyfikacja układu tekstu SVG wyjaśnia sposób rozmieszczania glifów wzdłuż ścieżki. Aby dodać dolny wiersz, utwórz i przetestuj osobną dolną ścieżkę prowadzącą, zamiast przesuwać górny tekst, aż przejdzie przez emblemat.

Wybierz font przed ostatecznym ustawieniem odstępów

Przykład wskazuje font Georgia, a następnie ogólną rodzinę szeryfową jako opcję zastępczą. Takie wskazanie nie osadza fontu w SVG. Mechanizm renderujący wybiera dostępny krój z listy rodzin, zgodnie z opisem w MDN — font-family.

W naszej demonstracji w Chromium zmiana fontu dla tej samej treści z Georgia, serif na Arial, sans-serif zmieniła zmierzoną łączną szerokość glifów wraz z odstępami. Łuk i emblemat pozostały bez zmian. Sprawdzaj przede wszystkim zajmowany odcinek i wygląd liter, a nie konkretną szerokość, którą inny komputer może wyrenderować inaczej.

W przypadku rzeczywistej odznaki ustal docelowy font i jego grubość, zanim zmienisz rozmiar lub odstępy między literami. Następnie ponownie otwórz SVG w środowisku, w którym będzie używany. Jeśli font się tam zmieni, skorzystaj z przewodnika rozwiązywania problemów z fontami w SVG, aby ustalić, czy przyczyną jest zastępowanie fontu, czy sposób importu.

Jeśli napis wychodzi poza łuk, spróbuj krótszej frazy, mniejszego rozmiaru fontu lub szerszej ścieżki prowadzącej. Sprawdzaj całą odznakę po każdej zmianie. Zwiększenie promienia ścieżki prowadzącej może przesunąć napis bliżej zewnętrznego obramowania; zmniejszenie rozmiaru pisma może utrudnić odczytanie małej drukowanej odznaki. Unikaj rozciągania liter tylko po to, by wypełnić ustalony odcinek, chyba że takie zniekształcenie jest częścią projektu.

Odzyskaj tylko grafikę wymagającą wektoryzacji

Jeśli emblemat istnieje wyłącznie w pliku PNG lub JPG, oddziel jego odzyskiwanie od pracy nad typografią. Użyj kopii materiału źródłowego, w której emblemat jest wyodrębniony możliwie najdokładniej. Zachowaj pełny oryginał jako wzorzec wizualny do odtworzenia odznaki.

Zwektoryzuj rastrowy emblemat w PerfectVector, a następnie porównaj jego sylwetkę, wewnętrzne prześwity i drobne szczegóły z materiałem źródłowym. Umieść zaakceptowaną grafikę SVG w grupie emblematu, a napis odtwórz osobno przy użyciu docelowego fontu. PerfectVector tworzy ścieżki wektorowe z obrazu; ten sposób pracy nie wymaga OCR, identyfikacji fontu ani automatycznego odtwarzania edytowalnego tekstu po łuku.

Jeśli oryginalny emblemat wektorowy jest dostępny, użyj go ponownie. Jeśli litery napisu zostały narysowane specjalnie na potrzeby projektu, a ich nieregularne kształty są istotne, skorzystaj ze sposobu przekształcania ręcznie rysowanych liter w grafikę wektorową, zamiast zastępować je fontem. Nasz przewodnik po wektoryzacji logo omawia szerzej wybór między wektoryzacją, ponownym wpisaniem tekstu i ręcznymi poprawkami.

Proste drzewo w przykładzie pozwala uniknąć komplikacji związanej z importem: istniejący emblemat może korzystać z innego układu współrzędnych lub zawierać transformacje. Przeskaluj i ustaw tę grupę w obrębie viewBox odznaki, a następnie sprawdź ją ponownie z widocznym tekstem. Nie zmieniaj ścieżki prowadzącej napis, aby skompensować nieprawidłowe położenie emblematu.

Zachowaj edytowalny plik główny i utwórz kopię do przekazania

Edytowalny tekst przydaje się w pliku głównym, gdy nazwy, daty lub treść mogą się zmieniać. W przypadku odznaki o ustalonej treści, wysyłanej do innego edytora lub narzędzia produkcyjnego, kopia z tekstem zamienionym na kontury zwalnia odbiorcę z konieczności odtworzenia kształtów glifów danego fontu. Słowa stają się ścieżkami wektorowymi i tracą możliwość zwykłej edycji tekstu.

W opcjach zapisu SVG w Illustratorze polecenie Convert To Outlines zamienia tekst na ścieżki. Adobe ostrzega również, że wyeksportowany tekst na ścieżce może być renderowany inaczej w przeglądarkach SVG. To powody, by sprawdzić wyeksportowaną kopię w docelowym środowisku, a nie gwarancja, że każde kolejne narzędzie odtworzy całą odznakę. Zobacz Adobe — Save artwork in Illustrator.

Przekazując plik, wykonaj kolejno te kroki:

1. Zapisz plik główny z edytowalnym tekstem, zanim zamienisz cokolwiek na kontury.
2. Sprawdź treść, font, kierunek ścieżki, wyśrodkowanie i odstępy.
3. Utwórz osobną kopię do przekazania i zamień w niej tekst na kontury w swoim edytorze.
4. Otwórz tę kopię ponownie i porównaj wszystkie litery, światła wewnątrz liter, odstępy oraz emblemat.
5. Sprawdź odznakę w docelowym rozmiarze wyjściowym w aplikacji odbiorcy.

Zamiana na kontury utrwala aktualny wygląd fontu. Jeśli w tym momencie aktywny jest niewłaściwy font zastępczy, utrwalisz niewłaściwe litery. W przypadku obrazu do publikacji w internecie zachowaj też użyteczną nazwę dostępną dla technologii wspomagających; same kształty liter zamienione na kontury nie zawierają oryginalnego ciągu tekstowego.

FAQ

Dlaczego mój tekst SVG nie jest wyśrodkowany na ścieżce? W wyśrodkowanym przykładzie użyj startOffset="50%" razem z text-anchor="middle". Przesunięcie o 50% z kotwicą start sprawia, że fraza zaczyna się w połowie ścieżki prowadzącej. Sprawdź też kształt ścieżki i to, czy cały napis się mieści.

Dlaczego tekst jest do góry nogami? Sprawdź kierunek ścieżki prowadzącej. Tekst biegnie wzdłuż ścieżki zgodnie z kierunkiem jej rysowania, więc odwrócenie ścieżki może zmienić orientację napisu. Przetestuj kierunek ścieżki prowadzącej, zanim przesuniesz tekst lub zmienisz kolejność jego liter.

Czy wektoryzacja odznaki tworzy edytowalny tekst po łuku? Wektoryzacja odtwarza widoczne kształty liter jako grafikę. Aby treść była edytowalna, odtwórz tekst osobno przy użyciu docelowego fontu i ścieżki prowadzącej wskazanej przez textPath. Zachowaj plik główny z edytowalnym tekstem, zanim utworzysz kopię do przekazania z tekstem zamienionym na kontury.

Źródła

1. MDN — textPath — Łączenie edytowalnego tekstu ze ścieżką wskazaną przez odwołanie.
2. MDN — startOffset — Pozycjonowanie tekstu wzdłuż ścieżki prowadzącej.
3. MDN — text-anchor — Wyrównywanie tekstu względem jego punktu odniesienia.
4. W3C — SVG 2 text — Rozmieszczanie glifów i zasady układu tekstu na ścieżce.
5. MDN — font-family — Dostępne fonty i wybór rodziny zastępczej.
6. Adobe — Save artwork in Illustrator — Zamiana tekstu SVG na kontury i ograniczenia eksportu tekstu na ścieżce.

Zbuduj napis wokół zatwierdzonego emblematu i zachowaj możliwość edycji słów do czasu ukończenia odznaki. Jeśli Twój emblemat jest uwięziony w obrazie rastrowym, odzyskaj jego ścieżki wektorowe, sprawdź drobne szczegóły i użyj zaakceptowanej grafiki w pliku głównym odznaki.