アートワークをSVGで保存する

投稿：2018年02月21日｜更新：2018年03月01日

SVG形式のメリット

最近のロゴは「png」「jpg」形式で出力されることが少なくなりました。

これは解像度の荒いデータを拡大するとドットが荒くなってしまうからです。

というと標準よりも大きなサイズのロゴを作ってブラウザで表示することになりますが、そうなると画像容量が大きくなってしまい、その問題は以前よりありました。

ワタシは基本すべて実際に表示されるモノよりも大きめの画像を使うことがほとんどですが、ロゴに関しては「svg」が推奨されつつあります。

SVGはイラストレーターなどで作成されるベクターデータを元にしてあるので、高解像度のディスプレイなどでの表示にも耐えられます。

では早速SVG方式で保存していきましょう。

まずはイラストレーターで作成したロゴを開きます

左上の「選択ツール」でロゴ全体を囲んでおきます。

次に「アートボードツール」をダブルクリックして「アートボードオプション」を表示します。

「プリセット」をクリックして「選択オブジェクトに合わせる」と設定して「OK」をクリックします。

画像が切り出されました

次にメニューバーにある「ファイル」→「別名で保存」を選択し、ファイル形式に「SVG」を選択して保存します。

すると「詳細オプション」が表示されるので「SVGコード」をクリックします。

するとSVGコードがテキスト化されて出力されます。

ではエディターを立ち上げてみましょう。

ここで書かれたコードをすべて<body></body>の中にコピペします。

ブラウザを立ち上げてみましょう。

ロゴが表示されています。

このロゴはpngやjpgと違って解像度に依存されずにアウトプットされます。

このままではあまりにも大きすぎるのでサイズを変えていきます。

さきほどのコードにwidth とheightを追加しておきます。

width=”30%” height=”auto”

ここではロゴの表示を30％にして高さは横幅に合わせる設定にしておきます。

実際にブラウザで表示してみるとロゴが小さく表示されています。

では<body>全体に色を入れて透過しているか確認してみましょう。

ここでは<head></head>内に<style></style>を作って<body>のバックカラーに黄色を入れてみます

では表示してみます。

問題ないようですね。

ロゴ制作は結構大変でほとんどが透過タイプの「png」が使われていると思いますが、やはり美しく表示させるにはサイズが大きくなりがちで、使い方によっては「jpg」よりも大きなサイズになってしまいます。

ここでは直接HTMLファイルにSVGコードを書き込んでいますが、SVGファイルとして保存し、<img src=””>の中にリンクをかけて表示しても同様効果が得られます。

その場合、SVGファイルに直接widthを指定するよりも、CSSでwidthを指定したほうがスマートかもしれません。