LogoMark.png

SVG の変更点

#author("2020-12-15T18:36:10+09:00;2019-07-05T20:51:20+09:00","default:inoue.ko","inoue.ko")
*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にコピー&ペーストで表示できます。
~
~
//**SVGの文法
//（書きかけです）
//~
//~


//**アニメーション
//
//***SVGそのもののアニメーション機能を使う
//（書きかけです）
//~


//***SVG + CSS3 でアニメーション
//（書きかけです）
//~



**JSプラグインを用いたアニメーション

***jQuery DrawSVG
-http://leocs.me/jquery-drawsvg/
-サンプル
&ref(DrawSVG.zip);

~

***vivus.js
-http://maxwellito.github.io/vivus/
~

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