引っ越しました

この度、弊社開発オフィスが統合され、二箇所に分かれていた開発陣が一箇所に集まることとなりました。
これにより別の場所にいることで生じていたコミュニケーション上の細かな齟齬などもなくなり、よりスピーディーで濃密な連携が可能になると考えております。

これまでご愛顧頂きましたお客様はもとより、はじめて弊社をお知りになった方も、新生Bitstarにご期待ください！

とまぁ、なんだか打ち切られた漫画に書かれた柱みたいなご挨拶からも分かる通り、今回はそのオフィスのお引越しについて書いていこうかと思いま

……したが、これを書いている段階ではまだ引っ越しが行われていないため、BeforeAfterを書くことが出来ず。
さらにオフィスが統合されたことにより私の個人的な引っ越しも予定されていますが、何一つ準備をしていない(！)というか家すら決まっていないという体たらく！

せっかくBlogを書くにあたりこれ以上ないタイミングで引っ越しというネタがあるというのに、それを有効活用出来ないというなんとも宝の持ち腐れみたいな状態のまま、全然関係ない話をしようと思います。

ということで今回は「SVG(Scalable Vector Graphics)」について。

まぁつまるところ「テキストエディタで書くことの出来る画像」です。高いフォトレタッチソフトが無くても、逆に無料だけど機能がちょっと……なソフトを使わなくても！そしてMSペイントとマウスでガクガク震えた線を引かなくてもブラウザで表示できる画像が作れる！というすごいものなのです。

とはいえ実際には2001年にSVG1.0が勧告されてますので、それほど新しい技術というものでもないのですが……。

主要ブラウザの対応状況は

ブラウザ名	対応バージョン
Internet Explorer	9.0以上
Firefox	3.0以上
Chrome	4.0以上
Safari	5.1以上
Opera	9.0以上

となっていて、モダンブラウザであればだいたい表示できる感じになります。

そして、SVGが表示されるブラウザで

<svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"
 width="200" height="200" viewBox="0 0 210 210">
    <rect x="5" y="5" stroke-width="1" stroke="black" fill="white" width="200" height="200" />
    <circle cx="50" cy="75" r="25" fill="pink" />
    <rect x="135" y="50" fill="green"  width="50" height="50" />
    <rect x="25" y="100" fill="red"  width="160" height="20" />
    <path d="M105,120 l20,40 h-40z" fill="blue" />
</svg>

と書くことによって

対応しているブラウザなら画像が出ているはずです

このように画像が表示されます

また、CSSやスクリプトを埋め込むことも出来ますので

マウスを置くと色が変わります	クリックすると……

SVG単体で画像の変更をすることが出来ます。

勿論、写真のようなものをSVGとしてテキストエディタで書くのは大変です(やってやれないことはないのかもしれませんが……)。ですが画像作成系ソフトの中にはSVG形式でのファイル出力をサポートしているものもありますので、複雑な画像もそれらソフトを使うことで作り出せます。

画像の全てをSVGにする必要は無いと思いますが、アイコンやボタン、ロゴといったものをSVGで作ることによって動きのあるサイトをflashなど特別なツールなしで実現できるのはとても面白いですし、実際Webデザインのトレンドでもありますので、今後も是非注目すべき技術ではないでしょうか。

なんだかオチもなくすごく普通の終わり方をして今回はここまで。(tel)