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

Date:

Share post:

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

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

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


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

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


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

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


(3)完成

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

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

Related articles

画像検索の精度確認(4)

前回の投稿では、エンベディングの前処...

画像検索の精度確認(3)

過去の投稿を通して、TensorFl...

(ちょっとニッチな)FastAPI環境構築の巻(そ...

最近Tさんがすごい勢いで記事を書かれて...