Now Loading...

スタッフブログ

戻る

当社ブログは社員での持ち回りで掲載しております。
ビジネスだけではなく、社内イベント、プライベートなことを書いておりますので予めご承知おきください。

引っ越しました

この度、弊社開発オフィスが統合され、二箇所に分かれていた開発陣が一箇所に集まることとなりました。
これにより別の場所にいることで生じていたコミュニケーション上の細かな齟齬などもなくなり、よりスピーディーで濃密な連携が可能になると考えております。
これまでご愛顧頂きましたお客様はもとより、はじめて弊社をお知りになった方も、新生Bitstarにご期待ください!
とまぁ、なんだか打ち切られた漫画に書かれた柱みたいなご挨拶からも分かる通り、今回はそのオフィスのお引越しについて書いていこうかと思いま
……したが、これを書いている段階ではまだ引っ越しが行われていないため、BeforeAfterを書くことが出来ず。
さらにオフィスが統合されたことにより私の個人的な引っ越しも予定されていますが、何一つ準備をしていない(!)というか家すら決まっていないという体たらく!
せっかくBlogを書くにあたりこれ以上ないタイミングで引っ越しというネタがあるというのに、それを有効活用出来ないというなんとも宝の持ち腐れみたいな状態のまま、全然関係ない話をしようと思います。
ということで今回は「SVG(Scalable Vector Graphics)」について。

Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス、SVG)は、XMLをベースとした、2次元ベクターイメージ用の画像形式の1つである。アニメーションやユーザインタラクションもサポートしている。SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。

Scalable Vector Graphics – Wikipediaより
まぁつまるところ「テキストエディタで書くことの出来る画像」です。高いフォトレタッチソフトが無くても、逆に無料だけど機能がちょっと……なソフトを使わなくても!そしてMSペイントとマウスでガクガク震えた線を引かなくてもブラウザで表示できる画像が作れる!というすごいものなのです。
とはいえ実際には2001年にSVG1.0が勧告されてますので、それほど新しい技術というものでもないのですが……。
主要ブラウザの対応状況は

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

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

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

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://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)

その他の記事

記事一覧

BitStar流

Contact Us

ご不明な点や、気になったことなど、
お気軽にお問い合わせください。

お問い合わせ

Recruit

新卒採用、中途採用、エンジニア採用、
デザイナー採用を行っています。

採用情報