SVG文字の縦位置：作り直したラベルを中央に揃える

横書きSVGラベルでは、y は選んだベースラインの位置を指定します。文字の上端をその座標に置くものではありません。短いラテン文字ラベルを水平ガイドの周囲に置くなら dominant-baseline="middle" から始め、実際のフォントで確認してください。横方向は text-anchor="middle" で x の周囲に中央揃えします。

紋章の隣のラベルは、まだ高くも低くも見える場合があります。middle と central は異なるフォントのベースラインを使い、視覚的な中央は単語の形状に依存します。オフセットを加える前に、共通のベースライン、文字枠の中央、視覚的調整のどれが必要か決めます。

揃える対象を選ぶ

同じ y="100" でも文字位置は異なります。

W3Cのベースライン定義は middle と central を区別します。どちらもすべての単語の描画輪郭を中央にするとは約束しません。MDNのdominant-baselineリファレンスのとおり、フォントのベースライン表とレンダラーの推定も関係します。

通常の横書きでは text-anchor="middle" はもう一方の軸を扱います。指定した横位置の周囲に文字のまとまりを揃えるもので、縦の中央配置はしません。まとまりとの関係はtext-anchorリファレンスを参照してください。

紋章と編集可能なラベルを比較する

次の完全な例を baseline-example.svg として保存し、ブラウザーで開きます。輪はオリジナルの形状で、Agyp はアセンダーとディセンダーを含むテスト文字列です。赤線は y=100 を示します。

<svg xmlns="http://www.w3.org/2000/svg" width="840" height="400"
     viewBox="0 0 420 200">
  <path fill="#137f74" fill-rule="evenodd"
    d="M55 75A25 25 0 1 1 55 125A25 25 0 1 1 55 75
       M55 86A14 14 0 1 0 55 114A14 14 0 1 0 55 86"/>
  <path d="M20 100H400" fill="none" stroke="#c3594d"/>
  <text id="label" x="250" y="100" font-family="Arial, sans-serif"
        font-size="64" text-anchor="middle" dominant-baseline="middle"
        fill="#193e3a">Agyp</text>
</svg>

dominant-baseline だけを alphabetic、次に central へ変えます。座標、フォントサイズ、文言は固定します。その後、別の利用可能なフォントを比較してください。複数設定を同時に変えると、何がラベルを移動したか分かりにくくなります。

私たちは読み込んだArialとTimes New Romanで3値を描画しました。各パネルは同じSVG座標とオリジナルの輪を使い、緑の長方形は編集可能な文字に対するブラウザーの getBBox() の結果です。

alphabeticの例は輪の中心線に対して高く、middleは下へ移り、centralは報告された枠をガイド近くに置きます。各標本の下の測定値は、このフォントファイルとブラウザー描画のものです。別のデザインにコピーするオフセットではありません。

測定前にフォントファイルを読み込みました。書き出したSVGは要求したフォントがないと代替を選ぶ場合があるため、配置を判断する前に依存関係を解決します。SVGのフォント変更ガイドは実際の書体の確認と納品コピーの保持を扱っています。

文字枠が中央でも見た目が偏る場合

SVGの文字境界は、見えるインクの最小長方形とは限りません。SVGの境界枠の規則は、文字計算に字形セルとフォントのアセント・ディセントを使います。セルを囲む長方形には、文字が描画しない空間を含む場合があります。

Agyp のように g、y、p がアルファベットのベースライン下へ伸びるラベルでは重要です。すべて大文字のラベルは視覚的分布が違います。配置の調整時には、予定するフォントと実際の文言を使ってください。

1行として読ませたいラベル群は、共通のalphabeticベースラインを維持します。各単語の見える形状が中央に見えるまで個別に動かすと、行が不揃いになる場合があります。

単一の紋章と文字の組み合わせでは、ベースラインを選んだ後に最終サイズで比較し、目視で調整します。文字輪郭による整列が要件なら、編集ソフトのアウトライン化した複製で形状を確認し、編集可能なマスターには文字を保持します。アウトライン境界と視覚的な調整は別の判断として扱います。

測定したSVG文字枠の中央を揃える

単純で変換のない1行の <text> 要素なら、報告された枠中央から目標へのオフセットを計算します。例の文書でフォント準備後に実行します。

await document.fonts.ready;
 
const label = document.querySelector('#label');
const targetY = 100;
const originalY = label.y.baseVal.getItem(0).value;
const box = label.getBBox();
const shift = targetY - (box.y + box.height / 2);
 
label.setAttribute('y', String(originalY + shift));

計算は報告された文字枠を targetY に揃えます。視覚的なバランスを計算せず、フォントの使っていない字形セルの空間も除きません。文言、フォント、ウェイト、サイズを変えたら再測定します。

document.fonts.readyは、フォント読み込みと関連レイアウトを待ちます。意図したフォントが正常に供給された証明ではないため、リソースやブラウザーの描画フォント情報も確認してください。

このコードは y 値1つ、文字ごとの位置指定なし、dy オフセットなし、文字グループの変換なしを想定します。getBBox()はローカルのSVG枠を返します。別座標系の目標には対応付けが必要です。画面ピクセルとSVG単位を混ぜる前にSVG境界の手順を使います。

オフセットを増やす前に競合設定を解決する

文字と親グループを確認します。残った dy、入れ子の <tspan>、変換は、診断したい配置を変える場合があります。コピーで疑わしい調整を1つずつ除き、結果を比較してください。

ページスタイルも確認します。CSSは dominant-baseline のプレゼンテーション属性を上書きできます。属性変更が見た目に効かないなら、2つ目の補正を追加する前に計算済みの値を確認します。

alignment-baseline は要素のベースラインを親の対応するベースラインに揃える方法を扱います。「このラベルをSVG中央にする」の一般的な同義語ではありません。MDNのalignment-baselineリファレンスはブラウザー対応の制限も示しています。この独立ラベルは dominant-baseline に絞ってテストし、実際の書き出し先を検証します。

この例は1ブラウザーの横書きラテン文字です。曲線ラベルには別の配置確認が必要です。SVGのパス上の文字の手順は文字とガイド曲線を分けます。他の文字体系や縦書きには個別のベースライン判断が必要です。

記号と文字を分けて保持する

きれいなベクター紋章があれば保持し、ラベルを編集可能な文字で作り直します。ラベルの移動やフォント選択にベクター化は不要です。

紋章がPNGやJPGだけなら、PerfectVectorのロゴベクター化ツールでその部分の形状候補を作れます。輪郭と開口部を確認し、新しく打った文字の隣に選んだベースラインで配置します。ベクター化は元のフォントを特定せず、ラスターから編集可能な文字組みも復元しません。

正確なブランド文字には、利用可能なら元のフォントとベクター素材を使うか、意図的に再構築します。ロゴベクター化ガイドは、保持、トレース、描き直しの選択を支援します。

納品前に実際の文言とフォント、最終サイズの組み合わせを確認し、書き出したSVGを利用先で開き直します。納品コピーがアウトライン文字なら、編集可能なマスターを保持してください。

よくある質問

dominant-baseline="middle"はcentralと同じですか？ いいえ。middleはx-heightに関連するベースラインを使い、centralはem枠に関連する中央のフォントベースラインを使います。位置が異なる場合があり、どちらもすべての単語の視覚的中央を保証しません。

text-anchor="middle"はSVG文字を縦の中央にしますか？ 通常の横書きではtext-anchorはx座標の周囲の横配置を制御します。縦はdominant-baselineで別途選び、予定フォントで確認してください。

getBBoxで見える文字を正確に中央にできますか？ ブラウザーが報告するSVG文字枠は中央にできます。境界は描画された文字以外の字形セルの空間も含み得るため、視覚的中央やぴったりした輪郭の整列は保証しません。

参考資料

1. W3C — SVGのベースライン整列 — alphabetic、middle、centralを定義しています。
2. MDN — dominant-baseline — ベースライン表、フォントの推定、CSSの優先を説明しています。
3. MDN — text-anchor — 指定位置の周囲に文字のまとまりを固定する方法を説明しています。
4. W3C — SVGの境界枠 — 文字境界に使う字形セルのモデルを説明しています。
5. MDN — FontFaceSet.ready — フォント読み込みとレイアウトの完了時点を定義しています。
6. MDN — getBBox — ローカルSVG境界と変換の除外を説明しています。
7. MDN — alignment-baseline — 親との整列とブラウザー対応の制限を説明しています。

作り直したロゴに編集可能な紋章がまだ必要なら、PerfectVectorでSVG候補を作成し、復元輪郭を確認してください。その後、編集可能な文字と組み合わせ、最終利用先で配置を確認します。