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 )を使用してさらに最適化できます。

バック