さまざまな解像度の端末が次々と出てくる中、各解像度に合わせた画像を用意させられるデザイナーは頭を悩ませておりますが…
同時にSVGに対応しているブラウザも増えてきているので、これからはSVGの時代！とばかりにロゴやアイコンなどに活用しはじめています。
See the Pen RWNdXp by natsumi (@mayo31) on CodePen.18228
上記サンプルのソースを見ていただくとわかるのですが、サイズの指定はどこにもありません。
たとえばCSSで、
svg {
height: 20px;
}
なんて指定すれば、高さ20px、幅はautoで描画されます。
ラスターデータの画像と違って、どんな解像度でもキレイに表示されるし、解像度別の画像ファイルを保存したり、それをいちいち読み込ませたり、解像度別に分岐させる処理なんて必要なくなります。
やったね！(´∀｀*)ｳﾌﾌ
ところが…
これが、monacaで開発中にハマりました。
monacaのデバッガーでsvgが表示されない
monaca IDEで同様の方法でsvgを設定して、高さをレイアウトに合わせて20pxと指定しました。幅は勝手につくよね！と思ったのですが、実機のデバッガで見ると真っ白。
IDEのプレビュー表示では見えているのに、真っ白。
ﾎﾟﾎﾟﾎﾟﾎﾟﾎﾟ( ﾟдﾟ)ﾟдﾟ)ﾟдﾟ)ﾟдﾟ)ﾟдﾟ)ﾎﾟｶｰﾝ…
CSS側で、
svg {
width: 20px;
height: 20px;
}
というふうに幅も指定してやればOK。
実機デバッガでもきちんと表示されました。
むむむ。。。
これはバグなのでしょうか？
デバッガの不具合なのか、レンダリングエンジンがもともと対応していないのか、私の端末依存なのか、原因はわかりませんが…もし不具合なのであれば…毎回比率を計算して幅を指定するのも大変なので、改善されてほしいですね(´・ω・｀)
SVGについては、詳しい説明をしているサイトがいっぱいあるので参考にしてください。
3つめのSVG PORNは、SVGで作られたロゴがずらずら並べられています。view allをクリックしたらもう延々ロゴが見れます(；´∀｀)すごいなぁ