SVGでテキストを追加・曲げる方法
実践ガイド
SVGは <text> タグで実テキスト(選択・検索可能)を扱え、曲線に沿うテキストも作れます。
基本テキスト
<text x="20" y="40" font-size="24" fill="#e6e6ee">Hello SVG</text>
x,y はテキストのベースラインの位置です。
配置
text-anchor="middle" で x を基準に中央寄せ(start・end も)。
部分的なスタイル: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のノードモードで他の図形と同様に調整できます。