複雑なパスを単純化してSVGデータ容量を軽くする

Date:

Share post:

svgは、ロゴマークやイラスト、アニメーションをWebに掲載する際にとても便利なファイル形式ですね。どんなデバイスからでも美しく表示されるのは、制作者からしても非常に気持ちの良いものです。

ロゴマークなどの簡単なものでしたら、データ容量を気にする必要はありませんが、これが複雑なイラストになりますと、パスの数が膨大に増え、svgの表示速度にも影響を与えてしまいます。

そんな時は、Illustratorの「パスの単純化」で、イラストの品質に影響を与えない程度までパスを簡素化し、svgデータ容量を減らすことができます。
葛飾北斎の『冨嶽三十六景』より「神奈川沖浪裏」をパス化して、比べてみましょう。


(1)パスの単純化を選択する

「Illustrator > オブジェクト > パス > 単純化」を選択します。


(2)アンカーポイント削減の調整をする

曲線の単純化の%を操作します。%が低いほど、パスが単純化され、オブジェクトも簡易的な描写になっていきます。
また、「自動単純化」ボタンをクリックすると、自動で加減を調整してくれます。


(3)完成

パスを単純化する前とした後では、パット見品質に大きな差はありません。
しかし、データ容量を確認すると、明らかに軽くなっていることがわかります。

塵も積もれば・・・ですが、これならWeb上で使用する際にも読み込みに負担がかからず快適ですね。

Related articles

Laravel Filamentを使用した管理画面...

前回Breezeをインストールしたこと...

Laravel Filamentを使用した管理画面...

前回、filamentでのリソース作成...

Laravel Filamentを使用した管理画面...

前回、Filamentをインストールし...