近々、ホームページをリニューアルします。いままでイメージをビットマップで張り付けていましたが、今後ははSVGで描きます。今回は、Illustratorで描画する方法を記載します。ベクトル形式によって画像を描画する方式です。ビットマップと違って拡大表示しても品質が劣化しない特徴があります。SVG描画だと、400%に拡大してもこの通り!高精細ディスプレイでも綺麗に見えます。ビットマップ描画だと、点をそのまま大きくするため拡大するほど荒くなります。標準ディスプレイで、等倍(100%)表示する限り見た目上の違いはありません。標準ディスプレイで拡大表示したり高精細ディスプレイで見た場合には差がでます。画像の作成は、IllustratorかGIMPが基本SVGの描画は、基本的にIllustratorで作成します。拡大・縮小の作業が多いイラスト系は、このソフトで描くことが多いです。対して、ビットマップ系の描画は、Photoshopで作成します。写真などの加工は、基本的にPhotoshopです。コンテンツ作成も含めたホームページ作成のプロを目指すのであれば、Photoshop,Illustratorは、必須ソフトです。CCの有料ソフトを使っています。Officeを使っているのと同じです。無料は、永遠のテーマです。好みで選択すると良いでしょう。OFFキャンペーンの時に購入しています。今年(4年目)も、40%OFFで購入するぞ。13歳以上の学生(職業訓練校を含む)なら学割版を購入ください。2013-10-18GIMPは、ソフトが無料のため勉強本を買うかインターネットで調べます。src="sample.svg">SVGファイルの作成方法Illustratorを使用して描きます。メニューバーの「ファイル」から「複製を保存」を選択します。保存する場所を選択後、ファイルの種類を「SVG」にして適当な名前を設定します。以上で画像ファイルは完成です。alt="ロゴ"></p></body></html>描画結果あとは、imgタグにwidth属性を指定をするなり、HTML/CSSで描くなり好きに料理してください。9以降でないと利用できない」点です。Vistaを使っている方であれば、大抵IE9以上です。8までをバッサリ捨ててSVG対応してみてはいかがでしょうか。メジャーなWebクリエイターボックスさんも利用しているため一般的になってきましたね!関連URL自分のブログでWebフォントを活用しよう!山崎信悟マイクロソフト認定トレーナー。ブログ業務が好調なため2019年8月から専業。誤字脱字王でもプロブロガー。コメントをキャンセルメールアドレスが公開されることはありません。