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

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上での解決策が見出せません。

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

ご教授願います。