Loading…

درباره زیبا کننده و فشرده ساز آنلاین SVG

با فایل‌های SVG شلوغ یا حجیم کار می‌کنید؟ کد خود را جایگذاری کنید یا یک فایل `.svg` آپلود کنید، **فرمت** را برای زیبا کردن یا **فشرده سازی** را برای کاهش اندازه آن انتخاب کنید و بلافاصله نشانه‌گذاری SVG تمیز و بهینه شده دریافت کنید. مناسب برای طراحان، توسعه‌دهندگان فرانت‌اند و هر کسی که به بهینه‌سازی سریع و ایمن وکتور نیاز دارد. 🚀

ویژگی‌های کلیدی فرمت دهنده SVG ما

  • **حالت زیبا کردن** با تورفتگی هوشمند، شکستن خط و تراز ویژگی‌ها
  • **حالت فشرده سازی** که فضاهای خالی، نظرات و ابرداده‌های اضافی را حذف می‌کند
  • فرمت‌دهی به سبک Prettier و بهینه‌سازی به سبک SVGO در پشت صحنه
  • سبک تورفتگی قابل تنظیم (فاصله یا تب) و اندازه تورفتگی
  • ستون شکست اختیاری برای مرتب نگه داشتن مسیرها و ویژگی‌های طولانی
  • سبک یکپارچه پایان خط (LF / CRLF) برای diffهای تمیز در بین سیستم‌عامل‌ها
  • کشیدن و رها کردن فایل‌های `.svg` تا ۵ مگابایت یا چسباندن نشانه‌گذاری SVG درون‌خطی
  • پردازش ۱۰۰٪ سمت کاربر - آثار هنری شما هرگز مرورگر را ترک نمی‌کنند
  • کپی یا دانلود یک‌کلیکی خروجی قالب‌بندی‌شده (`.formatted.svg`) یا فشرده (`.min.svg`)
  • رابط کاربری واکنش‌گرا که به خوبی روی لپ‌تاپ‌ها، دسکتاپ‌ها و تبلت‌ها کار می‌کند

🔧 نحوه قالب‌بندی یا فشرده‌سازی SVG: راهنمای سریع for svg-formatter

1

1. چسباندن یا آپلود SVG

📥 فایل `.svg` خود را بکشید و رها کنید یا نشانه‌گذاری SVG خام را در ویرایشگر بچسبانید. ابزار به طور خودکار محتوای استاندارد `image/svg+xml` را تشخیص می‌دهد.

2

2. انتخاب قالب‌بندی یا فشرده‌سازی

✨ **قالب‌بندی** را برای نشانه‌گذاری قابل خواندن توسط انسان (عالی برای بازبینی‌ها و کنترل نسخه) یا **فشرده‌سازی** را برای کوچک‌ترین اندازه فایل ممکن انتخاب کنید.

3

3. تنظیم گزینه‌های قالب‌بندی

⚙️ **سبک تورفتگی** (فاصله یا تب)، **اندازه تورفتگی** و **طول خط / پیچش** اختیاری را تنظیم کنید. اینها مستقیماً به تنظیمات قالب‌بند زیرین نگاشت می‌شوند.

4

4. پیش‌نمایش و خروجی

👀 کد SVG بهینه‌شده را بررسی کنید، آن را سریع در پروژه خود آزمایش کنید، سپس آن را در کلیپ‌بورد خود کپی کنید یا نتیجه را به عنوان فایل `.svg` جدید دانلود کنید.

جزئیات فنی

موتور زیباسازی (حالت قالب‌بندی)

حالت قالب‌بندی از موتوری شبیه Prettier استفاده می‌کند که برای نشانه‌گذاری XML SVG تنظیم شده است. این موتور بر خوانایی و diffهای پایدار و قابل پیش‌بینی تمرکز دارد.

جنبهرفتاریادداشت‌ها
سبک تورفتگیفاصله یا تباز طریق **سبک تورفتگی** قابل پیکربندی است (به `indentStyle` نگاشت می‌شود).
اندازه تورفتگی۱-۸ فاصلهعرض تودرتو هنگام استفاده از فاصله را کنترل می‌کند (به `indentSize` نگاشت می‌شود).
طول خط / پیچش۰-۱۲۰ ستون`0` پیچش را غیرفعال می‌کند؛ در غیر این صورت خطوط طولانی در اطراف ستون انتخاب شده پیچیده می‌شوند (به `wrapLineLength` نگاشت می‌شود).
پایان خطLF (`\n`) یا CRLF (`\r\n`)پایان خط‌ها را در بین سیستم‌عامل‌ها یکپارچه نگه می‌دارد (به `endOfLine` نگاشت می‌شود).
زبان خروجیSVG با سبک XMLساختار XML سازگار با SVG را برای جاسازی ایمن حفظ می‌کند.

خط لوله کوچک‌سازی (حالت مینیفای)

حالت مینیفای از خط لوله‌ای الهام‌گرفته از SVGO استفاده می‌کند که بر کاهش اندازه تمرکز دارد در حالی که خروجی بصری را حفظ می‌کند.

مرحلهتوضیحاتتاثیر
حذف نظراتگره‌های نظری `<!-- ... -->` را که بر رندرینگ تاثیری ندارند، حذف می‌کند.فایل‌های کوچک‌تر، تفاوت‌های تمیزتر.
حذف فاصله‌های اضافیفاصله‌ها، تب‌ها و شکست‌های خط غیرضروری را جمع می‌کند.سود بزرگ برای SVGهای صادر شده از ویرایشگرهای پرحرف.
هرس فرادادهدر صورت ایمن بودن، گره‌های فراداده غیررندرینگ را به صورت اختیاری حذف می‌کند.مناسب برای دارایی‌های تولید عمومی.
نرمال‌سازی ویژگی‌هاویژگی‌ها را به روشی پایدار ساده و مرتب می‌کند.خروجی فشرده‌تر، قابلیت کش بهتر.

رمزگذاری و سازگاری

خروجی UTF-8 SVG با مرورگرها و ابزارهای مدرن سازگار است و با مشخصات SVG 2 هماهنگ است.

عملکرد و محدودیت‌ها (مرورگر دسکتاپ معمولی)

نوع فایلاندازه ورودیزمان زیباسازیزمان کوچک‌سازیکاهش اندازه معمول
آیکون۵ کیلوبایت⚡ کمتر از ۱۵ میلی‌ثانیه⚡ کمتر از ۲۰ میلی‌ثانیه≈ ۲۵–۴۰٪
تصویرسازی۱۰۰ کیلوبایت⚡ کمتر از ۶۰ میلی‌ثانیه⚡ کمتر از ۹۰ میلی‌ثانیه≈ ۴۰–۵۵٪
گرافیک قهرمان۵۰۰ کیلوبایت⏱️ < ۳۰۰ میلی‌ثانیه⏱️ < ۴۵۰ میلی‌ثانیه≈ ۵۰–۶۰٪
عملکرد واقعی به پردازنده، مرورگر و پیچیدگی SVG بستگی دارد.

جایگزین‌های CLI برای کاربران حرفه‌ای

آیا گردش کار ترمینال یا یکپارچه‌سازی CI را ترجیح می‌دهید؟ Prettier و SVGO را برای رفتاری مشابه این ابزار ترکیب کنید:

لینوکس / 🍎 مک

زیبا کردن SVG با Prettier

npx prettier --parser xml --print-width 80 --tab-width 2 --write input.svg

تورفتگی و شکستن خطوط یکنواخت را به نشانه‌گذاری SVG شما اعمال می‌کند.

کوچک کردن SVG با SVGO

npx svgo input.svg -o input.min.svg

نظرات، فراداده و فضاهای خالی اضافی را برای فایل‌های کوچک‌تر حذف می‌کند.

ویندوز (PowerShell یا CMD)

زیبا-چاپ SVG با استفاده از xmlstarlet (از طریق WSL یا بومی)

xmlstarlet fo --indent-spaces 2 input.svg > pretty.svg

SVG/XML را با تورفتگی ۲ فاصله قالب‌بندی می‌کند.

کوچک کردن SVG با SVGO (بدون نصب سراسری)

npx svgo input.svg -o min.svg

SVGO را مستقیماً از طریق `npx` برای بهینه‌سازی‌های یک‌باره اجرا می‌کند.

Prettier + SVGO را به فرآیند ساخت یا هوک‌های پیش از کامیت اضافه کنید تا طراحان بتوانند SVGهای خام را صادر کنند و خط لوله شما آن‌ها را بهینه نگه دارد.

کاربردهای عملی

عملکرد وب و بسته‌های فرانت‌اند

  • کاهش حجم SVG در سیستم‌های طراحی، مجموعه‌های آیکون و صفحات اسپرایت.
  • قرار دادن SVG کوچک‌شده درون خطی در HTML/CSS برای صرفه‌جویی در درخواست‌های HTTP اضافی.
  • بهبود Core Web Vitals با کوچک کردن تصاویر قهرمان در صفحات فرود.
<img src="/assets/hero.min.svg" alt="گرافیک قهرمان بهینه‌شده" />
.icon-check { background-image: url('data:image/svg+xml;utf8,<svg ...>'); }

تحویل طراحی و کنترل نسخه

  • زیبا کردن SVG صادر شده قبل از بازبینی کد برای خوانایی تفاوت‌ها.
  • نگهداری یک `.formatted.svg` زیبا برای همکاری و یک `.min.svg` برای تولید.
  • اعمال تورفتگی و ترتیب ویژگی‌های یکنواخت در سراسر سیستم طراحی.

موبایل، ایمیل‌ها و اپ‌های ترکیبی

  • کوچک کردن SVGهای درون خطی در ایمیل‌های HTML برای کمپین‌های سبک‌تر.
  • کاهش حجم بسته اپ در React Native / Capacitor / Ionic هنگام ارسال آیکون‌های زیاد.
  • صرفه‌جویی در پهنای باند برای کاربران با اتصالات کند یا محدود.

❓ Frequently Asked Questions

❓قالب‌بندی SVG چیست؟

قالب‌بندی (یا زیباسازی) ساختار نشانه‌گذاری SVG شما را با تورفتگی یکنواخت، شکستن خط و ترتیب ویژگی‌ها بازسازی می‌کند. این کار نحوه نمایش تصویر را تغییر نمی‌دهد، فقط ظاهر کد و رفتار diff را تغییر می‌دهد.

📏آیا فشرده‌سازی ظاهر SVG من را تغییر می‌دهد؟

در موارد عادی، خیر. فشرده‌سازی نظرات، فضاهای خالی اضافی و ابرداده‌های غیرنمایشی را حذف می‌کند. این فرآیند برای حفظ نتیجه بصری در حین کاهش اندازه طراحی شده است. اگر به ابرداده‌های خاص برای ابزارهای ویرایش متکی هستید، یک نسخه پشتیبان از فایل اصلی نگه دارید.

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

هرگز. تمام قالب‌بندی و فشرده‌سازی به طور کامل در مرورگر شما با استفاده از JavaScript/WebAssembly اجرا می‌شود. فایل‌های SVG شما به هیچ سروری ارسال نمی‌شوند یا از راه دور ذخیره نمی‌شوند.

🚀فشرده‌سازی چقدر در اندازه صرفه‌جویی می‌کند؟

صرفه‌جویی در دنیای واقعی معمولاً بین **۳۰٪ تا ۷۰٪** است، بسته به اینکه SVG چگونه صادر شده و چقدر ابرداده یا فضای خالی دارد.

⚠️آیا حذف `<metadata>` یا نظرات می‌تواند گردش کار من را مختل کند؟

برای گرافیک‌های وب عمومی، حذف ابرداده و نظرات معمولاً ایمن است. با این حال، اگر ابزارهای طراحی شما داده‌های ویرایش یا اطلاعات مجوز را در آن بخش‌ها ذخیره می‌کنند، یک کپی اصلی و فشرده‌نشده در کنترل نسخه برای ویرایش‌های آینده نگه دارید.

Pro Tips

Best Practice

یک `icon.formatted.svg` فشرده‌نشده در مخزن خود نگه دارید برای diffهای تمیز، سپس `icon.min.svg` را به عنوان بخشی از مرحله ساخت تولید کنید.

Best Practice

همیشه عناصر معنادار `<title>` و `<desc>` را قبل از فشرده‌سازی شامل شوید تا SVGهای شما برای خوانندگان صفحه قابل دسترسی باقی بمانند.

Best Practice

فشرده‌سازی SVG را با فشرده‌سازی HTTP (Gzip/Brotli) ترکیب کنید تا بایت‌های بیشتری از تصاویر و نمودارهای سنگین خارج کنید.

Best Practice

برای مجموعه‌های آیکون، یک استراتژی sprite در نظر بگیرید: یک بار فشرده کنید، سپس از طریق `<use>` به آیکون‌ها ارجاع دهید به جای تکرار کد SVG در همه جا.

Additional Resources

مشخصات W3C SVG 2
Documentation
مستندات وب MDN: SVG
Documentation
SVGO (GitHub)
Documentation
قالب‌بندی XML / SVG Prettier
Documentation

Other Tools