連載第87回
2014年7月22日
SVG画像でジャギー解消 & 透過画像へのドロップシャドウ

 前回は記事へのタグ付けについて書きましたが、今回再び話を戻してロゴ画像などのジャギーが生じる件について。ジャギーが出ると言ってもかなり特殊というか、僕の環境ではiPadをランドスケープにした場合だけ症状が発生しました。しかもiOSは6のままなので、最新版でどのように表示されているのかは分かりません。
 ここでもう一度「第83回:flfl.me 公開後の「要カイゼン点」アレコレ 」冒頭に載せたキャプチャ画像を見ると、フリフリミィの仮ロゴのとオマケの丸ボタン画像の周辺にジャギーが出ているのが見て取れると思います。それらはPNGフォーマットの画像だったので、前々回の「第85回:ローカルとServersMan@VPSで、SVG画像を扱う」でSVGフォーマット画像を扱えるよう設定、今回はその画像を置き換えてみるテストとなります。

 ロゴの作成、SVGフォーマット画像の書き出しは「iVinci」を使用。SVGで保存するときは、表示しない不要なレイヤーは削除しておくことと、不具合が出る場合は日本語文字はアウトライン化しておく事に注意。

SVG画像でジャギーは解消

 サクッと結論を言いますと、PNGをSVGに置き換えたことでiPad上でのジャギーは消えました。上に載せた画像を見ていただくと「fm」の丸ロゴだけSVGで滑らかになっており、右横の小さいグレーの丸と検索フォーム横の虫眼鏡アイコンはPNGでジャギーが出たままになっています。

 手元に環境が無いので正確なところは分からないのですが、iPod touchのiOS7ではPNGで問題なかったので、もしかしたらiOS6とその上の古いバージョンのSafariという組み合わせでの問題だったのかも知れません。
 ちなみに僕はAndroidやWindows等のタブレットが存在しない世界に住んでいる設定なので、他のプラットフォームでの検証は全く行っていません。

CSSで透過画像にドロップシャドウ

 以前の仮ロゴでは、画像にドロップシャドウを付けていました。フラットブームとは言え、flfl.meは内容が薄いので、せめて影を付けておこうと思ったのです。しかし「iVinci」でシャドウを付けた場合、SVG画像だとそれは反映されないので、PNGで書き出す必要があったというワケです。

 そこで透過画像を作成した場合に、その形状に沿ってドロップシャドウを付けることが可能なのかどうかググってみました。すると、可能らしい!知らなかった!

-webkit-filter: drop-shadow(2px 2px 1px #888);

CSS

div#LOGO img {
 width: 70px;
 height: 70px;
 -webkit-filter: drop-shadow(2px 2px 1px #888); /*←順に(x軸・y軸・シャドウの長さ・色)*/
}

でも若干、不安定かも

 これがあれば、参考記事で検証されていたPNG画像のみならず、SVG画像にもドロップシャドウが付けられるかも!と喜んだのですが、ちょっと問題がありました。確かに影は付けられるのだけれど、iPod touchとiPadでは画像全体にぼんやりと「ぼかしフィルター」がかかったようなぼやけた表示になってしまうのです。これはダメだ。将来の改善に期待です。

 MacBook Airの方ではピンチアウトして拡大表示させると同様にぼやけてしまうものの、通常表示なら普通に影が落ちて、画像もシャープなままです。どうも仕様のようですが、iOSモバイル系ではロゴに影を付けるのを諦めて、なんちゃってフラット画像な感じにし、Macの方はこのCSSフィルターによるドロップシャドウを付けることにしました。Macのモニターでわざわざ拡大表示する人は居ないでしょうし。今は虫眼鏡アイコンと、小さいグレーの丸アイコン画像もSVGに置き換えて在るので、表示動作を確認できます。>flfl.meつづく。

 仮ロゴのジャギー原因解明の為にSVG画像に置き換えてテストしたい。
 というか、仮ロゴ自体のデザインをどうにかしたい。
 <footer>エリアの項目には自己紹介以外に何が必要か。
 タグを導入したい。
 WordPressのダッシュボードが外部と接続出来無い(保留)

次回はWordPressが外部接続出来ない不具合の再チャレンジ篇(予定)。無駄に超大作です。