بهینه ساز، مبدل و مولد SVG

بهینه‌ساز و مبدل رایگان SVG: کوچک‌سازی و تمیز کردن SVG (دسته‌ای)، تبدیل SVG به PNG، JPG، React JSX یا URI داده، مسیرهای ویرایش، برش نمای باکس، رنگ‌آمیزی، ساخت sprites، به‌علاوه موج، حباب، الگو، گرادیان مش و مولد نویز. بدون آپلود

ساخت و نگهداری توسط Shehzad Munir ·

بهینه ساز، مبدل و مولد SVG
Loading SVG Forge Studio
Share

23 ابزار SVG در یک فضای کاری خصوصی

یک فضای کاری رایگان و خصوصی SVG با ۲۳ ابزار. بهینه سازی و کوچک سازی SVG به سبک SVGO (به صورت دسته ای، با بررسی های قبل و بعد)، صادرات Figma و Illustrator را تمیز کنید، و SVG را به PNG، JPG، WebP، مؤلفه های React یا URI داده تبدیل کنید. همچنین می‌توانید فایل‌ها را تأیید کنید، مسیرها را ویرایش کنید، ViewBox را برش دهید، دوباره رنگ کنید، sprites بسازید و امواج، حباب‌ها، الگوها، گرادیان‌های مش، بافت‌ها و تقسیم‌کننده‌ها را در مرورگر خود ایجاد کنید.

SVG Forge مشاغل SVG را که معمولاً در پنج وب‌سایت پخش می‌کردید در یک صفحه به ارمغان می‌آورد: بهینه‌ساز به سبک SVGO با صادرات ZIP دسته‌ای، مینی‌فایر، پاک‌کننده و قالب‌کننده. مبدل های SVG به PNG، JPG، WebP، اجزای React و URI های داده. اعتباردهنده؛ یک ویرایشگر مسیر بصری، برش دهنده ViewBox، جایگزین رنگ و سازنده جن. و ده ژنراتور برای امواج، حباب ها، الگوها، گرادیان های مش، بافت دانه ها و تقسیم کننده های بخش. هر نتیجه ای را می توان با یک کلیک به ابزار بعدی تحویل داد. شما می توانید یک حباب ایجاد کنید، آن را دوباره رنگ کنید، آن را بهینه کنید و بدون کپی و چسباندن بین تب ها، آن را به عنوان یک جزء React صادر کنید.

ویژگی ها

  • 23 ابزار SVG: بهینه سازی، تبدیل، ویرایش و تولید
  • بهینه ساز به سبک SVGO: 21 جابجایی، از پیش تنظیم، ZIP دسته ای و تفاوت بصری
  • SVG به PNG، JPG و WebP در هر اندازه، از جمله مجموعه نمادهای 16-512 پیکسل
  • SVG to React / React Native (TSX یا JSX)
  • رمزگذار و رمزگشای URI داده، پس‌زمینه CSS و خروجی ماسک CSS
  • اعتبار سنجی: امنیت، دسترسی، اندازه و گزارش gzip
  • ویرایشگر مسیر با نقاط لنگر، تبدیل abs↔rel و جابجایی به نماد
  • برش به محتوا ViewBox، جایگزین رنگ (رنگ، ​​مقیاس خاکستری، رنگ فعلی) و سازنده sprite
  • مولدهای موج، حباب، الگو، گرادیان مش، نویز، تقسیم کننده، چند ضلعی، ستاره، مارپیچ و مولد squiggle
  • Local-first: فایل ها هرگز آپلود نمی شوند

نحوه استفاده از بهینه ساز، مبدل و مولد SVG

  1. 1

    ابزاری را انتخاب کنید

    از میان گزینه Optimize، Convert، Edit یا Generate در نوار کناری (یا انتخابگر در تلفن همراه) را انتخاب کنید. هر ابزار همچنین پیوند خاص خود را دارد، مانند #svg-to-png.

  2. 2

    SVG خود را اضافه کنید

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

  3. 3

    تنظیم و بررسی کنید

    تنظیم از پیش تنظیمات، لغزنده و کلید. پیش‌نمایش به‌روزرسانی می‌شود و بهینه‌ساز نسخه اصلی و نتیجه را در کنار هم با صرفه‌جویی در بایت و gzip نشان می‌دهد.

  4. 4

    صادرات یا تحویل دادن

    به صورت SVG، React، داده URI، Base64 یا CSS کپی کنید، svg. را دانلود کنید، PNG/JPG/WebP صادر کنید، یا نتیجه را مستقیماً به ابزار دیگری با «Open in…» ارسال کنید.

موارد استفاده رایج

  • قبل از ارسال به تولید، نمادها و تصاویر را بهینه و کوچک کنید
  • صادرات SVG متورم را از Figma، Illustrator، Inkscape یا Sketch پاک کنید
  • یک پوشه آیکون کامل را دسته ای فشرده کنید و آن را به صورت ZIP دانلود کنید
  • یک لوگوی SVG را برای ایمیل، رسانه های اجتماعی یا مجموعه فاویکون به PNG تبدیل کنید
  • نمادهای SVG را به اجزای تایپ شده React یا React Native تبدیل کنید
  • آیکون های کوچک درون خطی در CSS به عنوان کوچکترین URI داده ممکن
  • فضای خالی اطراف یک SVG را با قرار دادن viewBox با محتوای آن برش دهید
  • یک SVG را مجدداً به پالت برند تغییر رنگ دهید یا آن را به CurrentColor تغییر دهید
  • نمادها را در یک <symbol> sprite قابل استفاده مجدد قرار دهید
  • برای صفحات فرود پس‌زمینه‌های موج، حباب، گرادیان مش و دانه ایجاد کنید

راهنمای تفصیلی

به کدام ابزار SVG نیاز دارم؟

با کار شروع کنید، نه با نام ابزار. برای کوچکتر کردن فایل از Optimize استفاده کنید. برای استفاده از SVG در جایی که بیت مپ، کد یا CSS می خواهد، از Convert استفاده کنید. برای اصلاح یا تغییر شکل یک SVG موجود، از ویرایش استفاده کنید. برای ایجاد آثار هنری جدید از اسلایدرها، از Generate استفاده کنید.

گروهابزاربهترین برای
بهینه سازی و تمیز کردنبهینه ساز، کوچک کننده، پاک کننده، فرمت کننده، ساده کننده مسیرکوچک کردن نمادها و تصاویر قبل از ارسال
تبدیل و بازرسیSVG → PNG/JPG/WebP، SVG → React (JSX/TSX)، رمزگذار/رمزگشا URI داده، نمایشگر و اعتبارسنجیدریافت SVG به فرمت مورد نیاز برنامه، ایمیل یا CSS شما
ویرایش کنیدPath Editor، ViewBox & Crop، Color Replacer، Sprite Generatorاصلاح مسیرها، کوتاه کردن فضای خالی، رنگ‌آمیزی مجدد و بسته‌بندی نمادها
ایجاد کنیدامواج، حباب، الگو، گرادیان مش، نویز و دانه، تقسیم‌کننده شکل، چند ضلعی، ستاره، مارپیچ، چرخشپس زمینه، بخش های قهرمان، تقسیم کننده ها و اشکال تزئینی

بهینه ساز SVG چگونه کار می کند و کدام تنظیمات ایمن هستند

بهینه‌ساز فایل شما را به یک سند XML واقعی در مرورگر تجزیه می‌کند و 21 بهینه‌سازی را با مدل SVGO اعمال می‌کند. هر یک را می توان روشن یا خاموش کرد و سه پیش تنظیم (فقط متعادل، حداکثر، تمیز) موارد رایج را پوشش می دهد. بررسی بصری کنار هم رندر اصلی و بهینه‌شده را نشان می‌دهد، بنابراین می‌توانید قبل از دانلود تأیید کنید که هیچ تغییری نکرده است. می‌توانید ده‌ها فایل را به‌طور هم‌زمان رها کنید و آنها را به‌صورت یک ZIP بازگردانید. صادرات معمولی از Illustrator، Inkscape یا Figma 30 تا 70 درصد کوچک می‌شود و اندازه gzip نشان داده می‌شود زیرا سرور شما واقعاً آن را ارسال می‌کند.

بهینه سازیکاری که انجام می دهدریسک بصری
داده‌ها و ابرداده‌های ویرایشگر را حذف کنیدفضاهای نام Inkscape، Sodipodi، Illustrator، Sketch و Figma، <metadata> و نظرات را حذف می کند.هیچ کدام
اعداد گرد / فشرده سازی مسیرهامختصات را با دقت انتخابی شما گرد می کند و داده های مسیر را به شکل کوتاه تر از مطلق یا نسبی بازنویسی می کندهیچ کدام در اعشار 2-3. نمادهای کوچک را در 0-1 بررسی کنید
دف‌ها و شناسه‌های استفاده نشده را حذف کنیدشیب‌ها، مسیرهای کلیپ و شناسه‌هایی را که هیچ‌چیز به آنها ارجاع نمی‌دهد، حذف می‌کندهیچ کدام
جمع کردن گروه ها / حذف پیش فرض هابسته‌بندی‌های خالی <g> را باز می‌کند و مقادیری مانند fill-opacity="1" را حذف می‌کند.هیچ کدام
سبک ها → ویژگی ها، کوتاه کردن رنگ هاstyle="fill:#ffffff" fill="#ffff" می شودهیچ یک (در صورت وجود بلوک <style> به طور خودکار رد می شود)
پاسخگو (عرض/ارتفاع افتادن)فقط viewBox را نگه می دارد تا CSS اندازه را کنترل کنداگر به اندازه ثابت تکیه کنید، چیدمان ممکن است تغییر کند
<title>/<desc> را حذف کنیداسامی قابل دسترسی را حذف می کندهیچ کدام از نظر بصری، اما به کاربران صفحه خوان آسیب می رساند

کد SVG صادر شده از Figma، Illustrator یا Inkscape را پاک کنید

ابزارهای طراحی SVG را با نظرات مولد، اعلان‌های XML، فضاهای نام ویرایشگر، شناسه‌های لایه مانند Layer_1 و SVGID_1_، گروه‌های خالی، سبک‌های پس‌زمینه فعال و اعداد با شش اعشار صادر می‌کنند. SVG Cleaner آن را حذف می‌کند اما نشانه‌گذاری شما را به صورت تورفتگی و خوانا نگه می‌دارد، که زمانی مفید است که فایل را دستی ویرایش یا متحرک کنید. Optimizer برای تولید بیشتر پیش می رود و Validator دقیقاً آنچه در داخل است (تعداد عناصر، رنگ ها، فونت ها، بیت مپ های تعبیه شده، اسکریپت ها و پیوندهای خارجی) را فهرست می کند، بنابراین می توانید ببینید که چرا یک فایل قبل از استفاده از آن سنگین یا ناامن است.

SVG به PNG، React component یا data URI: از کدام فرمت استفاده شود

SVG بهترین انتخاب برای نمادها و تصاویر در وب است. با این حال، برخی مکان‌ها هنوز به یک بیت مپ یا کد نیاز دارند. مبدل‌ها هر مورد را بدون آپلود مدیریت می‌کنند.

صادراتزمانی که از آن استفاده کنیدیادداشت ها
PNG / WebPایمیل، پست‌های اجتماعی، فروشگاه‌های اپلیکیشن، فاویکون‌ها، هر جایی که SVG پذیرفته نمی‌شودهر اندازه تا ۸۱۹۲ پیکسل، پس‌زمینه شفاف، ZIP دسته‌ای و مجموعه آیکون‌های ۱۶–۵۱۲ پیکسلی با یک کلیک
JPGمکان هایی که نیاز به یک تصویر کوچک و غیر شفاف دارندرنگ پس زمینه جایگزین شفافیت را انتخاب کنید
React / React Nativeنمادهای داخل پایگاه کد React، Next.js یا Expoویژگی‌های camelCase، اشیاء سبک، {...props}، فعلیColor اختیاری و یک عنوان قابل دسترس
URI داده (نشانی اینترنتی رمزگذاری شده)نمادهای کوچک در CSS یا HTML بدون درخواست اضافیمعمولاً حدود 30٪ کوچکتر از Base64 است. خروجی ماسک CSS به شما امکان می دهد با رنگ پس زمینه مجدداً رنگ آمیزی کنید
SVG spriteبسیاری از آیکون ها دوباره در یک سایت استفاده می شوندیک فایل از <symbol>های ارجاع شده با <use href="#id">

تبدیل فرمت های دیگر تصویریک بسته فاویکون کامل بسازیدهر تصویر را در Base64 رمزگذاری کنید

ژنراتور برای پس زمینه های وب مدرن

ژنراتورها به جای صادرات بیت مپ، SVG تمیز و قابل ویرایش دستی تولید می کنند. امواج لایه‌ای و حباب‌های شکل‌گیری را می‌توان با SMIL متحرک کرد، که در پس‌زمینه <img> و CSS بدون جاوا اسکریپت کار می‌کند. مولد الگو 16 نقوش بدون درز را به صورت یک کاشی برای تکرار پس‌زمینه یا به صورت یک بوم کامل صادر می‌کند. گرادیان مش و مولدهای نویز باعث ایجاد گرادیان نرم و ظاهر دانه‌بندی فیلم در صفحات فرود مدرن می‌شوند، و تقسیم‌کننده شکل با یک قطعه HTML و CSS آماده برای چسباندن لبه‌های بخش ارائه می‌شود. هر خروجی را می توان به صورت SVG، React، داده URI یا CSS کپی کرد یا به PNG صادر کرد.

شیب های CSS، سایه ها و جلوه های شیشه ای ایجاد کنیدرنگ های HEX، RGB و HSL را تبدیل کنیدتصاویر مکان‌دار بسازید

خصوصی بر اساس طراحی: چیزی آپلود نشده است

تجزیه، بهینه سازی، شطرنجی کردن و فشرده سازی همه در مرورگر شما با APIهای وب استاندارد (DOMParser، Canvas و CompressionStream) اتفاق می افتد. آثار هنری شما هرگز به سرور نمی رسند، بنابراین ابزارها برای کار مشتری تحت NDA نیز کار می کنند. پیش‌نمایش‌ها از طریق <img> ایزوله ارائه می‌شوند، بنابراین هر اسکریپت در SVG که جای‌گذاری می‌کنید نمی‌تواند اجرا شود، و بهینه‌ساز می‌تواند تگ‌های <script> و کنترل‌کننده‌های رویداد را قبل از اینکه فایلی را در سایت خود جاسازی کنید، حذف کند.

سوالات متداول

چه ابزارهای SVG گنجانده شده است؟

بیست و سه، در چهار منطقه گروه بندی شده اند. بهینه سازی: بهینه ساز، کوچک کننده، پاک کننده، فرمت کننده و ساده کننده مسیر. تبدیل: SVG به PNG/JPG/WebP، SVG به React، Data URI و Viewer & Validator. ویرایش: ویرایشگر مسیر، ViewBox & Crop، Color Replacer و Sprite Generator. ایجاد: موج، حباب، الگو، گرادیان مش، نویز، تقسیم‌کننده شکل، چند ضلعی، ستاره، مارپیچ و چرخش.

چگونه یک فایل SVG را به صورت رایگان بهینه کنم؟

Optimizer را باز کنید، SVG خود را جایگذاری کنید یا یک یا چند فایل .svg را رها کنید، و یک پیش تنظیم (فقط متعادل، حداکثر یا تمیز) انتخاب کنید یا یکی از 21 بهینه سازی را تغییر دهید. این ابزار اندازه های اصلی، بهینه شده و gzip شده را به همراه بررسی بصری کنار هم نشان می دهد. سپس نتیجه را کپی کنید، آن را دانلود کنید یا هر فایل را به صورت ZIP دانلود کنید.

چگونه می توانم یک موج یا حباب SVG بسازم؟

از مولد Wave یا Blob استفاده کنید، لغزنده ها (لایه ها، دامنه، پیچیدگی، تصادفی بودن) و رنگ ها را تنظیم کنید و وکتور را به صورت زنده به روز کنید. برای کاوش تغییرات، روی Random ضربه بزنید، انیمیشن را برای جلوه‌های شکل‌گیری روشن کنید، سپس SVG را کپی کنید یا آن را صادر کنید.

آیا می توانم SVG را به عنوان پس زمینه CSS یا Data URI دریافت کنم؟

بله. هر نتیجه دارای برگه‌های صادراتی برای SVG خام، React، URI داده با کد URL فشرده، Base64 و یک قانون CSS آماده برای چسباندن، به‌علاوه دانلودهای svg. و PNG/JPG/WebP است. ابزار Data URI همچنین یک قطعه ماسک CSS تولید می کند و می تواند یک URI داده را دوباره به SVG رمزگشایی کند.

پاک کننده SVG چه چیزی را حذف می کند؟

اعلان‌های XML، DOCTYPE، نظرات، <متادیتا> و فضاهای نام ویرایشگر و ویژگی‌های Inkscape، Sodipodi، Illustrator، Sketch، Serif و Figma. این نشانه گذاری را تورفتگی و خواندنی نگه می دارد، بنابراین زمانی که هنوز می خواهید فایل را به صورت دستی ویرایش کنید، انتخاب مناسبی است.

آیا SVG من روی سرور آپلود می شود؟

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

چگونه یک فایل SVG را کوچک یا بهینه کنم؟

SVG و ابرداده‌های ویرایشگر، نظرات، تعاریف استفاده نشده و کد اضافی، SVG و بهینه‌ساز نوارهای ویرایشگر را جای‌گذاری یا آپلود کنید، اعداد را گرد می‌کند و داده‌های مسیر را فشرده می‌کند (مانند SVGO). این اغلب یک فایل را 30 تا 70 درصد کوچک می کند بدون اینکه ظاهر آن را تغییر دهد و همه آن در مرورگر شما اجرا می شود.

چگونه می توانم کد SVG نامرتب را از Figma یا Illustrator پاک کنم؟

ابزارهای طراحی مانند نظرات مولد، شناسه لایه‌ها، گروه‌های خالی و اعداد شش اعشاری را اضافه می‌کنند. صادرات را در Cleaner (آن را خوانا نگه می دارد) یا Optimizer (کوچکترین خروجی) قرار دهید تا نشانه گذاری سبک وزن و آماده وب داشته باشید.

آیا می توانم یک SVG را به یک URI داده تبدیل کنم؟

بله. برای هر نتیجه ای از ابزار Data URI یا زبانه Data URI استفاده کنید. از کدگذاری URL استفاده می کند که معمولاً حدود 30٪ کوچکتر از Base64 است و همچنین به شما Base64، یک قانون پس زمینه CSS و یک تگ <img> می دهد.

چگونه SVG را با پس زمینه شفاف به PNG تبدیل کنم؟

SVG را به PNG / JPG باز کنید، فایل(های) خود را اضافه کنید، PNG و مقیاس (مثلاً 4×) یا عرض یا ارتفاع دقیق را انتخاب کنید و پس زمینه شفاف را روشن نگه دارید. می‌توانید تعداد زیادی SVG را به صورت دسته‌ای به ZIP تبدیل کنید، به جای آن JPG یا WebP را انتخاب کنید، یا Icon set را انتخاب کنید تا 16–512 px PNG را برای فاویکون‌ها و نمادهای برنامه صادر کنید.

چگونه یک SVG را به یک جزء React تبدیل کنم؟

SVG را در SVG to React (JSX) قرار دهید، کامپوننت را نام ببرید و TypeScript یا JavaScript، React یا React Native را انتخاب کنید. ویژگی‌ها به camelCase تبدیل می‌شوند، سبک‌های درون خطی به اشیا تبدیل می‌شوند و {...props} روی ریشه پخش می‌شود. همچنین می‌توانید رنگ‌ها را به CurrentColor تغییر دهید و یک عنوان قابل دسترس اضافه کنید.

آیا بهینه سازی ظاهر SVG من را تغییر می دهد؟

نه با پیش تنظیم پیش فرض متعادل. هر بهینه سازی در آن فقط داده های نامرئی را حذف می کند یا مقادیر را به طور معادل بازنویسی می کند. دقت بسیار پایین (0 تا 1 اعشار) می‌تواند نقاط را روی نمادهای کوچک حرکت دهد، به همین دلیل است که بهینه‌ساز قبل از دانلود، نسخه اصلی و نتیجه را در کنار هم نشان می‌دهد.

چگونه فضای خالی اطراف یک SVG را حذف کنم؟

ViewBox & Crop را باز کنید، SVG را چسبانده و برش به محتوا را کلیک کنید. این ابزار محدوده های واقعی نقاشی را اندازه گیری می کند، یک ViewBox محکم با بالشتکی که انتخاب می کنید تنظیم می کند، و می تواند ویژگی های عرض و ارتفاع را به روز یا حذف کند.

چگونه می توانم رنگ های SVG را تغییر دهم؟

Color Replacer هر رنگ پر شده، stroke و گرادیان (hex، rgb()، hsl() و رنگ‌های نام‌گذاری‌شده) را تشخیص می‌دهد و فهرست می‌کند که هر کدام چند بار ظاهر می‌شوند. می‌توانید آن‌ها را یکی یکی دوباره نقشه‌برداری کنید، رنگ، اشباع و روشنایی کل فایل را تغییر دهید، به مقیاس خاکستری یا معکوس تبدیل کنید، یا همه چیز را با CurrentColor جایگزین کنید تا نماد از رنگ متن CSS شما پیروی کند.

SVG sprite چیست و چگونه از آن استفاده کنم؟

Sprite یک فایل SVG است که حاوی نمادهای زیادی به عنوان عناصر <symbol> است. نمادهای خود را به Sprite Generator اضافه کنید، سپس هر کدام را با <svg><use href="#icon-id"/></svg> ارجاع دهید. این ابزار می‌تواند شناسه‌های داخلی را برای جلوگیری از درگیری‌های گرادیان پیشوند و رنگ‌ها را به CurrentColor تبدیل کند و کد استفاده را برای شما تولید می‌کند.

آیا چسباندن یک SVG از منبع ناشناس ایمن است؟

بله. پیش نمایش ها در داخل <img> ایزوله ارائه می شوند، جایی که اسکریپت ها نمی توانند اجرا شوند. Validator برچسب‌های <script>، کنترل‌کننده‌های رویداد و پیوندهای خارجی را پرچم‌گذاری می‌کند و بهینه‌ساز اسکریپت‌ها و کنترل‌کننده‌ها را به‌طور پیش‌فرض قبل از جاسازی فایل در سایت حذف می‌کند.

آیا می توانم امواج و حباب های تولید شده را متحرک کنم؟

بله. ژنراتورهای Wave و Blob دارای یک ضامن Animate هستند که یک شکل SMIL مستقل اضافه می کند. در مرورگرهای داخل <img>، پس‌زمینه‌های CSS و SVG درون خطی، بدون نیاز به جاوا اسکریپت یا CSS پخش می‌شود.

از مجله

All articles →
How to Remove EXIF Metadata From Your PhotosTool Guides

How to Remove EXIF Metadata From Your Photos

Photos carry hidden data like GPS location and camera details. Here's why that matters for privacy and how to strip it before sharing.

SM
Shehzad Munir
Aug 19, 2026 · 3 min
What Is CPS? How to Test and Improve Your Click SpeedTool Guides

What Is CPS? How to Test and Improve Your Click Speed

CPS means clicks per second. Here's how it's measured, what a good score looks like, and how to test your own click speed for free.

SM
Shehzad Munir
Aug 17, 2026 · 3 min
How to Merge PDF Files for Free (Without Uploading Them)Tool Guides

How to Merge PDF Files for Free (Without Uploading Them)

Combine several PDFs into one document, reorder the pages, and keep everything private — no software and no server upload.

SM
Shehzad Munir
Aug 14, 2026 · 2 min