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

Date:

Share post:

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

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

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


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

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


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

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


(3)完成

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

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

Related articles

LaravelでPDF生成(mpdf)

EC関連のシステムなどでは請求書や領...

我流Flutter学習ステップ(6)スマホでの動作...

本シリーズ(?)の最初の投稿で書いた...

その「平均値」に意味はあるのか?

最近「平均」に関して思うところがあっ...

遅まきながら、Vagrant(Virtualbox...

前回は、pumaを常時起動のユーザーサ...