ویرایشگر آنلاین SVG

ویرایشگر حرفه‌ای SVG که کاملاً در مرورگر شما اجرا می‌شود

ویرایشگر SVG در Tools 4 All یک برنامهٔ کامل گرافیک برداری است که بی‌درنگ و بدون دانلود، حساب کاربری یا بارگذاری باز می‌شود. از آن برای کشیدن لوگو، آیکون، تصویرسازی، نمودار و دارایی‌های رابط کاربری، یا برای تمیز کردن و تنظیم دقیق فایل‌های SVG موجودتان استفاده کنید. این ویرایشگر بر پایهٔ خود قالب SVG ساخته شده، پس فایلی که خروجی می‌گیرید همان سندی است که ویرایش کرده‌اید: بدون قالب اختصاصی، بدون تبدیل پنهان.

چه کارهایی می‌توانید بکنید

• دقیق بکشید: ابزار قلم با منحنی‌های بزیه، مداد آزاد با هموارسازی، مستطیل با گوشه‌های گرد، پخ یا وارونهٔ مستقل، بیضی، خط، قلم‌موی لکه‌ای، پاک‌کن، چاقو و قیچی، و شکل‌های قابل ویرایش: چندضلعی، ستاره، مثلث، صلیب، قاب، حلقه، برش دایره، هلال، پیکان، حباب گفت‌وگو، چرخ‌دنده، قلب، ابر، گل و مارپیچ، و متن.
• مسیرها را گره به گره ویرایش کنید: گره‌ها و دستگیره‌ها را جابه‌جا کنید، میان گره‌های گوشه، هموار و متقارن تبدیل کنید، گره اضافه و حذف کنید، مسیرها را وصل و جدا کنید، بخش‌ها را مستقیماً خم کنید و دستگیره‌ها را به مماس‌ها بچسبانید.
• ترکیب شکل‌ها: اجتماع، تفریق، اشتراک، حذف اشتراک و تقسیم، به‌علاوهٔ تبدیل خط دور به شکل، جابه‌جایی مسیر، ساده‌سازی و وارونه‌سازی؛ همه با موتور هندسی خودمان که منحنی‌ها را حفظ می‌کند و در پس‌زمینه اجرا می‌شود.
• به همه چیز سبک بدهید: رنگ‌های یکدست، گرادیان‌های خطی و شعاعی با دستگیره روی بوم، الگوها، شفافیت جداگانه برای پرکردن و خط دور، خط‌چین، سر خط، اتصال، نشانگرهای سر پیکان، حالت‌های ترکیب، جلوه‌های تاری و سایه، مسیرهای برش و ماسک‌ها.
• منظم بمانید: پنل لایه‌ها با کشیدن برای تغییر ترتیب، تغییر نام و تودرتو کردن، قفل و پنهان، گروه و لغو گروه، تراز کردن و توزیع نسبت به انتخاب، صفحهٔ کار یا یک شیء کلیدی، نمونه‌رنگ‌های سند و نمادهای قابل استفادهٔ دوباره.
• حرفه‌ای کار کنید: راهنماهای هوشمند با برچسب فاصله و نشانهٔ فاصلهٔ برابر، چسبیدن به شبکه، پیکسل‌ها، خطوط راهنمای خط‌کش، گره‌ها و مسیرها، فیلدهای عددی X/Y/W/H/چرخش، واگرد نامحدود و میان‌برهای مشابه Figma و Illustrator.
• کد و خروجی: نمای دوطرفهٔ کد SVG، خروجی SVG بهینه با نمایش حجم، PNG/JPEG/WebP در هر مقیاسی، و کپی به‌صورت SVG، data URI، React (JSX یا TSX)، SVG برای Tailwind یا پس‌زمینهٔ CSS.
• ساخته‌شده برای تولید وب: رنگ‌های سند با جایگزینی تک‌کلیکی و تبدیل به currentColor، تبدیل متن به خطوط، تبدیل خط دور به شکل، صاف کردن تبدیل‌ها و لغو گروه، جا دادن بوم با محتوا و ساده‌سازی مسیرهای پرنویز.
• یک فضای کاری واقعی: چند طرح در زبانه‌ها، هر کدام با تاریخچهٔ واگرد خودش، منوهای کوتاه با زیرمنو، پنل کناری تاشو (Ctrl/⌘+B) و ویرایش تمام‌صفحه روی گوشی و دسکتاپ.

چرا ویرایشگر بومی SVG اهمیت دارد

بسیاری از ابزارهای طراحی با SVG مانند یک قالب خروجی برخورد می‌کنند: شما در مدل خود آن‌ها طراحی می‌کنید و SVG در پایان ساخته می‌شود. این برای آیکون‌های ساده جواب می‌دهد. اما وقتی باید فایلی موجود را ویرایش کنید، شناسه‌هایی را که CSS یا JavaScript شما به آن‌ها وابسته است حفظ کنید یا بفهمید چرا فایلی ده برابر بزرگ‌تر از حد لازم است، از کار می‌افتد. این ویرایشگر مستقیماً روی سند SVG کار می‌کند. گروه‌ها گروه می‌مانند، گرادیان‌ها گرادیان می‌مانند و یک <symbol> که پنج بار به کار رفته یک نماد می‌ماند. وقتی نام یک لایه را تغییر می‌دهید، در واقع id عنصر را تعیین می‌کنید.

سریع با فایل‌های بزرگ

سرعت از نخستین خط کد یکی از اهداف طراحی بود. طرح به‌صورت بومی توسط مرورگر شما درون یک لایهٔ جدا رندر می‌شود. دستگیره‌های انتخاب، خطوط دور هنگام نگه داشتن نشانگر و خطوط راهنما روی یک لایهٔ جداگانه کشیده می‌شوند، پس حرکت ماوس هرگز به سند شما دست نمی‌زند. یک نمایهٔ فضایی (R-tree) آنچه را زیر نشانگر است در چند میکروثانیه پیدا می‌کند، حتی با ده‌ها هزار شکل. در اسناد سنگین، جابه‌جایی دید و بزرگ‌نمایی به ترکیب‌کنندهٔ GPU سپرده می‌شود و بردارها پس از توقف دوباره واضح رندر می‌شوند. کارهای پرهزینه مانند عملیات بولی، جابه‌جایی مسیر و بهینه‌سازی SVG در یک Web Worker اجرا می‌شوند تا رابط پاسخ‌گو بماند.

ابزارهای دقیق برای کار برداری

با ابزار قلم برای گوشه کلیک کنید و برای منحنی هموار بکشید. برای حفظ زاویه‌های 45° Shift و برای شکستن دستگیره Alt را نگه دارید. با ابزار گره می‌توانید یک بخش را برای خم کردن بکشید، برای افزودن گره دوبار کلیک کنید یا چند گره را انتخاب و تراز کنید. راهنماهای هوشمند نشان می‌دهند کِی یک شیء با لبه‌ها یا مرکز همسایه‌هایش هم‌تراز است و کِی فاصلهٔ میان اشیا برابر است. همچنین می‌توانید خطوط راهنما را از خط‌کش‌ها بیرون بکشید. برای مقدارهای دقیق، X، Y، عرض، ارتفاع و چرخش را در پنل طراحی تایپ کنید. فیلدها محاسبهٔ ریاضی مانند 120+16 یا 200/3 را می‌پذیرند.

خروجی‌های تمیز و کم‌حجم

ویرایشگرها اغلب در فایل‌هایی که ذخیره می‌کنند فراداده، تعریف‌های بلااستفاده، گروه‌های زائد و اعداد بیش از حد دقیق باقی می‌گذارند. پنجرهٔ خروجی یک بهینه‌ساز به سبک SVGO را در پس‌زمینه اجرا می‌کند. اعداد را تا دقتی که انتخاب می‌کنید گرد می‌کند، دادهٔ مسیر را به کوتاه‌ترین شکل درمی‌آورد، فرادادهٔ ویرایشگر و تعریف‌های بلااستفاده را حذف می‌کند، شناسه‌ها و رنگ‌ها را کوتاه می‌کند و گروه‌های بی‌فایده را ادغام می‌کند. هر بهینه‌سازی را می‌توان خاموش کرد و پنجره حجم فایل را پیش و پس نشان می‌دهد. برای خروجی شطرنجی، PNG، JPEG یا WebP را با اندازهٔ 1×، 2×، 4× یا اندازهٔ دقیق پیکسلی، با پس‌زمینهٔ شفاف یا بدون آن انتخاب کنید.

ساخته‌شده برای تولید وب

SVGهایی که در وب‌سایت‌ها و برنامه‌ها به کار می‌روند نیازهای متفاوتی با آثار چاپی دارند. فهرست «رنگ‌های سند» همهٔ رنگ‌هایی را که فایل استفاده می‌کند نشان می‌دهد: یکی را تغییر دهید تا همهٔ مواردی که آن را دارند تغییر کنند، یا آن را به currentColor تبدیل کنید تا آیکون React یا Tailwind رنگش را از CSS بگیرد. فایل‌های واردشده اغلب گروه‌ها و تبدیل‌های تودرتو دارند که ویرایش مسیرها را سخت می‌کند: «صاف کردن تبدیل‌ها و لغو گروه» آن‌ها را در یک گام در مختصات ادغام می‌کند و «جا دادن با محتوا» viewBox را با احتساب خط دورها به اندازهٔ طرح کوتاه می‌کند. «متن به خطوط» و «تبدیل خط دور به شکل» متن و ضخامت خطوط را به مسیرهای ساده‌ای تبدیل می‌کنند که همه جا یکسان دیده می‌شوند، و «ساده‌سازی» صدها نقطه را از یک شکل ردیابی‌شده یا آزاد حذف می‌کند.

فایل‌هایتان روی دستگاه خودتان می‌مانند

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

ابزارهای تصویر بیشتر را ببینید