وکتور در برابر رستر: چگونه PNG را بدون افت کیفیت به SVG تبدیل کنیم

۱. بیت‌مپ‌های رستری در برابر هندسه وکتوری: چرا PNG در مقیاس بزرگ شکست می‌خورد

یک فایل Portable Network Graphics ‏(PNG) قالبی رستری است که بر شبکه‌ای دوبعدی از پیکسل‌های رنگی گسسته بنا شده است. یک آیکون PNG ‏64x64 پیکسلی دقیقاً ۴٬۰۹۶ پیکسل مجزا دارد. وقتی در ابعاد بومی خود روی صفحه رومیزی استاندارد نمایش داده شود، گرافیک تیز به نظر می‌رسد. اما وقتی روی نمایشگرهای گوشی با DPI بالا (Retina، نسبت پیکسل 3x) دیده یا در یک چیدمان وب واکنش‌گرا بزرگ شود، مرورگر باید شبکه رستری را روی پیکسل‌های سخت‌افزاری فیزیکی بکشد.

چون فایل رستری هیچ اطلاعاتی درباره آنچه میان آن پیکسل‌ها قرار دارد ندارد، موتور نمایش از الگوریتم‌های درون‌یابی مانند فیلتر دوخطی یا دومکعبی استفاده می‌کند. این کار آرتیفکت‌های پله‌ای قابل مشاهده، لبه‌های مرزی تار و گذارهای گل‌آلود ایجاد می‌کند. تلاش برای حل این مشکل با خروجی گرفتن فایل‌های PNG غول‌پیکر 4000x4000 تورم شدید صفحه، امتیازهای کند Core Web Vitals و هدر رفتن بسته‌های داده موبایل را به همراه دارد.

در مقابل، گرافیک وکتوری مقیاس‌پذیر (SVG) هنر بصری را با اعلان‌های ریاضی خالص کدگذاری‌شده در XML بازنمایی می‌کند. فایل SVG پیکسل ندارد؛ بلکه اشکال هندسی پایه‌ای مانند مسیرها، چندضلعی‌ها، دایره‌ها و اسپلاین‌های Bézier درجه سوم را تعریف می‌کند (برای مثال <path d="M10,20 C30,40 50,20 70,80" />). چه به‌عنوان فاوآیکون در 16x16 پیکسل رندر شود و چه روی یک بیلبورد دیجیتال بیرونی تا 10,000x10,000 پیکسل گسترش یابد، مرورگر معادلات ریاضی را بی‌درنگ دوباره محاسبه و تیزی جراحی‌وار لبه‌ها را بدون هیچ افت وضوحی ارائه می‌کند.

۲. ردیابی وکتوری و الگوریتم‌های Potrace چگونه کار می‌کنند

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

وکتورساز درون مرورگر ما از خطوط لوله الگوریتمی پیشرفته‌ای الهام‌گرفته از موتور مشهور Potrace استفاده می‌کند. این فرایند در چهار مرحله محاسباتی متمایز انجام می‌شود:

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

دوم، پیکسل‌زدایی مسیر و چندضلعی‌سازی شبکه: الگوریتم خوشه‌های پیکسلی پیوسته را شناسایی و با marching squares یا تشخیص لبه زیرپیکسلی یک چندضلعی فشرده با بسامد بالا دور مرزهای پله‌ای پیکسل‌ها رسم می‌کند.

سوم، کاهش چندضلعی و ساده‌سازی Douglas-Peucker: چندضلعی دندانه‌دار به‌صورت تکراری ساده می‌شود. رئوس هم‌خط زائد با الگوریتم Ramer-Douglas-Peucker حذف می‌شوند و صدها پیکسل پله‌ای با رعایت آستانه‌های تحمل تعیین‌شده توسط کاربر به بردارهای جهتی اصلی تبدیل می‌شوند.

چهارم، برازش منحنی Bézier: در پایان، بخش‌های چندضلعی ساده‌شده با بهینه‌سازی کمترین مربعات به منحنی‌های نرم Bézier درجه سوم ترجمه می‌شوند. موتور نقاط کنترل ایده‌آل (دستگیره‌ها) را محاسبه می‌کند که نیم‌رخ گرافیک اصلی را با کمترین تعداد ممکن گره ریاضی از نزدیک دنبال می‌کنند.

۳. لایه‌بندی چندرنگ: تجزیه بیت‌مپ‌های پیچیده به پالت‌های رنگی

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

خط لوله وکتورسازی ما توزیع رنگ بیت‌مپ را با کوانتیزه‌سازی median-cut یا k-means اسکن می‌کند. تصویر به صفحه‌های رنگی گسسته تفکیک می‌شود و هر رنگ با یک بیت‌ماسک دودویی ایزوله بازنمایی می‌شود. برای مثال، یک نشان ورزشی سه‌رنگ به زیرتصویرهای قرمز، آبی و زرد تقسیم می‌شود.

هر صفحه رنگی به‌طور مستقل به مجموعه‌ای از خطوط دور وکتوری نرم Bézier ردیابی می‌شود. سپس مسیرهای حاصل دوباره در یک سند SVG چندلایه روی هم چیده می‌شوند، رنگ‌های پرشدگی HEX مربوط به خود را می‌گیرند و درون برچسب‌های گروه تمیز (<g fill="#FF0000">) قرار می‌گیرند. این لایه‌بندی چندسطحی مرزهای رنگی واضح را بدون هم‌پوشانی زشت رنگ‌ها یا نشت دندانه‌دار رنگ حفظ می‌کند.

۴. پیش‌پردازش بیت‌مپ‌ها برای ردیابی وکتوری بی‌نقص

کیفیت هر وکتورسازی الگوریتمی به‌شدت به کیفیت بیت‌مپ ورودی بستگی دارد. گرافیک‌های رستری آلوده به آرتیفکت‌های فشرده‌سازی JPEG، گرادیان‌های مبهم یا پس‌زمینه‌های کم‌کنتراست اغلب مسیرهای وکتوری نامنظمی با هزاران نقطه کنترل زائد تولید می‌کنند.

برای آماده‌سازی PNG خود برای وکتورسازی بهینه، این رهنمودها را دنبال کنید:

1. پس‌زمینه را جدا کنید: اگر گرافیک شما پس‌زمینه شلوغ یا غیرشفاف دارد، از ابزارهای شفاف‌سازی یا حذف پس‌زمینه ما استفاده کنید. جدا کردن آیکون پیش‌زمینه تضمین می‌کند الگوریتم تشخیص لبه فقط هندسه مورد نظر را ردیابی کند.

2. کنتراست را افزایش و dithering را حذف کنید: لوگوهای خاکستری با ضدپله‌ای ظریف در امتداد مرزها می‌توانند چند حلقه وکتوری هم‌مرکز ایجاد کنند. آستانه‌گذاری گرافیک به سیاه‌وسفید خالص یا دوتونی پرکنتراست مسیرهای وکتوری تمیز و تک‌مرزی تولید می‌کند.

3. حاشیه‌های غیرضروری را برش دهید: فضای سفید اضافی را با ابزار برش تصویر ما برش دهید تا طرح در مرکز قرار گیرد و فضای مختصات viewBox در SVG شهودی شود.

۵. گام‌به‌گام: تبدیل PNG به SVG درون مرورگر بدون آپلود به سرور

گردش‌کارهای سنتی وکتورسازی طراحان گرافیک را وادار می‌کردند نرم‌افزارهای اشتراکی گران‌قیمتی مانند Adobe Illustrator بخرند یا طرح‌های اختصاصی برند را در وب‌سایت‌های مشکوک تبدیل آنلاین آپلود کنند که فایل‌ها را روی سرورهای ابری دوردست ثبت می‌کنند. ابزارهای بومی مرورگر مبدل SVG ما کاملاً درون سندباکس محلی مرورگر شما با WebAssembly و Web Workerها اجرا می‌شوند.

گام ۱: به ابزار PNG به SVG بروید و فایل PNG، ‏WebP یا JPEG خود را روی بوم رها کنید. فایل بدون تماس با سرور خارجی مستقیماً در RAM مرورگر بارگذاری می‌شود.

گام ۲: پارامترهای ردیابی را تنظیم کنید. می‌توانید آستانه رنگ، نرمی منحنی و سطح جزئیات را به‌دقت تنظیم کنید تا توازن ایده‌آلی میان وفاداری هندسی و حداقل حجم فایل SVG بیابید.

گام ۳: وکتور تولیدشده را بی‌درنگ پیش‌نمایش کنید. روی زوایای تیز و کمان‌های منحنی بزرگ‌نمایی کنید تا مطمئن شوید نقاط کنترل Bézier دقیقاً با مشخصات برند شما مطابقت دارند.

گام ۴: فایل SVG بی‌نقص خود را دانلود کنید. می‌توانید SVG حاصل را مستقیماً در Figma، ‏Illustrator، ‏Inkscape وارد یا به‌صورت درون‌خطی در کد HTML/CSS خود جاسازی کنید.

۶. بهینه‌سازی کد SVG برای کارایی وب و سبک‌دهی CSS

پس از ساخت فایل SVG، بهترین شیوه‌های مهندسی فرانت‌اند مدرن توصیه می‌کنند پیش از انتشار در وب‌سایت‌های عملیاتی، کد XML زیرین را بهینه کنید. یک SVG بهینه‌نشده ممکن است شامل فضاهای نام زائد، برچسب‌های فراداده ویرایشگر و دقت مختصات ممیز شناور تا هشت رقم اعشار باشد (برای مثال 'd="M 10.3847291 45.9281726"').

با گرد کردن مقادیر مختصات به یک یا دو رقم اعشار، می‌توانید حجم فایل SVG را بدون هیچ تغییر بصری محسوسی ۳۰٪ تا ۵۰٪ کاهش دهید. افزون بر این، حذف ویژگی‌های ثابت 'width' و 'height' از عنصر ریشه <svg> و جایگزینی آن‌ها با یک ویژگی واکنش‌گرای 'viewBox="0 0 100 100"' به گرافیک شما امکان می‌دهد به‌روانی با ظرف‌های CSS والد سازگار شود.

یک مزیت استثنایی کد وکتوری SVG تمیز، دستکاری پویای CSS است. با پیکربندی عناصر مسیر SVG با 'fill: currentColor;'، وکتور به‌طور خودکار رنگ فونت ظرف والد خود را به ارث می‌برد و به طراحان امکان می‌دهد گذارهای تعاملی hover و سازگاری با حالت تاریک را بی‌زحمت بسازند.

۷. چه زمانی از SVG و چه زمانی از بیت‌مپ‌های WebP/AVIF استفاده کنیم

اگرچه گرافیک وکتوری برای هنر هندسی بی‌رقیب است، جایگزینی همگانی برای همه تصاویر وب نیست. درک اینکه چه زمانی وکتورسازی کنیم و چه زمانی بیت‌مپ‌های رستری مدرن را نگه داریم، برای کارایی وب حیاتی است:

نامزدهای ایده‌آل برای SVG: لوگوهای برند، آیکون‌نگاری رابط کاربری، پیکتوگرام‌ها، امضاهای تایپوگرافیک، نقشه‌های فنی CAD، نمودارهای مدار، الگوهای هندسی و نقشه‌های برش لیزری/CNC. در این کاربردها، فایل‌های SVG معمولاً بسیار کوچک‌اند (۲ تا ۱۵ کیلوبایت) و وضوح بی‌نهایت ارائه می‌دهند.

نامزدهای نامناسب برای وکتورسازی: پرتره‌های عکاسی تُن پیوسته، مناظر پیچیده، رندرهای سه‌بعدی با نورپردازی پخش‌شده و اسکرین‌شات‌ها. تلاش برای وکتورسازی یک عکس، موتور ردیابی را وادار می‌کند صدها هزار چندضلعی رنگی میکروسکوپی بسازد. SVG حاصل اغلب از ۱۵ مگابایت فراتر می‌رود، زبانه‌های مرورگر را از کار می‌اندازد و کند رندر می‌شود. برای عکس‌ها، PNGهای خود را به‌جای آن با ابزارهای تبدیل PNG به WebP یا تبدیل JPG به AVIF ما به قالب‌های مدرن نسل جدید تبدیل کنید.