本記事から数回に分けて、各種フォーマットに触れていきます。いずれのフォーマットでもベジェ曲線の描画コマンドは共通です。具体的な書き方はフォーマットとは別にまとめて解説します。

SVG は私たちにとって身近なベクター画像フォーマットの一つです。Web ページのロゴやアイコンなどに広く使われています。
フォントエンジニアリングでも、アウトラインの確認に SVG を利用することがあります。

SVG には多様な図形要素がありますが、本シリーズで取り上げるのは path 要素です。特に、d 属性に記述するベジェ曲線用のパスコマンドを中心に解説します。

下記のように記述し「.svg」で保存すれば、ブラウザでそのまま表示できます。

<svg viewBox "0 0 100 100" xmlns="<http://www.w3.org/2000/svg>">
  <path d="{ここにベジエ曲線の命令...}" />
</svg> 

詳しい仕様を知りたい場合は、以下の資料を参照してください。
https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/d

（LN）