> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # SVGのテキスト折り返し：tspanで計測済みの行を作る > 実際のフォントで単語を計測し、tspanを生成してSVGラベルを折り返します。狭い幅を試し、長すぎる単語や行数超過を拒否して結果を保存します。 Source: https://perfectvector.com/ja/blog/svg-text-wrap-tspan Language: ja Author: Irene Kim Published: 2026-10-06T08:00:00+09:00 Updated: 2026-10-06T08:00:00+09:00 変化するSVGラベルを明示的な行に折り返すには、候補となる単語のまとまりを`getComputedTextLength()`で計測し、採用した各行に一つの``を書き込みます。まずドキュメントのフォントを待ち、一つの単語がラベルより広い場合や、結果が行数制限を超える場合の動作を決めてください。以下のひな形は空白で区切られた単語を使い、どちらの超過も部分的なラベルを出力せずに拒否します。独自の中空ひし形イラストと文言を分けているため、ラベル幅を変えてもアートワークを描き直しません。 ## 行を配置する前に折り返し方針を選ぶ [`tspan`要素](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/tspan)では、SVGテキストの一部を配置できます。この処理は各行に同じ`x`を設定し、二行目以降に`dy`のオフセットを設定します。改行位置は処理が判断し、要素は結果を保持します。これは明示的なレイアウトの一つの方法です。[SVG 2のテキスト仕様](https://www.w3.org/TR/SVG2/text.html)は、コンテンツ領域とCSSテキストレイアウトによる自動折り返しも定義しています。この記事はその機能をテストせず、すべてのブラウザーにないと主張するものでもありません。イラストの外のHTML段落には、[CSSでフロートしたSVGのシルエットにテキストを回り込ませる方法](https://perfectvector.com/ja/blog/css-text-around-svg-shape)を使ってください。そのレイアウトは画像の輪郭に従い、文言は通常のHTMLのままで、位置指定したSVGラベルの行にはなりません。この小さな英語ラベルの例では、次の方針を使います。 * 連続する空白をまとめ、単語を元の順序で、一つのスペースで区切って試します。 * 計測した長さが利用可能な幅に収まる間だけ、候補の行を残します。 * 単独でも収まらない単語は拒否し、ハイフネーション位置を勝手に作りません。 * `maxLines`を超える場合は結果全体を拒否し、最後の単語を黙って省きません。行数制限はレイアウトの判断です。開始ベースライン、行間、利用可能な高さと一緒に選んでください。この折り返し処理は、縦方向のコンテンツボックスを計算しません。 **ラベル幅を変え、アートワークを保つ** ![中空ひし形のイラストの横で、幅広いラベルの長い行と狭いラベルの短い行を比較する概念図](https://perfectvector.com/blog/svg-text-wrap-tspan/measured-lines.webp) *模式図：ラベルが狭いと行数が増える場合があります。抽象的な棒と点線の枠は概念的な目印です。以下の実際の文言、計測、拒否状態は、独立したブラウザーのひな形に基づきます。* ## ラベルを描くフォントで計測する [`getComputedTextLength()`](https://developer.mozilla.org/en-US/docs/Web/API/SVGTextContentElement/getComputedTextLength)は、SVGテキストの計算済みの長さを測ります。このひな形は、ラベルのtext要素を、同じ接続済みSVG内の非表示の計測用要素として複製し、行の計画後に削除します。両方とも、22単位の`Arial, sans-serif`を明示的に使います。コードは計測前に[`document.fonts.ready`](https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/ready)を待ちます。ドキュメントのフォント読み込みと関連するレイアウトを待つもので、書き出しSVGにフォントを埋め込むものではありません。別の利用可能なフォントでは、行の長さが変わる場合があります。文言、フォント設定、利用可能な幅が変わったら、レイアウトを再実行してください。 ## 依存のない完全なひな形を実行するこれを`starter.html`として保存し、ブラウザーで開きます。六つのケースを作り、計測結果を表示して、各結果SVGをシリアライズします。最初の二つはラベル幅だけを変え、三つ目は文言を変えます。残りは拒否とリテラルのテキストを確認します。 ```html Measured SVG label lines

Keep artwork and label layout separate

``` 処理は文言をマークアップとして挿入せず、[`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)で各行を作ります。リテラルテキストのケースでは、`Cove & field`は通常のテキストのままです。シリアライズしたSVGには、追加のグループ要素ではなく、エスケープされた山かっことアンパサンドが含まれます。計測用の複製は、接続されていますが非表示で、見えるラベルと同じフォント属性を持ちます。拒否の場合も含め、`finally`で削除します。単語幅と最大行数の確認が成功してから、行を追加します。最初に以前のラベルを消すので、拒否された更新は古いテキストや部分的なテキストを残しません。アプリケーションの画面側で、返された状態を処理してください。 ## 六つの元ケースの結果ドキュメントのフォントが`loaded`を報告するChromeで、このひな形をそのまま実行しました。以下の長さはその環境でのSVGテキスト長で、描画されたグリフの範囲や、フォントの可搬性の保証ではありません。 | ケース | 幅 / 最大行数 | 結果 | 観察した最長行 | | ---------------- | -------- | -------------------------------------- | ------------ | | 元のフレーズ | 200 / 4 | 二行：Keep artwork and; labels separate | 172.44 | | 同じフレーズ、狭い枠 | 110 / 5 | 四行：Keep; artwork; and labels; separate | 100.30 | | 長い文言 | 200 / 4 | 三行 | 198.13 | | 長すぎる単語 | 110 / 5 | overlong-word、tspanはゼロ | 単語の計測幅311.82 | | 狭いフレーズ、二行制限 | 110 / 2 | too-many-lines、必要行数は四、tspanはゼロ | ラベルを出力しない | | リテラルの山かっことアンパサンド | 200 / 4 | リテラルの一行 | 162.66 | 元のフレーズは`Keep artwork and labels separate`、長い版は`Keep the original artwork beside every exported label`です。採用した行はすべて、選んだ幅以内と計測されました。拒否ケースはイラストを表示したままラベルを省くため、失敗状態を確認しやすくなっています。シリアライズした六つのファイルはすべて、同一の元のひし形パス、一つのネイティブtext要素を保ち、画像や`foreignObject`はありませんでした。採用ケースのtspan数は、それぞれ二、四、三、一で、拒否した二つのケースはゼロでした。また六つのシリアライズ済みSVGを同じブラウザーで画像として開き直し、すべて360×240で読み込まれました。これはこれらのファイルとこのブラウザーの確認であり、すべてのエディターやレンダラーの確認ではありません。 ## レイアウト済みSVGを保存してから利用先をテストする [`XMLSerializer.serializeToString()`](https://developer.mozilla.org/en-US/docs/Web/API/XMLSerializer/serializeToString)は、報告内のシリアライズ済みマークアップを作ります。成功したケースの`serialized`文字列を`.svg`ファイルとして保存してください。ファイルにはすでに明示的な行があり、再現のためにこのJavaScript処理は必要ありません。単語は生きたテキストのままです。保存ファイルが保持するのはfont-familyの指定で、フォントファイルやアウトライン化したグリフではありません。利用先のフォントが異なると、行の文字列と位置が残っていても、文字の見た目が変わる場合があります。元の文言とレイアウト入力を、書き出したコピーと一緒に保管し、納品前に実際の利用先で確認してください。字形を固定するには、適切な元データ用エディターでアウトライン化した納品用コピーを作り、マスターには生きたテキストを残します。 [foreignObjectのテキストガイド](https://perfectvector.com/ja/blog/svg-foreignobject-text)は、別のレンダラーで消えるHTMLラベルを扱います。このひな形は最初からネイティブテキストを作ります。[textLengthガイド](https://perfectvector.com/ja/blog/svg-textlength-fit)は、長さを調整して一行を収める方法を扱い、計測した行を追加する場合とは異なる判断です。ラベル全体を周囲のアートワークに対して配置する必要があるときは、[垂直方向の位置合わせガイド](https://perfectvector.com/ja/blog/svg-text-vertical-alignment)を使ってください。 ## 折り返し処理の制約を明確にする空白での分割は、意図的に小さくした方針です。連続するスペース、タブ、明示的な改行をまとめ、言語固有の禁則や改行規則、ハイフネーション、双方向段落、複数のスタイルを混ぜたリッチなspanには対応しません。その機能が必要なら、別のレイアウトシステムを選ぶか、方針を拡張してテストしてください。幅の確認は、装飾的なグリフのはみ出しが枠内に収まることや、五つのベースラインが選んだ高さに収まることも保証しません。納品サイズで見える文字を確認してください。このテストは水平ラベル、固定のフォント属性、30単位の行間隔を使います。再計測せずに、数値を別の書体に当てはめないでください。イラストがPNGやJPGでしか存在せず、編集可能なアートワークが必要なら、[PerfectVectorでクリップアートSVGを準備](https://perfectvector.com/ja/clipart-to-svg)し、縁と内部の開口部を確認して、ラベルと別に保管します。文言はネイティブテキストとして打ち直し、折り返し方針を実行して、組み上げた書き出しを確認してください。ベクター化はイラストのパスを準備するもので、改行位置を選んだり、トレースした文字から編集可能な単語を復元したりしません。良好な既存パスは、そのまま残せます。[ベクター化ガイド](https://perfectvector.com/ja/blog/what-is-image-vectorization)が、その元データ復元の段階を説明しています。 ## よくある質問 **tspanは各行の改行位置を自動で決めますか？** このひな形は単語群を計測して判断し、採用した各行に一つの位置指定tspanを作ります。SVG 2のCSSベースの自動折り返しはテストしていません。 **ラベルより長い単語はどうなりますか？** 処理はoverlong-wordを返し、ラベルを出力しません。黙って切り抜くのではなく、領域を広げる、文言を短くする、別途テストした分割方針を用意する、のいずれかを行ってください。 **maxLinesは残りの単語を削除しますか？** 削除しません。行数が多すぎる場合、この方針は結果を拒否し、必要な行数を報告して、tspanをゼロにします。アプリケーションがその状態を処理する必要があります。 **別のフォントでも書き出した行は同じに見えますか？** 明示的な単語と位置は残りますが、ファイルはフォントを埋め込まず、グリフをアウトライン化しません。実際の利用先で、使えるフォントと文字の見た目を確認してください。 ## 出典 1. [MDNのtspan要素](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/tspan) — 位置指定した部分テキストと、行オフセットの属性。 2. [W3CのSVG 2テキスト](https://www.w3.org/TR/SVG2/text.html) — 明示的な配置と、別の自動折り返しモデル。 3. [MDN getComputedTextLength](https://developer.mozilla.org/en-US/docs/Web/API/SVGTextContentElement/getComputedTextLength) — 実際のSVGテキストの計測。 4. [MDN FontFaceSet.ready](https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/ready) — フォント読み込みとレイアウトの待機。 5. [MDN textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) — マークアップではなくプレーンテキストの挿入。 6. [MDN XMLSerializer](https://developer.mozilla.org/en-US/docs/Web/API/XMLSerializer/serializeToString) — レイアウト済みSVGマークアップの保存。 *** 自分のラスターイラストには、[編集可能なクリップアートを準備](https://perfectvector.com/ja/clipart-to-svg)し、図形を確認してマスターを保管します。文言を別に追加し、納品前に保存したSVGで採用された行と見える文字を確認してください。 ## Explore - [Read the HTML article](https://perfectvector.com/ja/blog/svg-text-wrap-tspan) - [SVG.js：アートワークを読み込み、パスを編集してSVGを書き出す](https://perfectvector.com/ja/blog/svgjs-import-export-artwork.md) - [LeafletのSVGマーカー：iconAnchorで先端を合わせる](https://perfectvector.com/ja/blog/leaflet-svg-marker-anchor.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)