その他 ホームページ作成

ブログのイラストはSVGで描こう!

近々、ホームページをリニューアルします。いままでイメージをビットマップで張り付けていましたが、今後ははSVGで描きます。

今回は、Illustratorで描画する方法を記載します。

超簡単です。

20150430r81

SVGとは

SVG(Scalable Vector Graphics) とはベクトル形式によって画像を描画する方式です。ビットマップと違って拡大表示しても品質が劣化しない特徴があります。

SVG描画だと、400%に拡大してもこの通り!高精細ディスプレイでも綺麗に見えます。

20150430r82

ビットマップ描画だと、点をそのまま大きくするため拡大するほど荒くなります。

20150430r83

標準ディスプレイで、等倍(100%)表示する限り見た目上の違いはありません。

しかし、標準ディスプレイで拡大表示したり高精細ディスプレイで見た場合には差がでます。

画像の作成は、IllustratorかGIMPが基本

SVGの描画は、基本的にIllustratorで作成します。拡大・縮小の作業が多いイラスト系は、このソフトで描くことが多いです。

対して、ビットマップ系の描画は、Photoshopで作成します。写真などの加工は、基本的にPhotoshopです。

コンテンツ作成も含めたホームページ作成のプロを目指すのであれば、Photoshop,Illustratorは、必須ソフトです。

月々一定の料金はかかりますが、参考文献が多いため世界中のプロは、GIMPなどの無料ソフトではなくAdobe CCの有料ソフトを使っています。

この点は、Open Officeなどの無料ではなく、Microsoft Officeを使っているのと同じです。

有料 / 無料は、永遠のテーマです。好みで選択すると良いでしょう。

Adobe Creative Cloudの標準価格は、高いので40% OFFキャンペーンの時に購入しています。今年(4年目)も、40%OFFで購入するぞ。

13歳以上の学生(職業訓練校を含む)なら学割版を購入ください。6割ほど、安いです。

GIMPは、ソフトが無料のため勉強本を買うかインターネットで調べます。

SVGのメリット

  • 高精細ディスプレイでクッキリ
  • 拡大表示をしても綺麗
  • ファイルサイズが小さい

SVGのデメリット

  • イラストレーターなどSVGが出力できるソフトが必要
  • SVGデータを作成できるスキルが必要
  • Internet Explorer 9(IE 9)以降でないと利用できない

SVG画像の貼り付け方法

超簡単!画像を作成して貼り付けるだけ!


<img src="sample.svg">

SVGファイルの作成方法

Illustratorを使用して描きます。

20150430r84

メニューバーの「ファイル」から「複製を保存」を選択します。

20150430r85

保存する場所を選択後、ファイルの種類を「SVG」にして適当な名前を設定します。以上で画像ファイルは完成です。

20150430r86

あとは、HTMLファイルを使って描画するだけ!超簡単でしょ!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
<p>
<img src="sample.svg" alt="ロゴ">
</p>
</body>
</html>

描画結果

あとは、imgタグにwidth属性を指定をするなり、HTML/CSSで描くなり好きに料理してください。

20150430r87

まとめ:SVGも身近になった

最大の難点は、「IE 9以降でないと利用できない」点です。Windows Vistaを使っている方であれば、大抵IE9以上です。IE 8までをバッサリ捨ててSVG対応してみてはいかがでしょうか。

メジャーなWebクリエイターボックスさんも利用しているため一般的になってきましたね!

関連URL

自分のブログでWebフォントを活用しよう!

20150430r41

 

-その他, ホームページ作成
-