近々、ホームページをリニューアルします。いままでイメージをビットマップで張り付けていましたが、今後ははSVGで描きます。
今回は、Illustratorで描画する方法を記載します。
超簡単です。
SVGとは
SVG（Scalable Vector Graphics） とはベクトル形式によって画像を描画する方式です。ビットマップと違って拡大表示しても品質が劣化しない特徴があります。
SVG描画だと、400%に拡大してもこの通り！高精細ディスプレイでも綺麗に見えます。
ビットマップ描画だと、点をそのまま大きくするため拡大するほど荒くなります。
標準ディスプレイで、等倍(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を使用して描きます。
メニューバーの「ファイル」から「複製を保存」を選択します。
保存する場所を選択後、ファイルの種類を「SVG」にして適当な名前を設定します。以上で画像ファイルは完成です。
あとは、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で描くなり好きに料理してください。
まとめ:SVGも身近になった
最大の難点は、「IE 9以降でないと利用できない」点です。Windows Vistaを使っている方であれば、大抵IE9以上です。IE 8までをバッサリ捨ててSVG対応してみてはいかがでしょうか。
メジャーなWebクリエイターボックスさんも利用しているため一般的になってきましたね！
関連URL
マイクロソフト認定トレーナー。専業ブロガーになり1年経過(別名:ひきごもり)。ブロガーなのに誤字脱字王。滑舌が悪いのにYouTuber。『自己紹介』