بهینه‌ساز SVG

فایل برداری SVG را تا ۸۰٪ فشرده و تمیز کنید: اضافات ویرایشگر را حذف کنید، مختصات اعشاری مسیر را گرد کنید و فاصله سفید را جمع کنید — صددرصد محلی در مرورگر.

بدون آپلودبدون ثبت‌نامپردازش دسته‌ای
تا ۸۰٪ کوچک‌تردقت مختصاتقبل / بعدZIP دسته‌ای
دانلود
موتور آفلاین آماده استفضای کار ۱۰۰٪ خصوصی در مرورگر • بدون آپلود ابری
۱۰۰٪ خصوصی • بدون آپلود فایل به سرور

چرا از بهینه‌ساز برداری SVGO سمت کاربر Utiliome استفاده کنیم؟

از پایه برای حریم خصوصی سخت‌گیرانه، اجرای فوری و بدون اصطکاک ساخته شده. بدون اشتراک، دیوار پرداخت یا ثبت‌نام.

گرد کردن دقت اعشار مختصات

مختصات پرجزئیات مسیر بزیه با ۶ رقم اعشار (d="M12.345678...") را به ۱ تا ۵ رقم گرد کنید و ۵۰٪ تا ۷۵٪ حجم خام برداری را بدون اعوجاج دیداری کم کنید.

حذف اضافات Figma، Illustrator و Inkscape

خودکار پرولوگ XML، نظر، <metadata>، xmlns:inkscape، sodipodi:*، ویژگی data-name و ظرف خالی <g> یا <defs> را پاک می‌کند.

نمای زنده قبل / بعد و نمای کد

بردار بهینه‌شده را با لغزنده تعاملی قبل/بعد روی صفحه شطرنجی شفاف ببینید، یا به نمای کد بروید و نشانه‌گذاری SVG فشرده را کپی کنید.

حریم خصوصی محلی و خروجی ZIP دسته‌ای

ده‌ها آیکون را هم‌زمان در حافظه مرورگر با پیشرفت جدا برای هر زبانه بهینه کنید و همه فایل‌های .svg تمیز را در یک آرشیو ZIP خروجی بگیرید.

Utiliome در برابر جایگزین‌های ابری سنتی

موتور محلی WebAssembly ما را با ابزارهای ابری قدیمی مقایسه کنید.

ویژگی Utiliome (مرورگر محلی) مبدل‌های ابری قدیمی
کنترل دقت مختصات مسیر گرد کردن قابل تنظیم ۱ تا ۵ رقم اعشار روی d، points، viewBox و تبدیل‌ها گرد کردن تهاجمی ثابت که آیکون ریز ۱۶×۱۶ را خراب می‌کند
تأیید دیداری و تفاوت کد لغزنده تعاملی قبل/بعد + نمای کد SVG زنده و قابل کپی دانلود کور فایل، بدون بررسی کنار هم مسیر
حریم خصوصی و آیکون اختصاصی اجرای صددرصد سمت کاربر در مرورگر (صفر آپلود به سرور) لوگوی برند و کیت رابط اختصاصی را به سرور ابری آپلود می‌کند
پردازش دسته‌ای و هزینه صف دسته‌ای چندفایلی نامحدود + خروجی ZIP یک‌کلیکی (صددرصد رایگان) سقف تعداد فایل، دیوار پرداخت یا نیاز به راه‌اندازی CLI
چگونه کار می‌کند

چطور فایل SVG را آنلاین در ۳ گام بهینه و فشرده کنیم

نیازی به نصب نرم‌افزار نیست. همه‌چیز مستقیم داخل مرورگر اجرا می‌شود.

1

یک یا چند فایل SVG را رها کنید

آیکون، لوگو یا تصویرسازی .svg را در ناحیه رها کردن بیندازید. Utiliome هر فایل را پشت‌سرهم در مرورگر تجزیه و بهینه می‌کند.

2

دقت مختصات و گذرهای بهینه‌سازی را تنظیم کنید

لغزنده دقت مختصات را تنظیم کنید (۲ رقم اعشار توصیه می‌شود) و حذف متادیتا، فشرده‌سازی رنگ HEX و جمع کردن فاصله سفید را روشن کنید و نمای قبل/بعد را چک کنید.

3

کد SVG فشرده را کپی کنید یا ZIP دانلود کنید

«کپی کد SVG» را بزنید تا نشانه‌گذاری درون‌خطی HTML/JSX مستقیم در کدبیس بچسبد، یا فایل‌های جدا -optimized.svg و آرشیو ZIP دسته‌ای را دانلود کنید.

چرا فایل SVG خروجی پرحجم است: کالبدشکافی سربار فایل برداری

پاسخ کوتاه: ابزار طراحی مثل Adobe Illustrator، Figma، Inkscape و Sketch فضای نام ویرایشگر XML، نام لایه، گروه پنهان و مختصات اعشاری ۶ رقمی را جاسازی می‌کنند تا فایل بعداً دوباره ویرایش شود — اغلب حجم SVG وب را ۴۰٪ تا ۸۰٪ باد می‌کند.

گرافیک برداری مقیاس‌پذیر (.svg) سند XML متن ساده است که شکل را با مسیر ریاضی توصیف می‌کند (<path>، <circle>، <rect>، <polygon>). وقتی آیکون یا تصویرسازی را از ویرایشگر برداری دسکتاپ خروجی می‌گیرید، صادرکننده قابلیت ورود دوباره پروژه را بر کارایی وب تولید ترجیح می‌دهد:

  • دقت بیش از حد مختصات با ۶ رقم اعشار: دستوری مثل M 14.892341,28.104923 C 19.000124,31.999871... برای هر رأس ده‌ها بایت روی کسر زیرپیکسل هدر می‌دهد که روی هیچ صفحه‌ای دیدنی نیست.
  • فضای نام ویرایشگر و متادیتای RDF: Inkscape و Illustrator ویژگی‌های <metadata>، <sodipodi:namedview>، xmlns:inkscape، data-name و enable-background را تزریق می‌کنند که مرورگر کاملاً نادیده می‌گیرد.
  • ظرف خالی تکراری و کد HEX بلند: گروه تودرتوی <g></g> پس از جدا کردن لایه و رشته هگز ۶ نویسه‌ای (#ffffff به‌جای #fff) گره DOM و بایت اضافه می‌گذارد.

گرد کردن دقت مختصات چطور داده مسیر SVG را بدون کج کردن منحنی کوچک می‌کند

پاسخ کوتاه: گرد کردن مختصات مسیر SVG (ویژگی d و points) به ۲ رقم اعشار طول رشته مسیر را ۴۵٪ تا ۷۰٪ کم می‌کند و دقت زیر یک‌صدم پیکسل را در ابعاد معمول viewBox حفظ می‌کند.

در آیکون و تصویرسازی وب تولیدی، ویژگی <path d="..." /> معمولاً ۷۰٪ تا ۹۰٪ حجم کل فایل است. انتخاب دقت اعشار درست، حداکثر فشرده‌سازی بایت را با وفاداری هندسی متعادل می‌کند:

تنظیم دقت نمونه مختصات مقیاس ایده‌آل viewBox صرفه‌جویی معمول بایت و اثر دیداری
۱ رقم اعشار (0.1) M14.9 28.1 تصویرسازی بزرگ (500×500+) ۶۵٪ تا ۸۰٪ کوچک‌تر؛ ممکن است نقطه کنترل آیکون ریز 16×16 کمی جابه‌جا شود
۲ رقم اعشار (0.01) — پیش‌فرض M14.89 28.1 آیکون استاندارد رابط (24×24 تا 512×512) ۵۰٪ تا ۷۰٪ کوچک‌تر؛ روی نمایشگر Retina از اصل از نظر ریاضی تشخیص‌ناپذیر
۳ رقم اعشار (0.001) M14.892 28.105 CAD فنی / نقشه با چگالی بالا ۳۵٪ تا ۵۰٪ کوچک‌تر؛ ریزمنحنی را زیر بزرگ‌نمایی شدید حفظ می‌کند
۴ تا ۵ رقم اعشار M14.8923 28.1049 viewBox="0 0 1 1" نرمال‌شده زیر واحد ۲۰٪ تا ۳۵٪ کوچک‌تر؛ نویز صفر انتهایی را برمی‌دارد و دقت CAD می‌ماند

از لغزنده تعاملی قبل / بعد روی بوم استفاده کنید تا روی اثر برداری زنده بکشید و پیش از خروجی، رانش صفر منحنی را تأیید کنید.

بهینه‌ساز SVG در برابر مبدل SVG به PNG: گردش برداری درست

پاسخ کوتاه: وقتی می‌خواهید گرافیک به‌صورت فایل مقیاس‌پذیر .svg یا کد درون‌خطی <svg> با حجم کیلوبایت کمتر بماند از بهینه‌ساز SVG استفاده کنید. وقتی به بیت‌مپ شطرنجی .png برای پلتفرمی که آپلود SVG را مسدود می‌کند نیاز دارید از مبدل SVG به PNG استفاده کنید.

هر دو ابزار فایل برداری .svg را محلی در مرورگر پردازش می‌کنند، اما هدف انتشار کاملاً متفاوت است:

هدف گردش کار ابزار پیشنهادی Utiliome قالب خروجی و کاربرد اصلی
کوچک کردن حجم .svg برای وب و کد درون‌خطی بهینه‌ساز SVG (همین ابزار) فایل برداری .svg تمیز و فشرده یا کد قابل کپی <svg> برای HTML، React، Vue و Core Web Vitals
شطرنجی کردن .svg به بیت‌مپ پیکسل (1x تا 8x) مبدل SVG به PNG .png بدون افت وضوح بالا با شفافیت آلفا برای شبکه اجتماعی، آپلود CMS و دارایی فروشگاه برنامه
رمز کردن SVG بهینه‌شده به‌صورت Data URI در CSS مبدل تصویر به Base64 رشته data:image/svg+xml;base64,... برای جاسازی پس‌زمینه CSS بدون درخواست
بسته‌بندی لوگوی SVG در فاویکون مرورگر سازنده فاویکون بسته چنداندازه favicon.ico، apple-touch-icon.png و site.webmanifest
پرسش‌های رایج

پرسش‌های بهینه‌ساز SVG و راهنمای فشرده‌سازی مسیر برداری

هرچه برای استفاده از بهینه‌ساز SVG رایگان و آنلاین Utiliome لازم است.

بهینه‌سازی SVG کیفیت دیداری یا وضوح را کم می‌کند؟

نه. فایل SVG پس از بهینه‌سازی صددرصد بردار بی‌نهایت مقیاس‌پذیر می‌ماند. حذف نظر XML، متادیتای ویرایشگر و فاصله سفید اثر دیداری صفر دارد و گرد کردن مختصات مسیر به ۲ تا ۳ رقم اعشار دقت منحنی زیرپیکسل را حفظ می‌کند.

برای آیکون رابط ۲۴×۲۴ کدام دقت مختصات را بگذارم؟

برای آیکون استاندارد ۱۶×۱۶، ۲۰×۲۰ یا ۲۴×۲۴ (مثل Lucide، Heroicons یا Feather) ۲ رقم اعشار نقطه شیرین است. اگر آیکون viewBox خیلی کوچک دارد (مثل 0 0 8 8) و در لغزنده قبل/بعد جابه‌جایی جزئی منحنی دیدید، لغزنده را به ۳ رقم ببرید.

این بهینه‌ساز SVG ویژگی <script> مخرب یا رویداد را حذف می‌کند؟

می‌توانید نشانه‌گذاری دقیق تمیزشده را در زبانه «کد SVG» پیش از کپی یا دانلود ببینید. بهینه‌ساز پرولوگ غیر استاندارد XML، اعلان DOCTYPE، نظر و فضای نام ویرایشگر را برمی‌دارد و هندسه برداری تمیز را حفظ می‌کند.

می‌توان چند فایل SVG را هم‌زمان بهینه کرد و ZIP دانلود کرد؟

بله. یک مجموعه کامل آیکون را در فضای کار رها کنید — Utiliome هر زبانه SVG را پشت‌سرهم در حافظه محلی مرورگر پردازش می‌کند و اجازه می‌دهد تنظیم دقت را روی همه فایل‌ها اعمال و یک آرشیو ZIP خروجی بگیرید.

کی از بهینه‌ساز SVG و کی از مبدل SVG به PNG استفاده کنم؟

وقتی آیکون برداری مقیاس‌پذیر را در وب‌سایت، برنامه React/Vue یا CSS منتشر می‌کنید و کوچک‌ترین فایل .svg را می‌خواهید از بهینه‌ساز SVG استفاده کنید. وقتی پلتفرم (مثل Twitter/X، امضای ایمیل یا Google Docs) فایل .svg نمی‌پذیرد و بیت‌مپ .png با DPI بالا می‌خواهد از مبدل SVG به PNG استفاده کنید.

فایل SVG هنگام بهینه‌سازی به سرور راه دور آپلود می‌شود؟

هرگز. هر گذر بهینه‌سازی صددرصد محلی داخل مرورگر با JavaScript اجرا می‌شود. لوگوی برند اختصاصی و کتابخانه آیکون هرگز دستگاه را ترک نمی‌کند.