FC2ブログ

web用SVGことはじめ 第2回

忘れないうちにやっておかねば!ということで前回予告した続きです...

今回は前回にやりきれなかったけど、同じくらい基本的で、むしろ使えないとこまるだろ!的なものを集めてみました。

何はともあれサンプルコードから(実際に閲覧するには続きをどうぞ)。


<svg
	version="1.1"
	width="480px"
	height="480px"
	viewBox="0 0 480 480"
	overflow="hidden"
	xml:space="preserve"
>
	<ellipse
		cx="120px" cy="180px"
		rx="120px" ry="60px"
		fill="#00ff00"
	/><!--緑の楕円-->
	<ellipse
		cx="240px" cy="240px"
		rx="120px" ry="60px"
		fill="#0000ff"
		stroke="#00ffff" stroke-width="4px"
	/><!--青の楕円-->
	<polyline
		points="0,0 100,0 0,100"
		fill="none" stroke="#000000"
		stroke-width="8px"
		stroke-linecap="butt"
		stroke-linejoin="miter"
		transform="translate(360 10)"
	/><!-折れ線1-->
	<polyline
		points="0,0 100,0 0,100"
		fill="none" stroke="#404040"
		stroke-width="8px"
		stroke-linecap="round"
		stroke-linejoin="round"
		transform="translate(360 30)"
	/><!-折れ線2-->
	<polyline
		points="0,0 100,0 0,100"
		fill="none" stroke="#808080"
		stroke-width="8px"
		stroke-linecap="square"
		stroke-linejoin="bevel"
		transform="translate(360 50)"
	/><!-折れ線3-->
	<polygon
		points="0,0 100,0 50,86.6"
		fill="none" stroke="#ff0000"
		stroke-width="2px"
		stroke-dasharray="8,8"
		transform="translate(360 170)"
	/><!--三角形1-->
	<polygon
		points="0,0 100,0 50,86.6"
		fill="none" stroke="#00ff00"
		stroke-width="2px"
		stroke-dasharray="4,4"
		transform="translate(360 190)"
	/><!--三角形2-->
	<polygon
		points="0,0 100,0 50,86.6"
		fill="none" stroke="#0000ff"
		stroke-width="2px"
		stroke-dasharray="4,4,8,4"
		transform="translate(360 210)"
	/><!--三角形3-->
	<rect
		x="120px" y="180px"
		width="100px" height="50px"
		rx="10px" fill="#888888"
		transform="rotate(0 170 205)"
		fill-opacity="0.25"
	/><!--灰色の角丸長方形の一番下-->
	<rect
		x="120px" y="180px"
		width="100px" height="50px"
		rx="10px" fill="#888888"
		transform="rotate(-15 170 205)"
		fill-opacity="0.5"
	/><!--灰色の角丸長方形の真ん中-->
	<rect
		x="120px" y="180px"
		width="100px" height="50px"
		rx="10px" fill="#888888"
		transform="rotate(-30 170 205)"
		fill-opacity="1"
	/><!--灰色の角丸長方形の一番上-->
	<text
		x="120px" y="360px"
		font-size="40px" transform="skewX(-5)"
		fill-opacity="0.25"
	>
		Skewed Text
	</text>
	<text
		x="120px" y="360px"
		font-size="40px" transform="skewX(-10)"
		fill-opacity="0.5"
	>
		Skewed Text
	</text>
	<text
		x="120px" y="360px"
		font-size="40px" transform="skewX(-15)"
		fill-opacity="1"
	>
		Skewed Text
	</text>
	<rect
		x="0" y="0"
		width="480" height="480"
		stroke="#ff0000" stroke-width="2"
		fill="none"
	/><!--外枠-->
</svg>

<ellipse>,<polyline>,<polygon>要素

さて、さっそく出てきているのがellipse要素で、これは楕円を描くための要素です。circle要素との違いは長径と短径を別々に指定('rx','ry'属性)できることです。もちろん位置は中心の座標('cx','cy'属性)で指定します。

その次はpolyline要素です。これは折れ線を描くもので、'points'属性で指定した座標を指定された順に結ぶ折れ線を描きます。

  • 'points'属性

    サンプルを見るとわかるように"x,y"の形で座標を指定し、それを空白(改行でもよい)で区切って並べた文字列を指定します。

ところで、サンプルコードを見ると、折れ線1~3には全く同じ'points'属性が設定されており、この場合、本来なら全ての折れ線がぴったりと重なる位置にくるはずですし、最初の座標が"0,0"なのでもっと左上にあるはずです。これは謎の属性、'transform'属性の効果なので後でまとめますので気にしないことにしましょう。

さらに謎の属性'stroke-linecap'と'stroke-linejoin'属性を見ていきましょう。この属性は'stroke'属性などと同様にほとんどの要素に指定できる属性で、線の描画に関する指定をします。

  • 'stroke-linecap'属性

    線の端をどう処理するかを指定します。線の太さがあまり太くない範囲ではどれも大きくは違いませんが太い線を指定した場合には見た目に大きくかかわり、適切に指定しないとみっともなくなります。いずれも説明はしますが折れ線を比較してみてもらうのがいいでしょう。

    • butt:線の端を打ち切ります。特に指定されなければこれになります。折れ線1参照。
    • round:線の端に直径が線の太さに等しい円を付けます。線の上に別の線の始点をおいて線が分岐しているように見せるときなどには便利です。折れ線2参照。
    • square:円の代わりに正方形を付けたround、といったところです。ぱっと見ではbuttとあまり違いませんが、指定した線の長さよりもほんの僅かに長めに見えるようになります。折れ線3参照。

  • 'stroke-linejoin'属性

    polylineやpolygon要素などの折れ線の角の処理をどうするかを指定します。やはり細い線に対してはほとんど関係ありませんが、太い線では重要です。

    • miter:とがらせます。何も指定しないときのデフォルトです。このときはあまりに鋭角な場合、線の外側の角と内側の角が大きく離れる場合があり、その時は自動的にbevelに変更されます。このbevelに変更するかしないかの限界は'stroke-miterlimit'属性で指定します。何も指定しなければ約29°以下の鋭角でbevelに変更されます。折れ線1参照。
    • round:角の外側を丸めます。内側はmiterと同じです。特に角にこだわりがない限りはどんな図形でも扱いやすい処理です。折れ線2参照。
    • bevel:角の外側をとがらせずに切り落とします。bevel(面取り)の名前の通りmiterの角を削ったような形になります。あるいは、線を帯のようなものとみれば、角で折り曲げた様に、といってもいいかもしれません。折れ線3参照。

さて次はpolygon要素です。折れ線たちの下にある、三色の点線の三角形たちです。polygon要素自体はpolyine要素とほとんど同じで、polyline要素の始点と終点を結んだ多角形になるだけです。それよりも線を点線にしている属性'stroke-dasharray'を見ましょう。

  • 'stroke-dasharray'属性

    "線の長さ,空白の長さ,線の長さ,空白の長さ,..."という数字の列を指定します。数字が偶数個(空白の長さ)で終わっているときはそのままですが、奇数個(線の長さ)で終わっている場合はその列をもう一度繰り返した数字列だと思って処理されるので注意してください。この属性も'stroke'属性などと同様にほとんどの要素に指定できて、同じ効果をもちます。

見慣れたrect要素ですが、表示を見てみると角が丸まっています。これは(太い線を適用してstroke-linejoin="round"を指定したのではなく)図形自体が角丸長方形になるように指定したものです。rect要素の'rx','ry'属性を指定すればこのようなことができます。丸めを正円にしたいときは二つのうち一方を指定すればそれを半径とする円で、二つ指定すれば楕円形に丸めます。

さて、この長方形たちは不思議なことが起きています。まず重ね順が上のものは左に回転しています。また、重ね順が下のものは色(正確にはfill)が半透明になっています。

前者は先にも予告した'transform'属性なので後に回して、半透明について言うと、これは'fill-opacity'属性により設定されています。色を不透明にする属性3種類を紹介します。

  • 'opacity'属性

    オブジェクト全体の不透明度を設定します。strokeやfillに不透明度が設定されている場合はそれらに追加して不透明度の効果をかけます。また、rect要素などの具体的な図形要素だけでなく、グループ要素にも適用できます。値は0から1までの値を少数で指定し、0で完全に無色透明、1で完全に不透明になります。

  • 'fill-opacity'属性

    fillの不透明度を指定します。fillとstrokeの不透明度を変えるときに使用します。

  • 'stroke-opacity'属性

    strokeの不透明度を指定します。

ようやく'transform'属性を説明できます。これは、任意の要素を変形できる万能属性です。上の'opacity'属性と同様にグループ要素に適用してまとめて変形することもできます。なお、「変形」と言っていますが、要素を別の場所へ移動したり、回転させることもまとめて「変形」ということにします。

'translate'属性には以下の変形作用を適当に空白で区切って並べたものを指定して図形を変形します。

  • translate(dx dy):(dx,dy)だけ平行移動します。dyを省略すると0とみなされます。
  • scale(sx sy):x方向にsx倍、y方向にsy倍だけ拡大・縮小します。syを省略するとsxと同じ値が指定されているとみなされます。
  • rotate(t cx cy):(cx,cy)を中心にt°だけ回転します。なお標準ではy軸が下向きでx軸が右向きなので正の回転方向は時計回りです。また、中心を省略すれば原点中心に回転します。
  • skewX(t):x軸はそのままにy軸をt°ゆがめたような図形に変形します。このあとのtext要素も参照。
  • skewY(t):こちらはy軸をそのままにx軸をt°ゆがめます。
  • matrix(a b c d e f):x'=ax+cy+e,y'=bx+dy+fとなるように変形します。詳しくはこちら。javascriptなどから図形を動かす時などには見通しよ置くプログラミングできますが、通常はあまり使わないでしょう。
なお、変形を施す順番によって結果が異なることには注意が必要です。下のsvgは、ソースを見ればわかりますが、左の赤い方はtransform="rotate(-30 150 120)translate(60)"が指定されており、緑の方は順序を変えたtransform="translate(60)rotate(-30 150 120)"が指定されています。後に行う変形を先に(左側に)指定し、先に行う変形ほどあとに(右側に)指定します。

<text>要素

ここまでは(前回も含めて)一切の文字をSVGに含めることができませんでした(!)。もちろんテキストをSVGが扱えないわけではありませんが、SVG自体が文書のフォーマットであるという基本に立ってテキスト関係の指定は非常に複雑かつ多様な指定が可能です。そのすべてを紹介することはできませんがごく基本的な部分についてみてみましょう。

text要素はrect要素などと異なり文や文字を<text>~</text>で囲み、<text>要素の属性としてfillやstroke、ほかの設定をを指定します。text要素の属性としては以下のようなものがあります。

  • 'x'属性

    x位置を指定します。空白で区切られたリストを与えることもでき、その場合はk文字目にk番目のx座標を適用し、文字のほうが指定されたリストの個数より多ければ最後のx座標が適用されますが、実際には文字は一文字描画するごとに一文字分の横幅("I"と"M"のように字により異なる)だけ位置をずらしたところに描画される。

  • 'y'属性

    'x'属性とほぼ同様だが、x座標は一文字ずつ変化するのが一般的なのに対してy座標は変化しない。空白で区切られたリストを与えたときの挙動もほぼ同様。

  • 'rotate'属性

    各文字ごとの回転。ひとつの値を与えれば全ての文字が同じ角度の回転をするが、空白で区切られたリストを与えれば各文字ごとに異なった回転を指定できる。リストより文字数が多いとリストの最後の値が残りすべての文字に適用されるのは'x','y'属性と同様。

また、text要素に入れ子にできる要素としてtspan要素があり、同様の属性を持つ。しかしリストの指定の重複と継承が非常に複雑なので割愛して公式文書に任せることにする。

とりあえずこれ以上の変形がしたければ'transform'属性も適用できるのでそれを利用すれば大概の簡単なことはできるはずです。サンプルコードではskewXを行っています。skewXやskewYは原点中心の変形しかできないのでゆがめると同時に平行移動しているような効果も出ています。

続きを読む

スポンサーサイト



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