Inkscape でSVG形式の画像を作ってみました

スマホの高解像度化の流れ

スマホの画面は高解像度化がどんどん進んでいます。

老眼が身近に感じるようになった私は、あんな小さい画面でそこまで解像度を上げる必要があるのかねぇ・・・と疑問に思いますが、今後もこの流れは続くでしょう。デジカメの画素数が増えてきたのと似ていますね。

この高解像度化はスマホ向けのホームページ制作にも影響を与えています。

通常、ホームページで使用するロゴ画像やボタンは PNG / GIF / JPEG などのビットマップ形式で作るのが一般的です。

ピクセルサイズを小さめに抑えたビットマップ形式の画像を使ってホームページを制作すると、最新機種のスマホで表示したときに画像がぼけて見えてしまうという現象が起きます。そうならないためにピクセルサイズを増やすと、ホームページが重たくなってしまいます。

スマホ向けに SVG 形式の画像を使う

この問題の対策のひとつとして考えられるのが、SVG 形式の画像を使うことです。

SVG 形式の画像は拡大表示しても輪郭が滑らかできれいに表示されるという特徴があり、高解像度のスマホ画面で表示してもぼけることがありません。

Inkscape というフリーソフトで SVG 形式の画像を作ってみましたので、PNG 形式と比べてみます。

まず、原寸表示です。

SVG 形式

PNG 形式

もちろん、原寸表示ではどちらもきれいに表示されています。

それでは拡大していきましょう。

SVG 形式

PNG 形式

SVG 形式

PNG 形式

拡大すると PNG 形式の表示は悲しい結果になりますが、SVG 形式の方は拡大してもまったく問題ありません。

Inkscape、なかなかよさそうです

初めて Inkscape を使ってみましたが、なかなかよさそうなソフトだと感じました。

上記のボタン画像はおおよそ以下のような手順で作りました。

1. 四角形、円、三角形を配置
2. テキストを配置
3. オブジェクト(テキスト)をパスに変換
4. ページサイズをコンテンツに合わせて変更
5. SVG 形式で保存

操作に慣れると、効率よくホームページ用の画像を作れそうな印象を受けました。

そのうちに時間ができたら、じっくりと使い方を研究してみたいと思います。