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をラップしないと表示することができない
参考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>