Text to SVG
文字を SVG コードに変換。サイズ・ウェイト・字間・行高・アンカーを調整でき、ライブプレビュー付き。
ライブプレビュー
SVG コード
出力は一般名フォントファミリーを使った SVG の text 要素であり、変換された字形のアウトラインではありません。フォントファイルがなければブラウザはシステムフォントを輪郭化できません。詳しくは下の解説を参照してください。
使い方
- テキスト欄に言葉を入力します。1 行が出力の 1 行になります。
- フォントサイズ・ウェイト・字間・行の高さを設定します。テキストアンカーで左右中央の揃えを、一般名フォントファミリーで書体の系統を選べます。
- 入力に合わせてプレビューが更新されます。viewBox は描画後のテキストを実測して作るので、枠がぴったり収まります。
- SVG コードをコピーして、ページ・テンプレート・デザインファイルに貼り付けます。出力は text 要素なので、選択・検索ができ、容量も小さく済みます。
こんなときに
- ページ内のロゴ組み —— 文字を実文字のまま使えば、拡大しても劣化しない。
- 見出しレイアウトの試作 —— デザイナーの確定前に書体構成を確かめる。
- ランディングページの装飾ラベル —— 画像を書き出さずに済む。
- SVG テキスト属性の教学 —— 編集しながら確認できる生きた教材。
プライバシーについて
描画・測定・コード生成はすべてブラウザ内で行われます。アップロードはなく、フォントファイルのダウンロードも行いません。
FAQ
Q: 出力が path ではなく text 要素なのはなぜですか？ A: 字形をパスに変換するにはフォントファイル自体が必要です。ブラウザにはシステムフォントを輪郭化する API がなく、このツールもフォントをダウンロードしません。一般名フォントファミリーの text 要素で出力するため、マークアップは小さく、文字は選択可能なままです。
Q: text を path の代わりに使うと何が違いますか？ A: 見た目は閲覧者の端末にインストールされたフォントに依存するため、同じファイルでも端末が違えば描画結果が変わりえます。形を厳密に揃える必要がある場合は、FontForge や Inkscape といったローカルツールで変換するか、ライセンスされた Web フォントを読み込んで SVG から参照してください。
Q: 選べるフォントは？ A: CSS の一般名ファミリーのみです。sans-serif・serif・monospace・cursive の 4 つです。それぞれ閲覧環境のローカルフォントに割り当てられるため、ここのプレビューと本番サイトの表示は違うことがあります。
Q: 数値を変えても viewBox は合っていますか？ A: 合っています。変更のたびに境界を再測定するので、枠は現在のテキスト・サイズ・字間に追従します。測定が利用できない場合は文字数による推定にフォールバックするため、通常でないフォントでは緩くなる場合があります。
データはこのデバイス内にとどまります
Text to SVG は 100% ローカルで動作します。貼り付けたり、ドロップしたデータはすべてお使いのブラウザ内で処理され、送信されることはありません。当社のサーバーには何も保存されません——タブを閉じればすべて消えます。
入力された内容がサーバーへ送信・記録・解析利用されることはありません。初回読み込み後はネットワークを切断していてもこのページは動作します。