SVG

SVG(Scalable Vector Graphics)

目次

• ベクターとラスター
• XMLの概要
• HTML
• SVGの基本要素
• ドキュメントの構造
• 様々な図形
• ストロークとフィル
• テキスト
• フィルター
• アニメーション

ベクターとラスター

1. ベクターグラフィックス：座標情報からソフトウェアによって描くグラフィックス。拡大縮小の影響を受けない。
2. アスターブラフィックス：ピクセル（画素）の集合によってあらわす。拡大すると、画素（色の矩形「くけい」または色の点）が見える。

XMLの概要

XML(Extensible Markup Language)

任意の用途に使えるように作られた言語に機能を容易に拡張できるようにしたマークアップ言語の総称

XML宣言

<?xml version="1.0" encoding="utf-8"?>

XMLドキュメントであることを宣言するもの。version"1.0"はXMLのバージョン。encodeing="utf-8"はXMLファイルのエンコーディング。

XMLの要素

• 開始タグ:<name>のように書く
• 終了タグ:</name>のように書く

XMLドキュメントに付けられたタグの解釈はドキュメントを扱うアプリケーションの問題でHTMLドキュメントで定められているタグを別のアプリケーションで別の目的で利用することもできる。

タグの形式

• <タグ名 属性リスト>要素の内容(content)</タグ名>
• <タグ名>テキスト</タグ名>
タグの入れ子
• <タグ名1 属性リスト>テキスト要素<タグ名2>ほかの要素内容</タグ名2></タグ名1>

属性

• <タグ名 属性名1="属性値1" 属性名2="属性名2">テキスト</タグ名>

属性値はダブルクォーテーションかアポストロフィーのいずれかで囲む

XML1.0ではxml:space（空白と改行の扱い方を指定するための属性指定可能な値は"default"[空白と改行の取り扱いはそのXMLドキュメントをそうっさするプログラムやプロセッサに任される。通常XMLドキュメントのプロセッサは空白や改行を無視する。]と"preserve"[空白と改行を無視したり削除せずに保存する。]）とxml:lang（XMLドキュメントの中の任意の要素の内容や属性値で扱われている言語名と国名を指定する。）

要素内容の種類

空の要素

• <name></name>
• <name />
• <name attribute1="value" />

ルート要素と子要素

ルート要素は一個で二個以上あってはならない。子要素はいくつでも可。

XML名前空間

XMLのタグ名が複数の目的に使われる場合にそれぞれを違ったものとして認識できるようにするための定義→名前空間

例)
<name xmlns:foo="http://www.owndomain.jp/directory1/foo">
上記のように宣言した場合fooの名前空間は「http://www.owndomain.jp/directory1/foo」となり、以後fooで修飾される時は定義された名前空間の場所を表す。
→ <element:foo>content</element:foo>
おそらくは宣言時のタグ名の配下において有効とする方法と思う

デフォルト名前空間

xmlns属性による名前空間宣言で、接頭辞を省略すると、その要素以下でデフォルトとなり、接頭辞なしのタグ名はデフォルトの名前空間に属するようになる。

HTML

HTML(HyperText Markup Language)

最新はHTML5。以前の拡張子は.htmが使われていた。これはWindows系のファイルシステムの拡張子が最大３文字だったころの名残。現在では拡張子は.htmlにするべきとされる。

インラインSVG

HTMLファイルの中にSVGグラフィックスを直接記述することができる。

HTMLファイルでSVGグラフィックスを埋め込む方法

• <img>：画像イメージを表示するためのタグ

例)
<img src="sample.svg" />

• <object>：オブジェクトデータを表示するためのタグ、objectでサポートされていない場合はテキストや他のイメージを表示するようにすることが可能

例)
<object data="sample.svg" type="image/svg+xml" title="objectとしてのSVG" alt="画像">
<p>SVGがサポートされていないときに表示する内容</p>
</object>

• <embed>：埋め込みオブジェクトを表示するためのタグ

例)
<embed src="sample.svg" type="image/svg+xml" />

• <foreingObject>

SVG基本要素

インデントのための空白は無視される。属性リストの空白に２個以上の空白を入れた場合も無視される。全角空白は空白に含まれない。

規則

• 改行：連続でなければならないところ以外では自由
• コメント:<!-- コメント -->
• 数値：１０進数の浮動小数点数
• 色の値：#rrggbb（色コード）、文字列定数、rgb(0-255,0-255,0-255)、rgba(0-255,0-255,0-255,0-1.0)

viewBox属性：viewBox="min-x min-y width height"で指定する

preserveAspectRatio属性

ドキュメントの構造

• <svg>要素：svgの宣言

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" 属性...> </svg>

xmlns:xlink="http://www.w3.org/2000/xlink"　⇒　xlink:hrefを利用する時

• <title>要素：タイトルを記述
• <desc>要素：説明を記述

titleとdescは省略可能

• <g>要素：グルーピング、属性をまとめて指定する時などに要素をまとめる
• <defs>要素：後で使う描画のためにあらかじめ定義しておきたいことを記述する
• <use>要素：defs内の要素から引用したり、提示済みの要素から引用したりする(hrefを利用)
• <switch>要素：条件によって実行するコードを切り替える
• <linearGradient>要素：右から左、上から下の一定方向に向かって変化するグラデーション

<linearGradient id="id" x1="(始点)%" y1="(始点)%" x2="(終点)%" y2="(終点)%"> </linearGradient>

• <radialGradient>要素：中心から外側へ放射状に変化する円形グラデーション

<radialGradient id="id" cx="(中心)%" cy="(中心)%" r="(半径)%"> </radialGradient>

• <stop>要素：グラデーションの変化点の設定
• <image>要素：イメージファイルを描く
• <pattern>要素：パターンで塗り潰す
• <clipPath>要素：クリッピングする領域を指定する。

<clipPath id="name" clipPathUnits="userSpaceOnUse"> クリッピング図形</clipPath>

• <mask id="name">マスク図形</mask>

idで名前を付けておくとhref等で利用することができる。

トランスフォーム属性

transform="translate(x,y)"

matrix属性の計算式

様々な図形

目次

• 線
• 折れ線
• 矩形（四角形）
• 円
• 楕円
• 多角形
• パス
• マーカー
• トップへ戻る

線

<line x1="n1" y1="n2" x2="n3" y2="n4" />

折れ線

<polyline points="x1,y1,x2,y2,x3,y3,x4,y4,..." />

<polyline points="x1,y1 x2,y2 x3,y3 x4,y4 ..." />

矩形（四角形）

<rect x="n1" y="n2" width="n3" heigth="n4" />

円

<circle cx="n1" xy="n2" r="n3" />

楕円

<ellipse cx="n1" cy="n2" rx="n3" ry="n4" />

多角形

<polygon points="x1,y1 x2,y2 x3,y3 x4,y4 ..." />

パス

<path>

楕円孤を描くA、aコマンド

A (x半径) (y半径) (回転角) (楕円孤の大きさ) (スイープ) (終点のx座標) (終点のy座標)

a (x半径) (y半径) (回転角) (楕円孤の大きさ) (スイープ) (終点のx座標) (終点のy座標)

• 楕円孤の大きさ：楕円孤の角度が180°未満なら0、180°以上なら1
• スイープ：楕円孤を負の方向に描くなら0、聖の方向に描くなら1

ベジェ曲線

マーカー

<marker></marker>

ストロークとフィル

ストロークとフィルに関係する属性の利用方法を示す。

ストローク

フィル（塗り潰し）

テキスト

<text>

<text x="n1" y="n2">グラフィックスとして描く文字列</text>

<tspan>

<tspan></tspan>

タグで囲んだ範囲のみ指定の属性を付与できる

<textPath>

パスに沿ったテキストを描く。xlink:hrefでパスを参照しそれに沿って描く。<textPath>は<text>の子要素として定義する必要がある。

例

フィルター

<filter id="name"> 子要素</filter>

適用時にはfilter="url()"を描画要素に付ける

目次

• <feGaussianBlur>要素：ぼかし
• <feColorMatrix>要素：カラーフィルター
• <feComposite>要素：合成
• <feOffset>要素：影

<feGaussianBlur>要素：ぼかし

<feGaussianBlur in="SourceAlpha" stdDeviation="暈し具合(1でも十分暈ける)" />

<feColorMatrix>要素：カラーフィルター

<feColorMatrix type="hueRotate" values="フィルターのかかり具合"

<feComposite>要素：合成

<feComposite operator="" result="" >

<feMerge></feMerge>

<feMergeNode in="" />

<feOffset>要素：影

アニメーション

SMIL(Synchronized Multimedia Integration Language)のこと

すべての要素は終了タグを必要とする。

<animate>要素

<要素 属性1="n" 属性2="n" ...>
<animate id="name" attributeName="name" attributeType="name" from="n" to="n" begin="ns" dur="ns" fill="name" repeatCount="n" />
</要素>

例

<set>要素

数値ではなくある状態から別の状態に変化させる。

<要素 属性1="n" 属性2="n" ...>
<set id="name" attributeName="name" attributeType="name" from="value" to="value" begin="ns" dur="ns" fill="name" />
</要素>

<animateTransform>要素

<要素 属性1="n" 属性2="n" ...>
<animateTransform attributeName="transform" attributeType="name" type="name" from="n" to="n" begin="ns" dur="ns" repeatCount="n" additive="sum" fill="name" />
</要素>

<animateMotion>要素

<要素 ...>
<animateMotion path="path" dur="ns" repeatCount="n" fill="color" />
</要素>

CSSのアニメーション

設定例

<style type="text/css">
要素名{
animation-name:name; //アニメーションの名前
animation-duration:ns; //アニメーション時間
animation-timing-function:ease; //アニメーションのタイミング
animation-iteration-count:n; //アニメーションの繰り返し回数
animation-direction:alternate; //アニメーションを変化させる方法
animation-play-state:running; //アニメーションの実行状態
}

@keyframes name{
0%{
//0%の時間での変化状態
}
100%{
//100%の時間での変化状態
}
}