SVG形式でイラストレータのデータを書き出す際、画像がある場合の埋め込み・配置などのポイント

どーもD-MARKING 渡辺です。

あまりブログ書いている時間がないので、いつも置き去りですが、

今日は制作中に、新しい発見があったので、記録がてら、情報を公開いたします。探してもなかったので、。

作業中なので簡単に、。

イラストレータのパスありデータをSVGで書き出すとキレイに表示されると思いますが、

それに画像があるとどうなるか、。

僕はいままで画像がある場合は避けていました。（別々に書き出して、HTMLでコーディング）

ただ、今回、LPのコーディングをしてまして、テキストで記載しないなら、わざわざコーディングしなくても、いっそそのまま書き出せたらいいのに、と思い、調べました。

（LPの場合テキストコーディングしたほうがポイントが高くなり、広告の関連度が上がるのですが、今回は納期と予算の都合上そこまでしなくて良いとの指示で）

さて、

色々試したので、記録です。

イラレで画像を配置してSVGを書き出す場合

スクリーン用に書き出しではSVGのパスが書き出し時のURLを拾うので、WEBでうまく表示させるにはこつがいる

そのようにディレクトリを作成しないと画像がなくなって表示される。

元画像のサイズは小さくならないので、結局WEB用に最適化しなければならない。

書き出し形式で書き出せば、埋め込みを指定できる

だが埋め込みで書き出すと、そのまま表示できるが、元ファイルのサイズそのままなので、

元のファイルをweb用に最適化してやる必要がある

WEB用に保存はSVGがない

これはJEGなど用

イラレで画像を埋め込んでSVGを書き出す場合

どちらもうまく書き出せるが元画像は最適化しなければならない

そうしないとおもたいファイルになってしまいます。

元画像の最適化

画像縮小

必要サイズまで画像を小さく

ロスレス圧縮

さらに画像を圧縮します。

画像あるSVGでロスレス圧縮が意味あるか？

結果意味がある

期待通り、ファイルサイズが小さくなった。

結局どうすればいい？

僕なりの答え

配置して書き出し形式で書き出す。

元画像はコピーしてバックアップをとっておき

小さく最適化して、圧縮する

以上です。

それでは