حجم فایل SVG زیاد است؟ هشت ترفند فشرده‌سازی و بهینه‌سازی

فایل SVG اغلب به چند صد کیلوبایت یا حتی چند مگابایت می‌رسد و معمولاً علت آن زیاد بودن نقاط لنگر، مسیرهای تکراری، فرادادهٔ ویرایشگر و دقت بالای اعشار است. هشت ترفند زیر به ترتیب «از مبدأ تا تحویل» چیده شده‌اند و همه قابل اجرا هستند.

اول: در سطح مسیر؛ نقاط لنگر را کم و مسیرها را ادغام کنید

ترفند ۱: کاهش نقاط لنگر (ساده‌سازی مسیر)

هرچه نقاط لنگر بیشتر باشد فایل بزرگ‌تر و نمایش کندتر می‌شود. هنگام تبدیل میزان نرمی را کمی بالا ببرید تا نقاط لنگر از مبدأ کم شود؛ برای فایل‌های موجود می‌توان نقاط اضافی را با «شیء ← مسیر ← ساده‌سازی» در Illustrator یا «مسیر ← ساده‌سازی» (Ctrl+L) در Inkscape کم کرد. در ابزار تبدیل PolySVG هم می‌توانید میزان نرمی و تعداد رنگ را تنظیم کنید تا تعادل میان کیفیت و حجم را به‌صورت زنده ببینید.

ترفند ۲: ادغام مسیرها و لایه‌ها

مسیرهایی را که رنگ پرکنندهٔ یکسان دارند در یک مسیر ادغام کنید تا ویژگی‌های تکراری کم شود؛ گروه‌های تودرتوی بی‌معنا را صاف کنید و لایه‌های پنهان و عنصرهای خالی را حذف کنید. در نرم‌افزارهای طراحی می‌توانید از گزینهٔ «اتحاد» در ابزار مسیر استفاده کنید یا لایه‌ها را پیش از خروجی ادغام کنید.

دوم: درون فایل؛ فراداده را حذف و دقت را کم کنید

ترفند ۳: حذف فرادادهٔ ویرایشگر

فایل‌های SVG خروجی Illustrator و Inkscape اغلب فضای‌نام ویرایشگر، <metadata>، توضیحات و تنظیمات خروجی را همراه دارند که هیچ اثری بر نمایش ندارند؛ آن‌ها را دستی حذف کنید یا به SVGO بسپارید تا خودکار پاک شوند. به یاد داشته باشید <title> و <desc> را نگه دارید چون برای دسترس‌پذیری مفیدند.

ترفند ۴: کاهش دقت اعشار

مختصات مسیرها معمولاً شش تا هشت رقم اعشار دارند، در حالی که نمایشگر فقط یک تا دو رقم لازم دارد. در پیکربندی SVGO دقت عدد (floatPrecision) را روی ۱ تا ۲ بگذارید؛ حجم به‌روشنی کم می‌شود و با چشم تفاوتی دیده نمی‌شود. برای آیکون‌های بسیار کوچک مراقب باشید مختصات را بیش از حد فشرده نکنید تا شکل دچار تغییر شکل نشود.

سوم: خودکارسازی؛ فشرده‌سازی یک‌مرحله‌ای با SVGO

ترفند ۵: بهینه‌سازی خودکار با SVGO

SVGO مرجع ابزار بهینه‌سازی SVG است و ده‌ها افزونه دارد: حذف توضیحات و فراداده، ادغام مسیرها، بهینه‌سازی دستورهای مسیر و پاک‌سازی اعداد. روش استفاده:

npx svgo input.svg -o output.svg

حجم فایل معمولی بین ۳۰ تا ۷۰ درصد کم می‌شود. به دو نکته توجه کنید: ویژگی viewBox را حذف نکنید وگرنه بزرگ‌نمایی به هم می‌ریزد؛ و اگر قرار است رنگ آیکون‌ها با CSS تغییر کند، ارث‌بری fill را نگه دارید و رنگ را ثابت نکنید.

حجم فایل را پیش و پس از بهینه‌سازی با حجم واقعی انتقال در ابزارهای توسعه‌دهندهٔ مرورگر مقایسه کنید تا سود واقعی را ببینید؛ هر بار فقط یک دسته پارامتر را تغییر دهید تا در صورت بروز مشکل بتوانید منشأ آن را سریع پیدا کنید.

چهارم: ساختار و استفادهٔ مجدد؛ نمادسازی و کنترل لایه‌های رنگی

ترفند ۶: استفادهٔ مجدد با defs و use

وقتی یک آیکون چند بار در صفحه تکرار می‌شود، آن را یک بار در <defs> تعریف کنید و با چند <use> صدا بزنید، یا آن را در یک تصویر ترکیبی (sprite) جمع کنید؛ در این صورت هم حجم و هم تعداد درخواست‌ها کم می‌شود.

ترفند ۷: کنترل لایه‌های رنگی و پرهیز از تصویر رستری جاسازی‌شده

هنگام برداری‌سازی تعداد رنگ را کم کنید تا لایه‌های رنگی کاهش یابد؛ هرجا ممکن است به‌جای گرادیان‌های پیچیده از رنگ یکدست استفاده کنید. به‌ویژه از جاسازی تصویر رستری base64 در SVG بپرهیزید، چون این کار فایل برداری را به ظرفی برای تصویر رستری تبدیل می‌کند و حجم از کنترل خارج می‌شود. مسیرهای اضافی باقی‌مانده از تبدیل را می‌توانید در ویرایشگر آنلاین با کلیک حذف کنید.

پنجم: تحویل؛ فشرده‌سازی انتقال و حافظهٔ نهان

ترفند ۸: فعال کردن gzip/Brotli و حافظهٔ نهان

SVG متن است و با فعال شدن gzip/Brotli روی سرور، حجم انتقال معمولاً ۶۰ تا ۸۰ درصد دیگر کاهش می‌یابد؛ برای فایل‌های ثابت هدر کش طولانی‌مدت تنظیم کنید. آیکون‌های بسیار کوچک را می‌توان مستقیم داخل HTML جا داد و درخواست را حذف کرد. اصل ماجرا در مزایای SVG آمده و اگر می‌خواهید از مرحلهٔ تبدیل حجم را کنترل کنید، روش‌های تبدیل تصویر به SVG را بخوانید.

ترتیب مهم است: از مبدأ با کنترل نقاط لنگر و لایه‌های رنگی شروع کنید، درون فایل فراداده و دقت را پاک کنید، سپس SVGO را اجرا کنید و در پایان فشرده‌سازی انتقال را انجام دهید. با روی‌هم گذاشتن این چهار لایه، حجم SVG معمولاً یک مرتبه کوچک‌تر می‌شود.