SVG به PNG — کِی واقعاً به پیکسل نیاز دارید (و کِی نباید)

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

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

بردار و رستر، به‌سرعت

یک SVG یک تصویر نیست. مجموعه‌ای از دستورهاست — اینجا یک دایره بکش، آنجا این مسیر را، با این رنگ پُرش کن. مرورگر دستورها را دنبال می‌کند و در هر اندازه‌ای که بخواهید تازه رندرشان می‌کند، پس در 16 پیکسل یا 16٬000 پیکسل تیزِ تیز است، و فایل ریز می‌ماند چون فقط ریاضی است.

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

پس تبدیل SVG به PNG یعنی معاملهٔ مقیاس‌پذیری بی‌نهایت با سازگاری جهانی. اینکه این معاملهٔ خوبی هست یا نه، کاملاً بستگی دارد به اینکه تصویر کجا می‌رود.

کِی واقعاً به PNG نیاز دارید

سه مورد که بی درنگ رستری می‌کنم، چون بردار صرفاً کار نمی‌کند:

ایمیل. کلاینت‌های ایمیل SVG را رندر نمی‌کنند — Gmail، Outlook، Apple Mail، اساساً همه‌شان به دلایل امنیتی ردش می‌کنند. یک لوگو در امضای ایمیل یا یک خبرنامه باید قالبی رستری باشد. PNG، چون شفافیت را می‌خواهید.

تصاویر پیش‌نمایش اجتماعی و OG. آن کارت کوچکی که وقتی لینکی را به اشتراک می‌گذارید ظاهر می‌شود — تصویر Open Graph — باید رستری با اندازهٔ ثابت باشد، معمولاً 1200x630. پلتفرم‌ها آنجا SVG را رندر نمی‌کنند. اگر هنر منبع شما بردار است، یک PNG دقیقاً در همان اندازه صادر می‌کنید.

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

در هر سه، عامل تعیین‌کننده یکی است: مقصد از نظر فیزیکی نمی‌تواند بردار بخواند، پس مقیاس‌پذیری بی‌ربط است. قالبی که رندر می‌شود همیشه از قالبی که نمی‌شود بهتر است.

آن یک چیز که باید درست انجامش دهید: رزولوشن

این هم اشتباهی که بیش از همه می‌بینم، و خودم هم اوایل کردم. چون یک PNG در اندازه‌ای که صادرش می‌کنید ثابت است، باید آن را به‌قدر کافی بزرگ صادر کنید — و در حالت ایده‌آل دقیقاً در همان اندازه‌ای که نمایشش می‌دهید.

یک لوگو را به‌صورت PNGِ 100x100 صادر کنید و بعد در 300 پیکسل روی صفحه‌ای پُرتراکم نشانش دهید، و نرم و دندانه‌دار به نظر می‌رسد. پیکسل‌هایی که آن فضا را پُر کنند وجود ندارند. راه‌حل آسان است: در اندازه‌ای که واقعاً به کار می‌برید صادر کنید، یا بزرگ‌تر، به‌ویژه برای نمایشگرهای رتینا و 4K که اغلب 2 برابر اندازهٔ اسمی را می‌خواهید. این تنها مزیت واقعی است که با ترک بردار از دست می‌دهید، پس لحظه‌ای صرف کنید و رزولوشن مقصد را درست بگیرید.

کِی نباید رستری کنید

اگر مقصد می‌تواند SVG بخواند، SVG را نگه دارید. تمام.

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

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

اینکه واقعاً چطور انجامش می‌دهم

وقتی از یک بردار به پیکسل نیاز دارم، از مبدل SVG به PNG اینجا استفاده می‌کنم. SVG را در مرورگر شما رندر می‌کند و PNG را دستتان می‌دهد، پس هیچ چیزی جایی آپلود نمی‌شود — کل ماجرا روی ماشین شما رخ می‌دهد. اندازه‌ای متناسب با مقصدش انتخاب کنید، یک PNG تمیز با شفافیت دست‌نخورده بگیرید.

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