0

【Ai】IllustratorでSVGデータを書き出す方法

【Ai】IllustratorでSVGデータを書き出す方法

Webサイトを構築するうえで、ロゴやアイコンなどこれまではよく、PNG形式の透過データを利用していました。これが今ではSVGデータに取って変わり当たり前の形式になっています。

これまでのJPEGやPNGと何が違うのか?実際にSVGデータを作って配置してみましょう。SVGデータの作成方法として、Illustratorで書き出すのと、Photoshopで書き出すのとありますが、今回はIllustratorからSVGデータを書き出す方法をご紹介いたします。

SVGデータはJPEGやPNGと何が違うの?

 

    • JPEGやPNG形式・・・ビットマップデータ
    • SVG・・・ベクターデータ

 

SVGデータはベクターデータのため、拡大・縮小しても劣化しない、且つ画像が荒れることがありません。その理由はベクターデータは画像を数値で管理しているため拡大や縮小では数値が変化する形式だけ。更にはファイルサイズが非常に軽くなるため画像の表示速度にとっても利点があります。

SVGデータはほとんどのブラウザが対応しているため、通常使用しても問題はないと思います。

それでは、実際にSVG形式のデータを作成する方法を見ていきましょう。まずは、SVGデータに変換したいデータを作成します。

ここで注意点ですが、テキストで作成したデータは必ずアウトライン化するようにしてください。

1.ソースコード

作成したオブジェクトを選択した状態で、「編集」→「コピー」を選択

コピー

これを一旦、テキストエディタに貼り付けてみると下のようなソースコードが出来上がります。

ソースコード

このソースコードを配置したいhtmlファイルなどに貼り付けてみましょう。そうすると、DEMOのように表示されたらOKです。

DEMO/ソースコードの場合

次に画像として書き出す方法を見てみましょう。

2.SVG画像として書き出す

オブジェクトを選択した状態で「ウィンドウ」→「アセットの書き出し」を選択します。

アセットの書き出し

または、「アセットの書き出し」ツール画面からでも可能です。

アセットの書き出し

PCの任意の場所に保存します。サンプルでは「DNBsvg.svg」という名前で保存しています。

保存

こちらを、一般的な画像データを表示するようにhtmlコードを記述してあげるとDEMOのようになります。

DEMO/画像データの場合

まとめ

作業内容は難しくありませんが、見慣れないSVG形式だとこれでいいの?となりそうです。簡単な方法なのでぜひ試してみてください。

 

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > Illustrator > 【Ai】IllustratorでSVGデータを書き出す方法