FC2ブログ

web用SVGことはじめ

大変お久しぶりです…

今回は少しSVG画像について勉強(し直し?)たので、軽くまとめてみます。

最近のweb制作などに関する話題といえばHTML5やCSS3ですが、その中でグラフィック関連と言えばcanvas要素やanimationなどでしょう。少し離れてもvideo要素などでしょうかね。

しかし、意外に多くのデバイス・ブラウザ上で対応していて、しかも便利な機能として、SVGも地味に注目が集まりつつあります。

実際、HTML5でブロック要素(div要素やp要素)の角を丸めたりといった、いままで画像ファイルを使わなければ出来なかった視覚効果がマークアップによって実現できるようになりましたが、あくまでそれは文字情報を補助するための視覚化の範囲にとどまり、複雑な図形を描画することはできません。また出来る範囲でそれを行うにしても、適当な方法だとは言えないでしょう(たぶん)。

そこで、HTMLなどのマークアップ言語に慣れた方のためのHTML埋め込みSVGの利用について簡単に紹介します。

基本

今回はSVG画像ファイルをobjectタグなどで埋め込むのではなく、HTML中に直接svgタグをマークアップしていきます。

<!-- bodyタグ内(必要があればブロック要素などの内側)に記述 -->
<svg
	version="1.1"
	width="480px"
	height="480px"
	viewBox="0 0 480 480"
	overflow="hidden"
	xml:space="preserve"
>
	<circle
		cx="120px" cy="360px"
		r="120px" fill="#000088"
		stroke="#0000ff" stroke-width="10px"
	/>
	<a xlink:href="#">
		<circle
			cx="240" cy="240"
			r="60" fill="none"
			stroke="#00ff00" stroke-width="20"
		/>
	</a>
	<rect
		x="0" y="0"
		width="480" height="480"
		stroke="#ff0000" stroke-width="2"
		fill="none"
	/>
</svg>

さて内容はともかく適当なHTML文書を作成して上のコードをbodyタグの子要素として配置します。svgタグがHTMLにおけるhtmlタグと同様にルート要素となるものなので属性を個別にみると以下のようになります。

  • version="1.1"

    SVGのバージョンを宣言します。

  • width="480px" height="480px"

    SVG全体の大きさを指定します。

  • viewBox="0 0 480 480"

    これはちょっと難しいですが、"左上x座標 左上y座標 幅 高さ"を空白で区切って指定します。よくわからなければ"0 0 width height"で十分でしょう。

  • overflow="hidden"

    CSSのoverflowと同様に、ブロック要素から内容があふれたときの指定をします。特に理由がなければ"hidden"を指定しておけば範囲外には何も描画されません。

  • xml:space="preserve"

    XMLでの空白を扱いを宣言します。"preserve"で全ての空白と改行文字を無視しないように設定します。"default"を指定してブラウザに扱いを任せることができます。

さて、上のような宣言を含んだsvgタグの内側に図形要素を記述していきます。基本的に先に記述した要素が下になります。記述した順番で画面に上書きしながら表示されていく、と思えば分かりやすいでしょうか?IllustratorやPhotohopなどのレイヤーパネルとは順序が逆、といってもいいかもしれません。実際、上の例では青い円の方が先に書かれているので緑の円の下になっています。(続きを参照)

実際に上の例で使用している要素を見ていきましょう。

  • <circle>要素

    円を記述します。中心の座標を'cx'、'cy'属性で指定し、半径を'r'属性で指定します。'fill'、'stroke'、'stroke-width'属性はあとでまとめます。

  • <rect>要素

    長方形を記述します。'x'、'y'属性で左上の座標を指定して、'width'、'height'で高さを指定します。

  • <a>要素

    <a>要素はHTMLと同様のリンクを設定するための要素です。要素内に記述された要素にリンクを設定します。SVGでは<a>要素の子要素になっている要素が表示する領域にのみリンクが設定されます。実際、上の例では緑色の円にリンクが設定されているのでマウスカーソルを合わせるとカーソルが変化しますが、内側の何も表示されないところでは変化しません。(続きに実際にSVGを埋め込んであります)

  • 'fill','stroke','stroke-width'属性

    'fill'と'stroke'属性は、それぞれ要素の内側の塗りつぶし、及びふち線の色を指定します。HTMLの色指定と同様に"#RRGGBB"の形の16進数で指定します。'stroke-width'は線幅(太さ)を指定します。

さてさて長くなりましたがこのくらいで。まだまだ全然使えない内容しか紹介できてませんが、次回は(それがあれば)<rect>要素と<ellipse>要素、<line>要素、<polyline>要素、<polygon>要素、そして何より文字を入れるための<text>要素と、少し複雑な変形をするためのtransform属性も説明したいです。

また長くなりそうですね...

スポンサーサイト



コメント

非公開コメント

プロフィール

f(t)=k

Author:f(t)=k
ベクトル画像をもっと世に広めたい一般人その1

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR