SVG
Scalable Vector Graphics
はじめに
HTML5では、IMGタグを使用した .svg ファイルの読み込み描画、また直接 SVGタグを使用した描画が可能です。Illustrator のようなベクター系のソフトを使うと、描画を .svg 形式でファイルを保存することができます。
IMGタグによる配置
<img src="images/sample.svg">
HTMLのIMGタグにSVGファイルを直接指定
OBJECTタグによる配置
<object type="image/svg+xml" data="images/sample.svg" width="512" height="512"> </object>
HTMLのOBJECTタグでSVGファイルを埋め込む
CSSによる背景設定
#svg_content { width:512px; height:512px; background-image:url(images/sample.svg); background-size:100%; }
CSSのbackground-imageプロパティで背景画像として指定
SVGタグによる配置
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="10" fill="red" /> </svg>
SVG形式の図形を、以下のように直接記述
- 直接タグで記述することで、CSS のマウスホバーや、JavaScriptによる直接操作が可能になります。
- SVGを作成できるツールがある場合は、まずそれを使って図形を描画し、.svg形式で保存します。.svg はテキストファイルなので、これをテキストエディタで開くとソースコードが見えます。<svg> 〜 </svg> の部分(実質全部)をそのままHTMLにコピー&ペーストで表示できます。
JSプラグインを用いたアニメーション
jQuery DrawSVG
vivus.js
参考
- SVGアニメーション支援サイト
https://maxwellito.github.io/vivus-instant/