Office365 新しいアイコンの抽出を行ってみたいと思います

今回本格的に入れ替わった新しいOffice365のアイコンですが、アイコンの提供方法も大きく変わったようです。

今までのアイコンは単色形式のアイコンでしたが、これはWebフォントを利用していた為でした。
これが、新しいアイコンではSVGというフォーマットに変わっておりました。
SVGとはScalable Vector Graphicsの略で、画像ではなく絵の頂点を集めたものとなるので、拡大縮小などを行ってもきれいに表示できる図形となります。

このフォーマットなので、サイズ違いでアイコンを用意する必要もなくなるので全体としてネットワーク容量も削減できるということですね。

f:id:mohessu:20190223225204p:plain

さて、このアイコンですが、どういった構造となっているか見てみましょう。

Chromeでソースを表示し新しくなったアイコンの要素を選択すると、CSSを確認することができます。

backgroundという要素がSVGファイルとなっています。

f:id:mohessu:20190223225413p:plain

この要素を選択して右クリックOpen in new tabを押すことでブラウザの別ウィンドウが表示されます。

f:id:mohessu:20190223225810p:plain

別ウィンドウではこのようにサイズも自由自在に表示することができます。

f:id:mohessu:20190223225900p:plain

このSVGファイルはまだマイクロソフトからどういった権利宣言されたか不明であるため一般利用はできないのですが、参考までにどういった形で作られているのかは覚えておいてもよいかと思います。

最近はこういった方法で画像を展開するのですね。モダンサイトの作成という観点でも構造を理解しておくことは重要ですね。

音楽:ヘイボーイ