SVGでスプライトアイコンを作成すると...

[薫澤58551415]

WEBサイトに利用するためにSVGのスプライトアイコンを作成する際に

SVGアイコンが逆さまになったり、アートボードが無視された表示が

されてしまう現象が起きています。

試した書き出し方法

• ファイル/書き出し/スクリーン用に書き出し/.svg
• ファイル/書き出し/書き出し形式/.svg

バージョン

Adobe Illustrator CC 2018 for Mac

制作状態

1つのアートボードに複数のアイコンを縦に並べています。

アイコンオブジェクトは全てシンボル化して

SVG出力時にuseタグにて管理と出力をしやすい設計をしています。

書き出したい条件

スプライトアイコンを作成するので、なるべく様々なところで

CSSやHTMLにて使い回しをしたいと思っています。

また、アートボードに対して余白があるもの、ないものがあります。

それらは全てバランス上同じ比率で表示させたいと思っています。

SVGアイコン自体を今後追加削除する際に、コード管理をしやすくするために

symbolでアイコンを表示する事。

書き出しについての問題

スクリーン用に書き出しの場合

上記の書き出しでは、アセット単位での書き出しはしないので

アセットによる設定はしていません。

アートボードタブから書き出していますが、

実際にuseタグを利用して表示すると、アイコンの余白がなくなり

指定したViewBoxに対して100%で表示されます。

書き出し形式の場合

「アートボードごとに作成」にチェック

拡張性 SVG

レスポンシブにチェック

縮小にチェック

スタイル 「プレゼンテーション属性」

上記で書き出した場合、シンボルで作成したアイコンが

ブラウザで読み込んだ際に逆さまになって表示されます。

「Illustratorの機能を保持」をしていない書き出したSVGを

Aiで読み込むと、作成したシンボルがシンボルウィンドウで

SVGアイコンが逆さまに変換されてしまいます。

また、iComoonなどの外部サービスを利用するなど方法はありますが、

規則上 ローンチする前からオンラインに公開出来ないので

ローカル環境でスプライトアイコンを実装したいと思っています。

このような条件の中で、調べはしましたが

Ai上での解決策が見出せません。

同じ境遇または、原因がわかる方がいらっしゃいましたら

ご教授願います。

[noellabo]

アイコンの余白を含む最大サイズの線無し・塗り無しの長方形を、シンボルに含めるのがシンプルではないでしょうか。

最終的には要らないので、SVGに書き出したあと、sedなりテキストエディタなりでrectを一括置換で消去してしまいましょう。

「書き出し形式の場合」については簡単に試した範囲では再現できなかったので、公開して差し支えないダミーの内容で、現象が再現できるIllustratorファイルと書き出したSVGファイルをどこかにアップしていただければ追試できます。

（「Illustratorの機能を保持」したSVGってそもそもできるんでしたっけ？）

[monokano]

（「Illustratorの機能を保持」したSVGってそもそもできるんでしたっけ？）

［ファイル > 別名で保存...］では可能、［ファイル >書き出し］では不可です。

[monokano]

アイコンの余白がなくなり

指定したViewBoxに対して100%で表示されます。

SVG書き出しの設定で［レスポンシブ］をONにしていると、SVGファイル内にwidthとheightが記述されません。余白がなくなるのはそのためです。余白が必要なら［レスポンシブ］をOFFにしてください。

追記：

［スクリーン用に書き出し...］の場合、設定ウインドウ内の小さな歯車アイコンをクリックすると、各フォーマットごとの設定ができます。そこで［レスポンシブ］をOFFにしてください。

[noellabo]

「Illustratorの機能を保持」いけました。なるほど、こっちか……。

「レスポンシブ」OFFでwidthとheightが記述されるのはsvgタグに対してで、symbol自体にはwidthやheightがつかないし、中身も余白を削除した座標になっているので、useの際にtransformで位置を補正しなければならないのは変わらないようです。

[monokano]

noellabo さん、確認しました。ホントですね…。

設定でどうにかなるような問題ではないようです。

なお、Illustratorのシンボルを使って作り、それをSVGにすると反転してしまう現象は、こちらでは再現しませんでした。