LogoMark.png

SVG

SVG

Scalable Vector Graphics

はじめに

HTML5では、IMGタグを使用した .svg ファイルの読み込み描画、また直接 SVGタグを使用した描画が可能です。Illustrator のようなベクター系のソフトを使うと、描画を .svg 形式でファイルを保存することができます。

IMGタグによる配置

<img src="sample.svg">


SVGタグによる配置

SVG形式の図形を、以下のように直接記述することができます。

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="black" stroke-width="10" fill="red" />
</svg>

SVGを作成できるツールがある場合は、まずそれを使って図形を描画し、.svg形式で保存します。.svg はテキストファイルなので、これをテキストエディタで開くとソースコードが見えます。<svg> 〜 </svg> の部分(実質全部)をそのままHTMLにコピー&ペーストで表示できます。

SVGの文法

(書きかけです)



アニメーション

SVGそのもののアニメーション機能を使う

(書きかけです)

SVG + CSS3 でアニメーション

(書きかけです)

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

jQuery DrawSVG


vivus.js

参考

PAGES

GUIDE

DATA

添付ファイル: fileDrawSVG.zip 62件 [詳細]
Last-modified: 2019-07-05 (金) 20:51:20