東京でアートディレクターとして活躍されている先輩に、このサイトのロゴをデザインして頂きました。ほしい要素やイメージをお伝えしたところ、素敵なロゴに仕上げていただくことができました。ありがとうございます。
さて、今回ロゴをページに配置するのに、SVGを使ってみることにしました。物は試しということで...。
ロゴデータは.aiで受け取ったので、まずIllustratorで開きSVG形式で保存しました。ちょうどCodeGridで「マークアップエンジニアのためのSVG入門」の連載が始まっていたので、Illustratorの設定を参考にさせてもらいました。
次に、書き出したSVGファイルをSVGOで最適化しました。これで2割ほどファイルサイズが軽くなり、14.9KBとなりました。思ったよりもファイルサイズが小さいことに驚きました。
最後に、img要素を利用してページに配置しました。その際、IE8とAndroid 2.xがSVGに対応していないため、ひとまずonerror="this.onerror=null; this.src='/images/logo.png'"を記述して対処しておくことにしました。これは、A Primer to Front-end SVG Hacking – David Bushellで紹介されていたフォールバック手法です。目下ロゴ1枚だけなので、Modernizrなどを読み込むまでもないかと思った次第です。
ブラウザでサイトを表示させたところ、無事ロゴが表示されました。会社で使用しているMacBook Pro RetinaやiPhoneなどでも鮮明に表示されています。
追加でnginxの設定を行い、SVGファイルをgzip圧縮して送信するようにしておきました。今後もSVGについて探っていきたいと考えています。