FC2ブログ

web用SVGことはじめ 第4回

前回は「一旦終わりに」などと言いましたが思い返してみるとアニメーションなんて「ことはじめ」にはふさわしくない複雑な内容だったかと反省してます...

さて、おそらく最後になるであろう今回は、コードを簡潔にわかりやすく、また上手く使えばファイルサイズの削減にもつながるいくつかの機能を紹介しましょう。

どちらも、複数の同じようなオブジェクトやスタイルを使用するときに計画的に利用すれば作業を簡単に済ませることができます。

スタイルシートを使う

スタイルシートといっても今回は外部のCSSファイルを作成するのではなく、SVG内部にインラインの\lt;style\gt;要素を記述することで複数のオブジェクトに同じスタイルを適用するために利用します。

実際に利用してみたのが以下の例。

コードは面倒なのでこのページのソースを参照してください。

ソースを見ていただけるとわかりますが、'style'要素のなかで三つのクラス'a','b','c'を定義して'rect'要素や'circle'要素に'class'属性で指定しています。ありていに言ってHTMLとまったく変わりません。もちろん'div'要素には'stroke'属性などありませんから、そこは読み変えてもらいますが、それ以上は利用法についてあまり説明することはありません。

いままであまり触れませんでしたが、基本図形要素のスタイルの主なデフォルトはfill="#000000",stroke="none"ですので、普通に考えれば少なくともstrokeやfillはほとんど全ての基本図形オブジェクトで指定し直されると思います(例外はいくらでも考えられるでしょうが)。しかし、たとえば簡単なフローチャートや図などではさほど多くの種類のスタイル分けをすることはあまりない状況もあります。その時に、いちいち「stroke="..." fill="..."...」と指定するのは面倒ですし、上の図のようにオブジェクトが多くなればコピー&ペーストで済ませればいいとはいえ、煩雑になりがちですし、コードの修正も面倒です。また、記述量が多くなるとコードが見にくいだけでなく、ファイルサイズも大きくなります(さほど致命的な問題ではないかもしれませんが...)。

'defs'要素でシンボルを定義する

さて、先ほどの例ではスタイル指定をスタイルシートを用いて簡略化しましたが、よく考えると、基本図形がどれも同じ図形を利用していましたよね?これも簡略化できないものでしょうか?

まったく同じ図を、'defs'要素と'use'要素を使って書いてみました。もちろんスタイル指定はCSSの埋め込みにより指定しています。

もともとの図が簡単に指定できる基本図形なのでこちらはあまりメリットを感じられないコードになってますが...

使い方としては、まず繰り返し使う図形要素を'defs'要素内に記述しておきます。特に共通の属性はここで指定してしまいます。今回は同じスタイルの要素を3回以上使っているのでクラスまで指定していますが、一つの要素に同じクラスを繰り返し使わないなら指定しなくてもかまいませんし、逆に'defs'要素内でスタイル指定が重複するような要素がないなら'style'要素を使わず、直接'defs'要素の子要素にスタイル付けをしてもかまいません。さらに参照する際に必要なので'id'属性を忘れずに付けておきます。

'defs'要素内に記述された要素は一切表示されません。その代わりに、'use'要素を使用して参照し、表示することができます。'use'要素は'xlink:href'属性に"#id"の形式で指定されたIDの要素を参照して表示します。

ソースを見ると、特に'width','height'属性の文字数が多い'rect'要素の記述が簡潔になっているのがわかります。さらに複雑な、たとえば'polygon'要素や'polyline'要素を複数取り扱うような場合にはファイルサイズの節約はもちろん、図形の修正も簡単になります。

なお'use'要素の'x','y'属性ですが、これが指定されると参照先のオブジェクトで指定された描画位置をさらにこの指定分だけ移動して表示させることができます。実際上の例では、'defs'要素内では'rect'要素も'circle'要素も'(c)x','(c)y'属性を指定していないので両方0がデフォルトで指定されています。そのうえで'use'要素で'x','y'を'rect','circle'要素に指定するのと同じように指定するとまったく同じように表示されます。

なんと三日坊主の私が4回も続けられたこの「web用SVGことはじめ」ですが、あまりだらだらと続けても仕方ないですし、初めに考えていた「ことはじめ」のレベルを大きく逸脱したような気もしますのでそろそろおしまいかなと思います(初めは円やら矩形でロゴが作れるくらいまでの予定だったのに...)。

前回に引き続いていやぁ~なことです。

何が原因なのかは実はよくわからないのですが、SVG対応をうたっているInternetExplorer9にてこのブログのSVGが全て表示されないという事態に今更ながら気づきました。

前回のSMILアニメーションが動作しないのはむしろ動作しない方がMicrosoftの公式見解に合致しているのでかまわないのですが、どうもSVGが全て表示されないようです。

このFC2ブログのページはIEとChromeで見てみるとXHTML1.0で作られているようです。しかもIEで見てみるとどうも最初の'svg'要素が勝手に閉じられて、ほかの要素('rect'等)が'svg'要素の子要素になっていない!(chromeでは私の意図したとおりになっています)

とりあえずXHTMLはXMLなので、今回の'svg'要素には'xmlns'と'xmlns:xlink'を指定しましたが、IEでは表示されないことに変わりありません。

なお前回、SMILアニメーションが動くか検証した際、埋め込んだホスト言語はHTML5にあたるもので、XHTMLではなかったのでその辺でも違いがあるかもしれません。

最後に今回のSVGをラスタライズしたPNG画像を載せておきます。

firstsvg4

ただ、恐ろしいことにもしかしたらこのpng画像もIEでは表示されないのでは...という疑惑があります。なんとか表示されて一安心です...

スポンサーサイト



コメント

非公開コメント

プロフィール

f(t)=k

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

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

この人とブロともになる

QRコード
QR