SVGは最高

引き延ばしても大丈夫、アルファチャンネルを保持する、アニメーションも可能、いいとこだらけなSVG

基本は以下で学ぶ

10分でわかるSVG 基礎編知って得する、Webブラウザ上で利用できるグラフィック関連技術。HTMLのような感覚で図形が描画できる「SVG」をハックしよう＠IT SVGで図形やアニメを描画してみよう知って得する、Webブラウザ上で利用できるグラフィック関連技術。HTMLのような感覚で図形が描画できる「SVG」をハックしよう＠IT 2013-10-28聴く耳を持たない(片方しか)聴く耳を持たない(片方しか)

Illustratorで作ったsvgを使うなら以下のリンクが参考になる(英語)

Using SVG | CSS-TricksSVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVGCSS-Tricks

<svg ~>
~
</svg>

で中にオブジェクト書いていく場合、Emmetを活用すると効率が良さそう。ただし、結構自分でカスタマイズする必要がある。

あと座標軸がどうなってるのか不明だったので50x50でcircleを各所に書いて調べました。

横軸がX、縦軸がYで、X座標が+に大きくなるほど左に、Y座標が+に大きくなるほど下に向かいます。

昔数学でやったグラフなんかとは違うので違和感…

ちなみに、これに書いてある三角形は

<path d="M 10,40 L 20,20 30,40 Z" stroke="#808080" fill="none" />

と記述したものです。

こっちは二次元ベジェ

ソースコードは

<path d="M 10,40 Q 20,20 30,40" stroke="#808080" fill="none" />

です。

Illustratorもあるのでこの形式で複雑な曲線描いたり図形描いたりすることはあまりないと思うけど！