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

カテゴリー: ホームページのこと

タグ: Inkscape Scalable Vector Graphics SVG

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

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

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

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

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

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

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

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

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

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

まず、原寸表示です。

SVG 形式

PNG 形式

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

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

SVG 形式

PNG 形式

SVG 形式

PNG 形式

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

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

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

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

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

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

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

投稿者プロフィール

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

メールでのお問い合わせはこちら

WordPress のトラブル解決・設定・カスタマイズ

ベクトル公式テクニカルパートナー
があなたをお手伝いします

Zoom で画面共有してQ&A形式でサポートいたします。わからないところや疑問点をどんどん質問してください。その場ですぐに解決をお手伝いします。※ご希望の方にはメールでのサポートも可能です。

PHP / jQuery / CSS / アクションフック / フィルターフックのカスタマイズのご依頼も承ります。自分では思い通りにできないのでプロの力を借りたいとお考えの方、ぜひご相談ください。

ご相談・お仕事のご依頼はこちら

“Inkscape でSVG形式の画像を作ってみました” に対して2件のコメントがあります。

abin より:

2015年5月14日 1:27 PM

くりっく先生、こんにちは。
SVG形式の画像恐るべしです。
Inkscape、私も試しています。
次回からのレッスンは、本格的な
ホームページ制作になりそうですし
役立てるといいなと思います。
くりっくより:

2015年5月14日 1:54 PM

abin さん、こんにちは。
これからは SVG 形式の画像を使う機会が増えるでしょうね。
いっそのこと、パソコン向けのホームページでもロゴやボタンのような画像を
SVG 形式で作っておきたい気がしますが、Internet Explorer 8 だと SVG は
表示されないんですよね。