تبدیل PNG به SVG: وکتور کردن لوگو، آیکون و طرح خطی

PNG یک تصویر شطرنجی است: شبکه‌ای ثابت از پیکسل‌ها که هر کدام یک رنگ و در صورت نیاز یک مقدار شفافیت دارند. یک لوگوی 500 × 500 px دقیقاً 250,000 مربع از این‌ها دارد و هیچ چیز دیگری ندارد؛ پس بزرگ کردنش تا اندازهٔ پوستر فقط هر مربع را بزرگ‌تر می‌کند یا فاصلهٔ میان آن‌ها را محو می‌کند. SVG یک تصویر برداری است، یعنی یک فایل متنی که شکل‌هایی مانند <path>، <circle> و <rect> را با مختصات و رنگ پرکننده فهرست می‌کند. مرورگر یا دستگاه برش این شکل‌ها را در هر اندازه‌ای که لازم باشد دوباره می‌کشد؛ برای همین لوگوی برداری هم روی صفحهٔ موبایل و هم روی بنر نمایشگاه واضح می‌ماند.

تبدیل برداری به شطرنجی آسان است، چون رندرکننده فقط شکل‌ها را روی پیکسل‌ها می‌کشد؛ تبدیل SVG به PNG همین کار را در یک ثانیه انجام می‌دهد. مسیر برعکس راه میان‌بر بدون افت ندارد، چون شبکهٔ پیکسل هیچ ردی از شکل‌هایی که آن را ساخته‌اند ندارد. باید چیزی به پیکسل‌ها نگاه کند و حدس بزند هر شکل کجا شروع و کجا تمام می‌شود. این مرحلهٔ حدس، ردیابی یا وکتورسازی نام دارد و هر مبدل PNG به SVG درست‌وحسابی، از Illustrator تا برنامه‌های خط فرمان، در اصل یک ردیاب است.

بعضی مبدل‌ها از بخش سخت کار می‌گذرند. آن‌ها یک فایل SVG معتبر می‌نویسند که فقط یک عنصر <image> دارد و PNG اصلی به‌صورت متن base64 داخلش جاسازی شده است؛ این کار فایل را هم حدود یک‌سوم بزرگ‌تر از PNG می‌کند. نتیجه به‌عنوان SVG باز می‌شود و از بررسی نوع فایل رد می‌شود، اما همچنان تصویر پیکسلی در پوشش برداری است: زوم کنید همان لبه‌های دندانه‌دار را می‌بینید و دستگاه برش مسیری برای دنبال کردن پیدا نمی‌کند. هر SVG را در ویرایشگر متن باز کنید و data:image/png را جست‌وجو کنید؛ اگر این رشته آنجاست، چیزی وکتور نشده است.

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

عکس‌ها نقطهٔ مقابل‌اند. یک پرتره یا عکس محصول هزاران تُن کمی متفاوت دارد که در هم ادغام می‌شوند و فرمت برداری راه کارآمدی برای توصیفشان ندارد. اگر از ردیاب 16 رنگ بخواهید، تصویری پوستری با نوارهای مشخص می‌گیرید؛ اگر 64 رنگ بخواهید، ده‌ها هزار شکل ریز در فایلی بسیار بزرگ‌تر از PNG می‌گیرید که باز هم شبیه عکس نیست. گرادیان‌های نرم، سایه‌ها و درخشش‌ها هم به همین شکل به پشتهٔ نوارهای باریک تبدیل می‌شوند. متن کوچک سومین نقطهٔ ضعف است: در 10–12 px، anti-aliasing هر حرف را با پس‌زمینه‌اش ترکیب می‌کند و ردیاب نمی‌تواند «e» را از «o» تشخیص دهد.

وضوح مهم‌تر از هر تنظیمی است. ردیاب هر منحنی را بر پله‌های پیکسلی کنار لبه برازش می‌کند و هرچه این پله‌ها ریزتر باشند، منحنی دقیق‌تر است. اگر PNG را خودتان از Figma، Canva، Photoshop یا اسلاید خروجی گرفته‌اید، دوباره با دو یا سه برابر اندازهٔ نمایش خروجی بگیرید؛ لوگویی با عرض 1500–2000 px مواد کافی به ردیاب می‌دهد. PNG کوچک را پیش‌تر با بزرگ‌کنندهٔ هوش مصنوعی بزرگ نکنید، مگر نتیجه در زوم 100 % تمیز باشد، چون بافت لبهٔ ساختگی هم دقیقاً مثل لبهٔ واقعی ردیابی می‌شود.

بعد پس‌زمینه را ساده کنید. PNG شفافیت کامل را پشتیبانی می‌کند و پس‌زمینهٔ شفاف ساده‌ترین حالت است: هر پیکسل کاملاً شفاف فضای خالی حساب می‌شود، پس SVG جعبهٔ سفیدی پشت طرح ندارد. اگر PNG پس‌زمینهٔ یکدست دارد، اول دور طرح را فشرده برش بزنید؛ راهنمای ما دربارهٔ برش عکس با نسبت دلخواه کادربندی دقیق را توضیح می‌دهد. پس‌زمینهٔ شلوغ، مثل لوگویی که روی تی‌شرت عکاسی شده، باید پیش از ردیابی حذف شود یا با یک رنگ تخت پوشانده شود.

در پایان، پیش از آنکه ردیاب این کار را بکند، تعداد رنگ را کم کنید. سایه‌ها، درخشش‌ها و لایه‌های گرادیان را در فایل مبدأ پنهان کنید و اگر نسخهٔ برداری به گرادیان نیاز ندارد، آن را با رنگ میانی‌اش جایگزین کنید. رنگ‌های یکدست باقی‌مانده، از جمله رنگ خط دور، را بشمارید و عدد را یادداشت کنید؛ مفیدترین عددی است که در مرحلهٔ بعد وارد می‌کنید. اگر بین JPEG و PNG یک لوگو مردد هستید، PNG را بردارید، چون فشرده‌سازی JPEG دور هر لبه نویز اضافه می‌کند، همان‌طور که در JPG در برابر JPEG در برابر PNG توضیح داده شده است.

هر ردیاب سه پرسش یکسان می‌پرسد، حتی اگر برچسب‌ها فرق کنند. اولی این است که چند رنگ نگه دارد. در مبدل PNG به SVG، حالت رنگ بین رنگی، خاکستری و سیاه‌وسفید انتخاب می‌کند و تعداد رنگ‌ها مشخص می‌کند پیکسل‌ها در چند دسته مرتب شوند، از 2 تا 64. آن را با عددی که یادداشت کردید یکی کنید. اگر زیاد باشد، ردیاب پیکسل‌های لبهٔ anti-aliasشده را هم رنگ جداگانهٔ باریکی می‌کند که دور هر شکل هالهٔ کم‌رنگی پدید می‌آورد؛ اگر کم باشد، دو رنگ برند را در یکی ادغام می‌کند.

پرسش دوم نحوهٔ برخورد با لبه‌هاست. هموارسازی پله‌های برجای‌مانده از پیکسل‌ها را گرد می‌کند و جزئیات تعیین می‌کند لکه‌ای چقدر ریز می‌تواند باشد و هنوز شکل شود. صفحهٔ PNG با جزئیات 70 و هموارسازی 40 شروع می‌شود که در خروجی تمیز گوشه‌های کوچک را نگه می‌دارد. اگر گردوغبار و نقطه‌های سرگردان پیدا شد جزئیات را کم کنید، اگر منحنی‌ها لرزان بود هموارسازی را زیاد کنید، و منحنی‌ها را برای لوگوهای هندسی با لبه‌های راست روی خطوط مستقیم یا برای پیکسل‌آرتی که می‌خواهید بلوکی بماند روی لبه‌های پیکسلی بگذارید.

پرسش سوم فقط برای ردیابی سیاه‌وسفید است: مرز میان جوهر و کاغذ کجا کشیده شود. آستانه از 1 تا 254 است و پیش‌فرضش 128 است. پیکسل‌های تیره‌تر از آستانه سیاه می‌شوند و روشن‌تر‌ها خالی. برای امضایی با خودکار آبی نازک، آن را به 160–180 برسانید تا خطوط کم‌رنگ بمانند؛ برای طراحی با ماژیک پررنگ روی کاغذ کمی خاکستری، آن را به حدود 100 پایین بیاورید تا بافت کاغذ به لکه تبدیل نشود. هر بار یک تنظیم را عوض کنید و مقایسه کنید، چون اثرها روی هم تأثیر می‌گذارند.

به تصویر بندانگشتی بسنده نکنید. SVG را در مرورگر باز کنید و روی تنگ‌ترین منحنی، مثل شکم یک حرف یا نوک یک تیزی، تا 400–800 % زوم کنید. ردیابی خوب کمان‌های نرم و گوشه‌های تیز را در جایی که طرح گوشه دارد نشان می‌دهد؛ ردیابی ضعیف لرزش، فرورفتگی و نوک‌های گرد دارد. سپس فایل را در ویرایشگر برداری مثل Inkscape، Illustrator یا Figma باز کنید و نمای خطوط یا گره‌ها را روشن کنید. یک لوگوی ساده دورنگ معمولاً به چند صد گره نیاز دارد؛ اگر لوگوی شما چند هزار گره دارد، ردیاب نویز را دنبال کرده و ویرایش یا برش مسیرها دردسرساز خواهد بود.

حجم فایل یک محک سریع است. SVG بهینه‌شدهٔ یک لوگوی تخت معمولاً از چند کیلوبایت تا چند ده کیلوبایت است و اغلب از PNG مبدأ کوچک‌تر است. فایل ردیابی‌شده‌ای که چند برابر PNG مبدأ است معمولاً یعنی رنگ‌ها یا جزئیات زیادی انتخاب شده یا عکسی بوده که نباید ردیابی می‌شد. بهینه‌سازی SVG را روشن نگه دارید، چون مختصات را گرد می‌کند و مسیرها را بدون تغییر دیدنی ادغام می‌کند، و در پایان طرح را تا اندازهٔ پوستر بزرگ و تا اندازهٔ favicon کوچک کنید تا مطمئن شوید در هر دو خوانا است.

گزینهٔ رایگان برای دسکتاپ Inkscape است. فایل PNG را وارد کنید، آن را انتخاب کنید و Path > Trace Bitmap (Shift+Alt+B) را باز کنید. حالت‌های تک‌اسکن مانند Brightness cutoff یک مسیر مشکی تولید می‌کنند که برای طرح‌های خطی مناسب است؛ حالت‌های چنداسکن تعداد مشخصی رنگ یا سطح خاکستری را به‌صورت لایه‌های روی هم ترسیم می‌کنند. ردیابی سیاه‌وسفید در Inkscape بر پایهٔ Potrace ساخته شده است، کتابخانه‌ای که Peter Selinger در سال 2001 منتشر کرد. خود Potrace برنامه‌ای خط فرمانی است که به‌جای PNG فرمت‌های PBM، PGM، PPM یا BMP را می‌خواند، فقط تصاویر دورنگ را پردازش می‌کند و خروجی SVG، PDF، EPS یا DXF می‌نویسد؛ به همین دلیل برای اسکریپت‌نویسی روی دسته‌های بزرگ اسکن انتخاب خوبی است.

در Adobe Illustrator، قابلیت Image Trace در نسخهٔ Illustrator CS6 جایگزین Live Trace قدیمی شد. فایل PNG را قرار دهید، Window > Image Trace را باز کنید و از یک پیش‌تنظیم مانند Black and White Logo، 3 Colors یا 16 Colors شروع کنید، سپس Paths، Corners و Noise را در بخش پیشرفته تنظیم کنید. ردیابی تا زمانی که روی Expand کلیک نکنید زنده می‌ماند و بعد از آن به مسیرهای معمولی و قابل ویرایش تبدیل می‌شود. اگر هیچ‌کدام از این دو برنامه را ندارید، مبدل مرورگر همان فرایند کاهش رنگ، یافتن لبه‌ها و برازش منحنی را اجرا می‌کند؛ مبدل عکس به SVG علاوه بر آن JPG، WebP و HEIC را هم می‌پذیرد و می‌تواند به‌جای SVG خروجی EPS، PDF یا DXF بدهد.

در وب، SVG از سال 2001 یک توصیهٔ W3C است و همهٔ مرورگرهای امروزی آن را در تگ <img>، به‌عنوان پس‌زمینهٔ CSS یا درون‌خطی در HTML نمایش می‌دهند؛ در حالت درون‌خطی حتی رنگ‌هایش هنگام قرار گرفتن نشانگر می‌تواند تغییر کند. لوگوی ردیابی‌شده معمولاً چند اندازهٔ PNG برای صفحه‌های رتینا را با یک فایل کوچک جایگزین می‌کند. برای دستگاه‌های برش، SVG فرمتی است که Cricut Design Space و Silhouette Studio انتظار دارند: هر شکل ردیابی‌شده به یک مسیر برش تبدیل می‌شود و ردیابی چندرنگ به‌صورت لایه‌های جداگانه می‌رسد که می‌توانید از وینیل‌های رنگی متفاوت ببرید. دستگاه‌های لیزر و نرم‌افزارهای CNC معمولاً DXF را ترجیح می‌دهند که PNG به DXF با همان تنظیمات ردیابی تولید می‌کند.

چاپخانه‌ها طرح وکتور می‌خواهند، چون ماشین چاپ، دیجیتایزر گلدوزی یا دستگاه برش تابلو به لبه نیاز دارد نه پیکسل، و SVG ردیابی‌شده اغلب برای استیکر، تی‌شرت یا بنر کافی است. با این حال فقط یک تقریب است: منحنی‌ها برازش‌های حدسی‌اند، رنگ‌ها از میانگین پیکسل‌ها به دست آمده‌اند و متن به شکل خطوط بیرونی درمی‌آید. پس پیش از ردیابی لوگوی یک شرکت، از سازندهٔ آن بپرسید. طراح یا آژانس تقریباً همیشه فایل اصلی AI، EPS، PDF یا SVG را با منحنی‌های دقیق، رنگ‌های نام‌دار و فونت‌ها دارد و فرستادنش یک دقیقه طول می‌کشد. ردیابی زمانی درست است که آن فایل اصلی گم شده باشد، لوگو فقط روی سربرگ اسکن‌شده مانده باشد یا طرح، نقاشی خودتان باشد.