SVG

Scaleable Vector Graphic

XMLベースの2Dベクター画像記述言語。

SVGの記述

SVGファイルはXML形式で記述することが出来ます

http://qvectors.net/

GoogleChromeなどのHTML5対応ブラウザではHTML上に直でSVGを記述・表示できる

SVGの主な構造要素

要素名 説明 属性
title タイトル r ,cx, vy
desc 題名
g 要素のグループ化 id
defs 要素を被参照先を定義(非表示)
symbol 素材の定義 id, viewBox
use 参照先の表示 xlink:href, x, y, width, height
image 画像 xlink:href, x, y, width, height
a リンク xlink:href, target, title

グループや参照の使用例

SVGの主な描画要素

要素名 説明 属性
circle 正円 r ,cx, vy
ellipse 楕円 rx, ry ,cx, vy
rect 方形 x, y, width, height, rx ,ry
line 直線 x1, y1, x2, y2
polyline 折れ線 points="x1 y1 x2 y2 ..."
polygon 多角形 points="x1 y1 x2 y2 ..."
path 曲線等 d

SVGの主な属性

属性名 説明 初期値
id ID
opacity 透明度 0~1
fill 塗りつぶし色 black
fill-rule 塗り方 nonzero
fill-opacity 透明度 1
stroke 線色 none
stroke-opacity 線の透明度 0~1 1
stroke-width 線幅 1
stroke-linecap 線端 butt, round, square, inherit butt
stroke-linejoin 折れ線の継ぎ目 miter, round, bevel, inherit miter
stroke-miterlimi 継ぎ目の制限 miter, round, bevel, inherit
stroke-dasharray 点線の間隔 n1, n2 none
transform 移動、倍率、回転等

SVGファイルの出力

object

type="image/svg+xml" を必ず宣言すること

embed

SVG記法

xlinkでパスを使いまわす

IllustlatorでSVGファイルを編集

SVGと名前空間

safariなどのブラウザでHTML内にインラインSVGを記述する際は名前空間を設定が必要となる

SVGWebのようなJavaScriptを利用して、SVGをラップしないと表示することができない

JavaScriptでSVG要素を操作する方法はjQuery SVGへ続く

web/jquery_svg/

参考URL

SVGWeb

http://code.google.com/p/svgweb/

SVGとCanvasについての記事

http://efcl.info/adiary/Chapter15CreatingMediaRichandInteractiveApplications


<script type="image/svg+xml">
  <svg width="200" height="200" id="svg">
    <g>
      <rect id="item_touch" x="83" y="160" fill="rgba(0,0,0,0.1)" width="55" height="75">rect sample</rect>
    </g>
  </svg>
</script>
<script src="/js/svg.js"></script>