当ブログで紹介したSVGの記事をまとめました。SVGは、描画ソフトが無くても単純な図形ならコードを書くことで、簡単に作れます。ベクター画像なので、デバイスを気にすることなく表示できるのが良いです。記述ルールとアニメーションの仕方が分かれば、ある程度のものが作れるのではないでしょうか。
SVG記事のまとめ
基本
- SVG|SVGについて
- SVG|SVGの基礎
- SVG|基本形状の描画
- SVG|パス
- SVG|テキスト
- SVG|座標系の変換:transform
- SVG|線の形状
- SVG|アニメーション1(属性値の変化)
- SVG|アニメーション2(座標系の変換)
- SVG|アニメーション3(パスに沿った移動)
- SVG|CSSの記述
- SVG|スクリプトの基礎
- SVG|イベント
- SVG|イベントオブジェクト
- SVG|イベントを介した属性値の取得・設定
- SVG|テキストオブジェクト
- SVG|特定の要素の取得
- SVG|要素の追加と削除
- SVG|テキスト要素の生成と追加
- SVG|イベントリスナによるイベント処理
- SVG|アニメーションの開始と終了の制御
- SVG|setInterval()を使ったアニメーション
- SVG|SVGの表示・読み込み
- SVG|SVGの素材を作る・書き出す
- SVG|クリッピング
- SVG|クリッピングとイベント
- SVG|グループにまとめる:g要素,symbol要素,use要素,defs要素
- SVG|path要素を分割して個別にスタイルを適用する
- SVG|素材の再利用:symbol
- SVG|JavaScriptを含むSVGをHTMLに読み込ませる
- SVG|SVG記事のまとめと今後の展望
応用
今後の取り組み
SVGを勉強した後にやることを挙げてみました。
- イラレで図形を作れるようにする
- SVG×JavaScriptで何か作ってみる
- JavaScript
- p5.js
- Tweakpane
