2014年3月23日日曜日

svgビュー指定って知ってますか?

svgをimg要素等から参照する場合,直接ファイル名を指定する他に「svgビュー指定」と呼ばれるパラメータを渡すことが出来るんです.これってグラフィックの作画に直接関わる機能じゃないので,あまり知られていないのですが,憶えておくと結構便利ですから是非マスターして下さいね.

2014/03/24 ちょこっと内容を追加.基本は変わらず.
※注意:記事を書いては見たものの,その後いろいろ試してみたら結構な動作不良っぽいものがザクザクと.
ですから,フル活用する前にきっちりと動作検証をして下さいね.
私はブラウザベンダーにフィードバック入れときます.

2014年3月18日火曜日

レスポンシブなsvgを作ったら背景画像を追加してみよう

svgを単なる画像ファイルだと考えていたら大間違いなんです.そこで今回はsvgに背景画像を追加して,画像の大きさを変えても固定位置に画像が表示されるというサンプルを紹介します.
※2014/3/22 補足を追加

2014年3月12日水曜日

svgを使って背景画像を傾ける

svgを使えば背景画像を傾けることだってできちゃうんだぜ.




2014年3月9日日曜日

svgのフィルタをcanvasにかけよう…cfe.js

まー,その有用性に気がついてくれる人だけに見てもらえればいいの.
  • canvas要素フィルタ拡張モジュール「cfe.js

2014年3月4日火曜日

複合パスの定義テクニック

svgのpath要素のd属性には図形を定義するコマンド文字列(パス文字列)を記述しますが,ここにパス定義を連結して記述することで,複数のパスを単一のpath要素で記述することが可能となります.

じゃあこれにひと手間加えるとどうなるか,っていうのがこの投稿のテーマです.
手書き時に威力を発揮しますが,スクリプトを作る時も憶えておくと便利かも.

2014年3月3日月曜日

svgをプログラム言語としてとらえると-svgエチケット論

web上でベクタグラフィックを描けるのは非常に便利であるものの,使い方によっては薬にも毒にもなるよという話.長いので,すっ飛ばして結論だけ読んでもよし.
※例によって個人調べなので,多分に間違いが含まれているものと思われます…

2014/3/4 ちょっと改訂
2014/3/5 補足を追加
2014/3/6 optimizeSpeedについての記述を追加
2014/3/19 strokeについての記述を追加