音楽記号SVG変換ツール：フォントグリフをSVG書き出し

フォントのグリフをSVGに変換

プリセットフォントまたは手元のフォントファイル（.ttf / .otf / .woff）を読み込み、グリフを選んでSVGとして保存できます。SVGコードのコピーにも対応しています。

このページでは、読み込み後にグリフ一覧が表示されます。部品として使う場合は「余白なし」書き出しが便利です。

1. プリセットをロード

2. またはフォントをアップロード

プリセットをロード中です…

3. グリフを選択

フォントを読み込むとグリフ一覧が表示されます。

4. SVGを調整・保存

キャンバスサイズ（余白ありモード用）

幅

高さ

これはグリフの位置を動かしつつ、キャンバスサイズもぴったりに調整します。

グリフの配置・サイズ

フォントサイズ

X座標

Y座標

ヒント：グリフが見つからない場合は、Y座標の値を大きくしてみてください。

書き出しモード

余白あり（現在のキャンバスサイズで書き出す）余白なし（viewBoxをグリフぴったりにする）

他のSVG部品に組み込む用途では「余白なし」が便利です。

操作

SVGコード

使い方

プリセットをロードするか、手元のフォントをアップロードします。
一覧から使いたいグリフをクリックします。
必要ならサイズや位置を調整します。
必要に応じて「キャンバスをグリフに合わせる」を使います。
書き出しモードを選びます。部品化するなら「余白なし」が便利です。
「SVGを保存」または「SVGコードをコピー」で使います。

補足

プレビューでは、青枠が現在のキャンバス、赤枠がグリフの bounding box です。「余白なし」は、保存時に viewBox をグリフぴったりにして、余白を減らす書き出し方式です。

ご利用上の注意
・プリセットのフォントファイルは、あなたのサイト上に配置して利用してください。
・アップロードするフォントは、各フォントのライセンスを確認の上でご利用ください。
・生成したSVGの利用可否は、元フォントの利用条件に従ってください。
・このツールは opentype.js を利用しています（MIT License）。
・読み込みに失敗した場合は、フォントURL、MIME設定、アップロード設定をご確認ください。