SVGでテキストを追加・曲げる方法

実践ガイド

SVGは <text> タグで実テキスト(選択・検索可能)を扱え、曲線に沿うテキストも作れます。

基本テキスト

<text x="20" y="40" font-size="24" fill="#e6e6ee">Hello SVG</text>

x,y はテキストのベースラインの位置です。

配置

text-anchor="middle"x を基準に中央寄せ(startend も)。

部分的なスタイル:tspan

<text>svg<tspan fill="#6c8cff">desk</tspan></text>

tspan でテキストの一部に色を付けたり位置を動かせます。

曲線に沿うテキスト(textPath)

<defs><path id="curve" d="M 10 80 C 40 10 160 10 190 80"/></defs> <text><textPath href="#curve">曲線に沿うテキスト</textPath></text>

参照したパスの線に沿ってテキストが流れます。

フォント:移植性に注意

訪問者が持たないフォントを使うと別のフォントで表示されます。同じに見せたいロゴや図では、テキストをアウトライン(path)化するのがおすすめ。編集可能なテキストではなくなりますが、どこでも同じに見えます。

テキストをアウトライン化

pathに変換した後は、svgdeskノードモードで他の図形と同様に調整できます。

エディタを開く

続けて読む