LogoMark.png

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形式の図形を、以下のように直接記述

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

jQuery DrawSVG


vivus.js

参考

PAGES

GUIDE

DATA

添付ファイル: fileDrawSVG.zip 169件 [詳細]
Last-modified: 2020-12-15 (火) 18:36:10