چگونه فایل‌های SVG خود را در Figma، Canva یا WordPress وارد و ویرایش کنیم؟

شما SVG را دارید. حالا چه؟

اکثر مبدل‌ها در دکمه دانلود متوقف می‌شوند. اما اگر فایل در پوشه دانلودها بماند هیچ کاربردی ندارد. یک طراح آن را در Figma باز می‌کند تا هویت بصری را اعمال کند. یک مدیر شبکه اجتماعی آن را در Canva قرار می‌دهد تا یک پست طراحی کند. یک توسعه‌دهنده وب آن را در WordPress برای لوگوی هدر قرار می‌دهد. این مرحله بعدی است که ثابت می‌کند PixelToPath در یک جریان کاری واقعی جا می‌گیرد، نه در یک دمو.

یک SVG در PixelToPath یک تصویر ثابت نیست. این مجموعه‌ای از مسیرهاست: هر شکل پر کردن و احتمالاً یک خط دور دارد. تغییر رنگ آبی لوگو به شرابی، جدا کردن آیکون، بزرگ کردن برای استوری 1080x1920: همه اینها در ابزاری که از قبل استفاده می‌کنید انجام می‌شود، بدون نیاز به بازگشت به Illustrator.

چرا Figma، Canva و WordPress این فرمت را دوست دارند

فایل‌های PNG و JPG پس از وارد شدن، بیت‌مپ هستند. تغییر رنگ یک لوگوی PNG در Figma به معنای قرار دادن یک لایه روی آن است، نه تغییر رنگ مسیر. Canva هیچ پالت رنگی ارائه نمی‌دهد. WordPress یک فایل سنگین و تار در صفحه نمایش‌های Retina ارائه می‌دهد. فرمت SVG هر سه مشکل را به یکباره حل می‌کند.

در عمل، یک SVG ساخته شده توسط PixelToPath به شما می‌دهد:

• مسیرهای قابل ویرایش: یک رنگ برای هر شکل، قابل تغییر در Figma (Fill) یا Canva (پالت‌های رنگ)
• یک فایل سبک، بسیار کمتر از حد ۳ مگابایتی Canva، و سریع‌تر برای بارگذاری در یک سایت WordPress نسبت به یک PNG @2x
• وضوح یکسان در فاوآیکون، بنر لینکدین یا رول‌آپ: تنها یک فایل
• یک محصول نهایی که می‌توانید برای مشتری ارسال کنید: او آن را در ابزاری که دارد باز می‌کند، نه در Creative Cloud

Figma: وارد کردن SVG و تغییر رنگ‌ها

Figma یک SVG را به عنوان یک گروه از بردارها وارد می‌کند، نه به عنوان یک عکس. تمام فایده در همین است: هر شکل یک لایه باقی می‌ماند که می‌توانید آن را تغییر رنگ دهید، جابجا کنید یا پنهان کنید.

1. فایل .svg را از PixelToPath دانلود کرده و فایل Figma خود را باز کنید.
2. فایل را از مرورگر فایل مستقیم روی بوم بکشید. روش دیگر: فایل → وارد کردن (File → Place image/video) یا Ctrl+Shift+K (Cmd+Shift+K در مک) برای قرار دادن SVG.
3. لایه به صورت یک گروه ظاهر می‌شود. دوبار کلیک کنید تا وارد آن شوید، یا کلیک راست → خارج کردن از گروه (Shift+Ctrl+G / Shift+Cmd+G) اگر می‌خواهید شکل‌ها را یکی‌یکی مدیریت کنید.
4. یک مسیر را انتخاب کنید. در پنل راست، بخش پر کردن (Fill)، روی پالت رنگ کلیک کنید: هگز، سواچ، قطره‌چکان. کل شکل تغییر می‌کند و لبه‌ها واضح می‌مانند.
5. برای یک لوگوی تک رنگ، تمام شکل‌های گروه را انتخاب کرده و تنها یک رنگ اعمال کنید. سپس در صورت نیاز از بخش Export به SVG، PNG یا PDF خروجی بگیرید.

اگر Figma به جای لایه‌های برداری یک تصویر تخت نمایش می‌دهد، فایل حاوی یک بیت‌مپ بوده است (یک PNG پنهان شده در SVG). این اتفاق برای خروجی‌های PixelToPath با تنظیمات سیاه و سفید یا پوستر نمی‌افتد. فایل اصلی را با یکی از این دو حالت (نه عکس) دوباره تبدیل کنید.

Canva: قرار دادن SVG و تغییر رنگ

Canva فایل‌های SVG را در هر دو نسخه رایگان و Pro می‌پذیرد. تغییر رنگ زمانی کار می‌کند که فایل ساده باشد: رنگ‌های تخت، نقاط کم، بدون گرادیانت. این دقیقاً همان چیزی است که PixelToPath با تنظیمات پوستر یا سیاه و سفید تولید می‌کند.

1. در Canva، یک طراحی را باز کنید. پنل چپ → آپلودها (Uploads) → آپلود فایل‌ها. فایل .svg خود را انتخاب کنید (کمتر از ۳ مگابایت؛ خروجی PixelToPath بسیار کمتر است).
2. وقتی فایل در بخش آپلودهای شما قرار گرفت، آن را روی صفحه بکشید. اندازه آن را با دستگیره‌ها تغییر دهید: بردار واضح می‌ماند، از جمله در قالب استوری یا A4.
3. روی SVG کلیک کنید. در نوار ابزار، پالت‌های رنگ ظاهر می‌شوند، یکی برای هر رنگ در فایل. روی یک پالت کلیک کنید، رنگ جدید را انتخاب کنید: Canva آن را روی تمام شکل‌های آن رنگ اعمال می‌کند.
4. اگر پالتی ظاهر نشد، SVG خیلی پیچیده است (گرادیانت‌ها، رنگ‌های زیاد، مسیرهای شبیه عکس). به PixelToPath برگردید، به تنظیمات پوستر یا سیاه و سفید تغییر دهید، دوباره خروجی بگیرید و وارد کنید.

Canva پیشنهاد می‌کند از پروفایل SVG 1.1 استفاده کنید، شکل‌های همرنگ در یک گروه باشند و هیچ بافتی نداشته باشد. تنظیمات لوگوی PixelToPath از قبل این محدودیت‌ها را رعایت می‌کند. نیازی به استفاده از Illustrator برای «آماده‌سازی» فایل نیست.

WordPress: اجازه آپلود SVG بدون ایجاد نقص امنیتی

WordPress به طور پیش‌فرض SVGها را رد می‌کند و این بی‌دلیل نیست. SVG یک XML است: می‌تواند شامل جاوا اسکریپت، نهادهای خارجی و بار مخرب XSS باشد. یک بازدیدکننده یا حساب کاربری هک شده که یک SVG مخرب آپلود کند می‌تواند کدی را در بخش ادمین اجرا کند. بنابراین باید فرمت را مجاز کنید و فایل را پاک‌سازی کنید.

فقط image/svg+xml را در functions.php اضافه نکنید. بدون پاک‌سازی فایل، یک نقص باز می‌کنید. روش امن: یک افزونه پشتیبانی شده که اسکریپت‌ها، رویدادهای onload و نهادهای XML را پاک می‌کند. Safe SVG (از 10up)، با بیش از یک میلیون نصب فعال.

1. در ادمین WordPress: افزونه‌ها → افزودن. Safe SVG (ناشر: 10up) را جستجو کنید. نصب و فعال کنید.
2. به تنظیمات → رسانه (Media) بروید. آپلود SVG را به مدیران (یا نقش‌های قابل اعتماد) محدود کنید. اگر سایت چندین نویسنده دارد این فرمت را برای تمام حساب‌ها باز نکنید.
3. رسانه → افزودن. فایل .svg از PixelToPath را قرار دهید. افزونه هنگام وارد کردن آن را پاک‌سازی می‌کند و پیش‌نمایشی را در کتابخانه نمایش می‌دهد، چیزی که WordPress به طور بومی انجام نمی‌دهد.
4. در یک نوشته یا برگه، یک بلوک تصویر درج کنید و SVG را انتخاب کنید. برای لوگوی هدر، از سفارشی‌سازی (Customize) / هویت سایت یا یک بلوک تصویر در قالب پوسته (ویرایشگر سایت) استفاده کنید.
5. روش توسعه‌دهنده: از کتابخانه رسانه استفاده نکنید. فایل را در پوسته (assets/logo.svg) قرار دهید و در قالب به آن ارجاع دهید، یا آن را به صورت inline استفاده کنید تا با CSS استایل‌دهی کنید. بدون آپلود، بدون سطح حمله کتابخانه رسانه.

Safe SVG همچنین می‌تواند محدود کند که چه کسی حق آپلود دارد. افزونه را بروز نگه دارید: پاک‌سازی فایل کنترل واقعی است، نه فقط تیک زدن «اجازه SVG».

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

ویرایشگر همان چیزی را که به آن می‌دهید می‌پذیرد. یک تنظیمات اشتباه در زمان وارد کردن هزینه دارد: شکل‌های زیاد، رنگ‌های غیرقابل تغییر، فایل رد شده.

• لوگو، آیکون، تایپوگرافی: سیاه و سفید یا پوستر. اینها رنگ‌های تخت هستند، Figma و Canva آنها را با یک کلیک تغییر رنگ می‌دهند.
• اگر قصد دارید رنگ‌ها را تغییر دهید از حالت عکس (Photo) خودداری کنید. این حالت شکل‌های کوچک زیادی ایجاد می‌کند؛ Canva اغلب هیچ پالت مفیدی نشان نمی‌دهد.
• قبل از تبدیل، تصویر اصلی را برش دهید: پس‌زمینه کمتر، نقاط کمتر، یک SVG خواناتر در لایه‌های Figma.
• یک نوع برای هر استفاده: یک SVG تک رنگ برای Figma (هویت بصری)، یک SVG رنگی برای Canva (پست)، همان فایل پاک‌سازی شده برای WordPress (هدر).

جایی که این جریان کار کارهای روزمره را تغییر می‌دهد

هنگامی که SVG در ابزار است، تبدیل مجدد برای هر نسخه متوقف می‌شود:

• هویت بصری در Figma: PNG مشتری به یک کامپوننت تبدیل می‌شود که بدون طراحی مجدد آن را تغییر رنگ می‌دهید (اصلی، معکوس، تک‌رنگ)
• پست‌های Canva: یک SVG تنها، شش رنگ کمپین، استوری‌ها و اسلایدهای واضح
• لوگوی WordPress: یک فایل در هدر، واضح در موبایل و Retina، سبک‌تر از PNG قدیمی
• تحویل به عنوان فریلنسر: شما SVG به علاوه راهنمای استفاده از Figma / Canva را تحویل می‌دهید. مشتری دیگر مسدود نیست
• آیکون‌های رابط کاربری: آنها را به صورت دسته‌ای در Figma وارد کنید، آنها را در یک شبکه ۲۴ پیکسلی تراز کنید، مجموعه را خروجی بگیرید

PNG را برای عکس‌ها نگه دارید. برای هر چیزی که باید تغییر رنگ دهد یا واضح بماند، ترکیب PixelToPath + Figma / Canva / WordPress کافی است.