SVGのパス上の文字：編集可能なバッジの文字を作り直す
編集可能なSVGのパス上の文字でバッジを作ります。中央配置、方向、フォントを確認し、アウトライン版を作る前にエンブレムを分けて保持します。
目次
SVGの文字をパス上に置くには、ID付きのパスを定義し、<text>内の<textPath>から参照して、タグの間に文字を書きます。中央配置には、startOffset="50%"とtext-anchor="middle"を組み合わせます。画像を作り直さずに文字を変えられるよう、エンブレムは別のグループに保持します。
クラブのバッジ、店のマーク、イベントのロゴを復元する場合に、この分離が役立ちます。中央エンブレムにベクターパスが必要な一方、日付の修正や名前の変更も必要かもしれません。バッジ全体をトレースすると、文字は形状になり、編集可能な文字列にはなりません。文言を編集できる必要があるなら、ライブテキストで文字組みを作り直します。
エンブレムの横の水平な文字には、textLengthで直線のSVGラベルを収める方法を使い、字形の比率を変える前に間隔の変化を比較します。
3つの部分を分けて始める
バッジには、エンブレム、ガイドパス、それに沿う文字が必要です。ガイドは文字の位置を制御し、完成したデザインでは見える必要はありません。MDNのtextPathリファレンスは、文字とパスをつなぐhrefを説明しています。
| 部分 | 内容 | 独立して変えられるもの |
|---|---|---|
| エンブレムのグループ | 中央画像の形状 | 色、位置、倍率 |
| ガイドパス | 文字のベースラインとなる曲線 | 半径、方向、端点 |
| ライブテキスト | 文字とフォント設定 | 文言、書体、サイズ、間隔 |
以下の例用に、SVGコードで単純な松の木と半円のガイドを描きました。どちらも独自のデモ画像で、PerfectVectorの変換結果ではありません。バッジの文言はPINE TRAIL CLUBです。作成手順を通じて、文字は文字列のままです。
編集可能なバッジを作る
コードをbadge.svgとして保存し、ブラウザーで開きます。ファイルは編集可能なマスターとして保持します。形式に慣れていない場合は、SVGファイルのガイドで、文字、パス、埋め込み画像の違いを確認できます。
<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>パスは(70, 215)から始まり、上半円に沿って(330, 215)へ進みます。半径は130単位です。パスを<defs>へ置くと、見えるストロークを描かず参照できます。淡い外側の円は、別に塗った形状です。
PINE TRAIL CLUBを自分の短い名前へ変え、保存して再読み込みします。木は固定したまま、新しい文字が同じガイドに沿うはずです。長い名前には、再び収まりの確認が必要です。中央配置は、どんな文字でも円弧に収めるものではありません。
オフセットとアンカーの両方で中央配置する
startOffset="50%"は、文字の参照位置をパスの半分に置きます。text-anchor="middle"は、文字の中央をその位置へ合わせます。一方は曲線上の位置、もう一方は文字のどの部分をそこに置くかを選びます。startOffsetリファレンスとtext-anchorリファレンスがこれらを説明しています。
text-anchorだけをstartへ変えてみます。この左から右への文字では、文言が中間点から始まり、右端へ進みます。ブラウザーテストでは、文字が右側へ動き、文言の一部が使用可能な円弧からはみ出しました。フォントサイズを調整する前にmiddleへ戻します。
対称なバッジでも、数式による中央配置の後に目視します。字形や左右の空間は異なるため、文字の送り幅を中央にしても、少し光学的な調整が必要な場合があります。無関係な座標をいくつも変えて近い見た目にするのではなく、その調整を意図して行います。
文字を動かす前にパスの方向を確認する
この同じ上円弧を反転するには、d値を次へ置き換えます。
d="M330 215 A130 130 0 0 0 70 215"開始点と終点が入れ替わり、円弧のsweepフラグが変わります。2つの円弧フラグの視覚的な説明には、SVG円弧フラグの4つの組み合わせを参照してください。幾何学的な曲線は同じ位置ですが、文字は逆方向に沿います。ブラウザーテストでは、この反転が文字の向きを変えました。バッジ上部で文字を正立させるには、元のパスに戻します。
パスの反転は、綴りを逆にしたり、言語の書字方向を設定したりすることとは異なります。文言はそのまま保持します。SVGの文字レイアウト仕様は、パスに沿った字形配置を説明しています。下側の文字列には、上の文字をエンブレムに交差するまで動かすのではなく、別の下側ガイドを作ってテストします。
最終的な間隔の前にフォントを選ぶ
例はGeorgia、次に一般的なserifの代替を要求します。SVGへフォントを埋め込む要求ではありません。レンダラーはファミリー一覧から利用できる書体を選びます。MDNのfont-familyリファレンスが説明しています。
Chromiumのデモでは、同じ文言をGeorgia, serifからArial, sans-serifに変えると、測定した文字の送り幅が変わりました。円弧とエンブレムは同じでした。重要なのは、別のコンピューターでは異なり得る特定の幅ではなく、占める範囲と文字の見た目です。
実際のバッジでは、サイズや字間を調整する前にフォントと太さを決めます。その後、使う環境でSVGを開き直します。そこでフォントが変わる場合は、SVGフォントの問題を調べるガイドで代替や読み込み動作を切り分けます。
文言が円弧からはみ出すなら、短い文言、小さいフォント、広いガイドを試します。変更ごとにバッジ全体を確認します。ガイドの半径を増やすと外側の縁に文字が近づき、文字を小さくすると小さな印刷バッジで読みにくくなります。変形を意図したデザインでない限り、固定した範囲を満たすためだけに文字を伸ばさないでください。
トレースが必要な画像だけを復元する
エンブレムがPNGやJPG内にしかない場合は、復元と文字組みを分けます。できる限りきれいにエンブレムを分離した元データのコピーを使います。バッジを作り直す視覚的な基準として、全体の元画像も保持します。
PerfectVectorでラスターのエンブレムをベクター化し、輪郭、内部の隙間、細部を元画像と比較します。承認したSVGをエンブレムのグループに使い、文言は意図したフォントで別途作り直します。PerfectVectorは画像からベクターパスを作ります。この手順はOCR、フォント識別、曲線上の編集可能な文字の自動復元には依存しません。
元ベクターのエンブレムがあれば再利用します。独自の手書き文字で不規則な形が重要なら、フォントに置き換えず、手書き文字をベクターにする手順を使います。ロゴのベクター化ガイドは、トレース、再入力、手動修復の幅広い選択を扱っています。
例の単純な木は読み込みの複雑さを避けています。既存エンブレムは異なる座標系や変換を持つ場合があります。そのグループをバッジのviewBox内で拡大縮小・配置し、文字を見せた状態で再確認します。誤ったエンブレム配置を補うために、文字のガイドを変えないでください。
編集可能なマスターを保持し、納品用コピーを作る
名前、日付、文言が変わり得る場合、ライブテキストは有用なマスターです。確定バッジを別のエディターや製作用ツールへ送る場合、アウトライン版は受け取り手がフォントの字形を再現する必要をなくします。文字はベクターパスになり、通常の文字編集を失います。
IllustratorのSVG保存オプションのConvert To Outlinesは、文字をパスへ変換します。Adobeは、書き出したパス上の文字がSVGビューアーで異なって描画される場合も警告しています。対象環境で出力を確認する理由であり、すべての後工程がバッジ全体を再現する保証ではありません。AdobeのSVG保存ドキュメントを参照してください。
次の順で受け渡します。
- アウトライン化する前にライブテキストのマスターを保存します。
- 文言、フォント、パス方向、中央配置、間隔を確認します。
- 別の納品コピーを作り、エディターで文字をアウトラインへ変換します。
- コピーを開き直し、すべての文字、内側の穴、隙間、エンブレムを比較します。
- 受け取り側のアプリで、意図した出力サイズのバッジを確認します。
アウトライン化は、その時点のフォントの見た目を固定します。誤った代替フォントが有効な状態で行うと、誤った文字を固定します。Web画像には、役立つアクセシブルな名前も保持します。アウトラインの字形自体には、元の文字列は含まれません。
よくある質問
SVGの文字がパスの中央に来ないのはなぜですか？ 中央配置の例ではstartOffset="50%"とtext-anchor="middle"を一緒に使います。50%のオフセットとstartアンカーでは、文言がガイドの半分から始まります。パスの形と文言全体が収まるかも確認します。
文字の上下が逆になるのはなぜですか？ ガイド方向を確認します。文字は描かれたパスに従うため、反転で文字の向きが変わる場合があります。文字を動かしたり綴りを変えたりする前に、ガイド方向をテストします。
バッジのベクター化で、編集可能な曲線の文字ができますか？ ベクター化は、見える字形を画像として復元します。文言を編集するには、意図したフォントとtextPathガイドで別に文字を作ります。アウトラインの納品用コピーを作る前に、ライブテキストのマスターを保持します。
参考資料
- MDN — textPath — ライブテキストと参照パスの接続。
- MDN — startOffset — ガイドに沿った文字の配置。
- MDN — text-anchor — 参照位置に対する文字の整列。
- W3C — SVG 2の文字 — 字形配置とパス上の文字のレイアウト規則。
- MDN — font-family — 利用できるフォントと代替ファミリーの選択。
- Adobe — Illustratorでの画像保存 — SVGの文字のアウトライン化とパス上の文字の書き出し制限。
承認したエンブレムの周囲に文字を作り、完成するまで文言を編集可能に保ちます。エンブレムがラスター内にあるなら、ベクターパスを復元し、細部を確認して、承認した画像をバッジのマスターへ使います。
