SVG

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

• http://leocs.me/jquery-drawsvg/
• サンプル
  DrawSVG.zip

vivus.js

• http://maxwellito.github.io/vivus/
  
  

参考

• SVGアニメーション支援サイト
  https://maxwellito.github.io/vivus-instant/