新しい日記

新しい日記

SVGは最高

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

 

基本は以下で学ぶ


Webグラフィックをハックする(2):10分でわかるSVG 基礎編 (1/5) - @IT


Webグラフィックをハックする(3):SVGで図形やアニメを描画してみよう (1/5) - @IT


今年こそついにSVG元年?まだ間に合う!SVGの学習に役立つサイト紹介 - 聴く耳を持たない(片方しか)

 

 

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


Using SVG | CSS-Tricks

 

 

<svg ~>
~
</svg>

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

 

 

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

f:id:tttttahiti:20140918180917p:plain

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

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

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

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

と記述したものです。

 

こっちは二次元ベジェ

f:id:tttttahiti:20140918182351p:plain

ソースコード

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

です。

 

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