ویرایش منحنی SVG با حفظ ابعاد و رنگ

یک آیکون SVG دارید و می‌خواهید انحنای بخشی از آن را ملایم‌تر کنید. ابتدا فرمان مربوط به همان هندسه را پیدا کنید و تغییر را محدود نگه دارید. یک نسخهٔ مستقل از فایل اصلی هم ذخیره کنید.

از مسیر شروع کنید

این مثال ساده را به‌صورت یک فایل SVG ذخیره کنید:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 100">
  <path d="M 20 70 C 20 20 100 20 100 70"
        fill="none" stroke="currentColor" stroke-width="4" />
</svg>

فرمان M نقطهٔ شروع را مشخص می‌کند. فرمان C دو نقطهٔ کنترل و نقطهٔ پایان یک منحنی بزیهٔ درجهٔ سه را تعریف می‌کند. حروف بزرگ، مختصات مطلق را نشان می‌دهند. مرجع فرمان‌های مسیر در MDN ↗

نقاط ابتدا و انتها را در (20,70) و (100,70) نگه دارید. برای پایین‌تر آوردن بالای منحنی، مختصات y دو نقطهٔ کنترل را از ۲۰ به ۳۵ تغییر دهید:

<path d="M 20 70 C 20 35 100 35 100 70"
      fill="none" stroke="currentColor" stroke-width="4" />

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

ویرایش در SVG Path Studio

Import را باز کنید، کد کامل SVG را وارد کنید و As elements (tree) را انتخاب کنید.
در بخش Commands روی فرمان C تمرکز کنید و F2 را بزنید. مقدار 20 35 100 35 100 70 را وارد کنید و Enter بزنید.
با Undo و Redo تغییر هندسه را مقایسه کنید.
Export را باز کنید. برای این سند واردشده، Element tree و Artboard viewBox به‌صورت پیش‌فرض انتخاب شده‌اند. خروجی را بررسی و سپس دانلود کنید.

منحنی ویرایش‌شده و فرمان C آن در رابط عمومی SVG Path Studio — رابط عمومی ویرایشگر، ۶ اکتبر ۲۰۲۶؛ مثال آموزشی خودمان، بدون فایل مشتری.

سند خروجی را هم بررسی کنید

در مثال آزمایش‌شده، خروجی مقدار viewBox="0 0 120 100"، رنگ stroke="currentColor"، مقدار fill="none" و ضخامت خط ۴ را حفظ می‌کند. currentColor رنگ را از سند پیرامون می‌گیرد؛ آیکون را در محل استفادهٔ واقعی هم آزمایش کنید.

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

گزینه‌های Merge و One document per path برای ورود هندسه‌اند. برای این راهنما از حالت سند استفاده کنید. حفظ محتوای فایل هم به‌تنهایی آن را برای درج در وب‌سایت پاک‌سازی امنیتی نمی‌کند؛ روال معمول امنیت دارایی‌های برنامه‌تان را رعایت کنید.

برای تیمتان ابزار تخصصی نیاز دارید؟ از نخستین گردش‌کار کاربردی تا تحویل، نرم‌افزار طراحی و تولید می‌کنم. روش‌های همکاری ↗