Softonic

SVG円形テキストジェネレーター

ステップ 1 / 2
次へ

円形パスに沿う文字は、バッジ、シール、ロゴでよく使われます。SVGでは<textPath>により、文字要素を見えないパスに沿わせます。このジェネレーターはブラウザー内で完全な SVG を作成します。文字、半径、文字サイズ、文字間隔、開始位置、色、パスの向きを調整し、完成した SVG をコピーまたはダウンロードできます。

テキストを円に沿って湾曲させる方法

  1. 1

    テキストを入力

    短いフレーズ（3〜8語）が最も読みやすいです。長い文は小さな半径で自分自身に重なります。

  2. 2

    半径を設定

    半径が大きい＝湾曲が緩い＝文字が読みやすい。小さすぎると文字が大きく傾きます。

  3. 3

    開始位置を動かす

    開始オフセット % で、最初の文字をパスに沿って移動します。自由な角度の回転ではなく、パス上の位置を指定する操作です。

  4. 4

    サイズ、間隔、向きを調整する

    文字サイズ、文字間隔、色、時計回りまたは反時計回りのパス方向を調整できます。

  5. 5

    SVGをコピー

    出力には見えないパス、`<textPath>`、フォントのスタイルが含まれ、どのページにもそのまま入れられます。

textPathの内部の仕組み

<svg viewBox="0 0 300 300">
  <defs>
    <path id="ring" d="M 150,150 m -100,0 a 100,100 0 1,1 200,0 a 100,100 0 1,1 -200,0" />
  </defs>
  <text font-family="Inter" font-size="24" font-weight="700">
    <textPath href="#ring" startOffset="50%" text-anchor="middle">
      CDEM SOLUTIONS . EST 2024 .
    </textPath>
  </text>
</svg>

d属性はm/a（moveto / arc）コマンドで完全な円を描きます。<textPath>がその上に文字列を並べます。startOffsetはパスに沿ったパーセント、text-anchor="middle"はそのオフセットにテキストを中央寄せします。

半径と読みやすさ

半径（px） 曲がり方 向いている用途
40-60 とてもきつい 小さな装飾マーク
80-120 コンパクトな円 バッジ風の素材
140-200 ゆるやかな円 ロゴやシール
250以上 大きく広がる円 大きな装飾

よくあるプリセット

  • 上の弧、180°から始め、円の180°にわたります。上半分は左から右へ読めます。
  • 反転した下の弧、パスの向きを逆にするか、side="right"を使い、テキストが上下逆でも正しく読めるようにします。
  • 完全なリング、テキストが一周します。継ぎ目が不自然にならないよう、先頭と末尾にスペーサー（.）を足します。

書き出しのヒント

  • インラインSVGなら、塗りをcurrentColorやCSSカスタムプロパティでテーマ化できます。
  • SVG内にウェブフォントを埋め込むのは避けて、代わりにグローバルCSSで宣言します。ブラウザが読み込みを再利用します。
  • 静止画像（PNG、ファビコン）が必要なら、必要な最終サイズでSVGをラスタライザーに通します。SVGは可逆に拡大しますが、一部のプラットフォームは今もビットマップを求めます。

よくある質問

textPathはパスの向きに従います。反時計回りを試し、プレビューを見ながら開始オフセット % を動かしてください。厳密な下側の弧が必要なら、ダウンロードした SVG に別のパスを追加して編集します。

カラーピッカーはfillを、スライダーは文字サイズと文字間隔を変更します。太さと書体はこのツールの操作項目ではありませんが、コピーした<text>要素をSVG/CSSで編集できます。

<textPath>はChrome、Firefox、Safari、Edgeで10年以上サポートされています。IE11は部分的な対応です。それでも必要なら、バッジを事前にラスタライズしてください。

テキスト要素にletter-spacing="2"（またはそれ以上）を加えます。きつい半径では、読みやすさが大きく向上します。

いいえ。文字と SVG はブラウザー内で生成されます。フレーズはサーバーに送信も保存もされません。

関連ツール

マテリアルデザイン カラーピッカー

Material Designのカラーパレットを閲覧できます。任意の色調（50からA700）を1タップでHEX、RGB、HSL形式でコピーできます。

方眼紙ジェネレーター

印刷できる方眼紙をオンラインで作成：方眼またはドット罫を選び、間隔をmmで設定し、A4かLetterと好きな線の色を指定して、印刷または鮮明なSVGでダウンロードできます。

旗作成ツール

6種類のレイアウト、色、文字、シンボルで、シンプルな3:2のカスタム旗をブラウザ内でデザインします。SVGまたはPNGをダウンロードするか、ブラウザの印刷ダイアログを開けます。

画像アップスケーラー

AI超解像または従来の補間処理で、低解像度画像を2×、3×、4×に拡大しながら重要なディテールを保ちます。

罫線入り用紙ジェネレーター

印刷できる罫線入り用紙を無料で作成。カレッジ罫、広め罫、狭め罫を選び、行間をmmで設定し、用紙サイズとマージン線を決めて、印刷またはSVGでダウンロードできます。

画像ピクセルレーター

調整可能なブロックサイズで画像全体または選択した領域をピクセル化し、顔、ナンバープレート、またはレトロな8ビットアートの遮蔽に使用できます。

このツールは他の言語でも利用できます