IllustratorからのSVGエクスポート

SVGは、今日のWebで中心的な役割を果たします。 アイコンフォントが置き換えられただけでなく、CSSまたはJavaScriptを介した操作の可能性も提供します。 Adobe IllustratorからWeb用のベクターグラフィックをSVGとして保存する場合は、落とし穴を回避し、読み込み時間を短縮するためにいくつかの設定を行う必要があります。これについては、次の記事で説明します。


一般的なエクスポート機能は、「ファイル>エクスポート>名前を付けてエクスポート... 」にあります。 最後に、ファイルタイプとして「 SVG(* .SVG) 」を選択します。 透明な領域を切り取り、描画領域を考慮したくない場合は、「描画領域を使用する」チェックしてください。そうでない場合はチェックしてください。 次のダイアログで、次のオプションを選択します:

結果のパスの詳細レベルに満足できない場合は、小数点以下の桁数を3または4に徐々に増やします。

ベクターファイルにクリッピングマスクを埋め込んでいると面白いです。 これらも排除できます(これにより、 dompdfなどの印刷ツールを使用する場合のファイルサイズが小さくなり、互換性が向上します)。

Illustratorには2つのよく知られた方法があります。最初にすべてのオブジェクトをCTRL + Aでマークし、[オブジェクト]> [透明度を下げる...]を選択します。 次に、 [オブジェクト]> [クリッピングマスク]> [元に戻す]を使用して既存のクリッピングマスク削除します。 それでも問題が解決しない場合は、最後の2つの手順の代わりに、次の手順を実行します。最初に[オブジェクト]> [変換...]> [OK ]を選択し、次に[パスファインダー]ダイアログで[オーバーラップ領域の削除]オプションを選択します。:

最終的なSVGは、 svgoなどのツール(コマンドラインまたはWeb GUI )を使用してさらに最適化できます。

バック