Skip to main content
  • 6,387 Posts
  • 12,209 Replies
6387 Posts
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上での解決策が見出せません。同じ境遇または、原因がわかる方がいらっしゃいましたらご教授願います。