IrodorI One-Poem World

Version 3.0.1mt Build 3265305

O-P World: Version 2.9.14MT

変更点

  • 最新のMovable Type (6.1.2)へ更新
  • irodori.one-poem.jpへ移行のため、記事のリンク等を修正
  • カテゴリ名を「ケータイ」から「モバイル」へ、「Mac」から「Apple」へ変更(フォルダ名も変更)
  • faviconやバナーへのSVGの採用(詳細は続きに)

faviconやバナーのSVG化について

以前から使っていたfaviconは、16×16ドットの荒いWindows Icon形式であったが、最近faviconにSVGを使うことができるらしいことを知った。 確か、Googleの新しいロゴのファイルサイズが小さくなったという記事を見て、SVGならファイルサイズを抑えて、綺麗なアイコンになるのではないかと思ったことから調べてみたのだった。 この記事を書いている段階ではFirefoxしか対応していないが、面白そうなのでSVG形式でアイコンを作ってみることにした。 一方で、iOS8までのSafariはfaviconを利用していないようで、今更ながらそうだったのかと気づいた。

オリジナルアイコン「わ」の拡大

オリジナルの「わ」アイコン。 わんぽえむの「わ」という、あまりひねりのないアイコンである(苦笑)。 Windows Icon形式のfaviconをPNG形式に変換し、さらに比較のため、128ピクセル幅へ拡大表示した(画像サイズは16ピクセル)。

SVG形式アイコン「わ」

上記Windows Icon形式から画像をinkscapeで取り込み、「わ」部分をパスに変換・調整してSVG形式にしたもの。 オリジナルのアイコンを作成した際に使用したファイル等は古いPCに入ったまま確認できないため、Web上のデータから再現を試みた。

オリジナルIrodorI One-Poem Worldバナーの拡大

オリジナルのサイトバナー。 作成当時に主流だった88×31ピクセルの画像になっている。 今回は比較のために176ピクセル幅に拡大してある。

SVG形式IrodorI One-Poem Worldバナー

faviconをSVGにしたので、調子に乗ってこちらもSVGにしてみた。 アイコン同様、オリジナルのバナーを作成した手順が不明なので、Web上のデータからinkscapeを使って再現を試みた。 「彩」の部分をカラフルにしてみた。

なお上記の公開用のファイルはSVGOのGUI版を用いてファイルサイズを削減している。 今回の場合、いずれもinkscapeで作成したファイルから50%以上減らすことができた。

なお、ナビゲーション用のアイコンもSVG形式に変更した。