تبدیل SVG به PNG

تبدیل وکتورهای SVG مقیاس‌پذیر به تصاویر PNG آماده استفاده

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

وکتور در مقابل شطرنجی، به زبان ساده

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

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

چرا اصلاً یک SVG را شطرنجی می‌کنید؟

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

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

انتخاب وضوح خروجی درست

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

صفحه‌های استاندارد در ۱x — اندازه اسمی آثار هنری — خوب هستند. نمایشگرهای HiDPI و Retina تقریباً دو برابر پیکسل‌ها را در همان فضا جا می‌دهند، بنابراین یک خروجی ۲x آیکون‌ها و گرافیک‌ها را به جای تاری تیز نگه می‌دارد. برای چاپ، پوسترها یا نمایشگرهای خیلی بزرگ، ۳x یا ۴x فضای کافی می‌دهد. از آنجا که منبع یک وکتور است، بزرگ‌تر رندر کردن برای شما هیچ کیفیتی هزینه نمی‌کند — منحنی‌ها فقط با تعداد پیکسل بالاتری قبل از صاف شدن مجدداً محاسبه می‌شوند. در صورت شک، یک اندازه سخاوتمندانه رندر کنید؛ همیشه می‌توانید یک PNG بزرگ را کوچک کنید، اما هرگز نمی‌توانید جزئیات را با بزرگ کردن یک PNG کوچک بازیابی کنید.

شفافیت هم می‌آید

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

همه چیز روی دستگاه شما می‌ماند

این مبدل به صورت کد محلی در مرورگر شما با استفاده از Canvas API اجرا می‌شود. SVG شما خوانده، ترسیم و خروجی گرفته می‌شود بدون اینکه هرگز به سرور ارسال شود، بنابراین هیچ آپلود، صف انتظار و نسخه‌ای از آثار هنری شما در ذخیره‌سازی دیگران وجود ندارد. این برای شما سریع‌تر و برای هر چیزی که ترجیح می‌دهید به شخص ثالث ندهید امن‌تر است، از برندسازی منتشرنشده تا نمودارهای داخلی. وقتی اینجا کارتان تمام شد، بقیه ابزارهای تصویر ما را کاوش کنید — اگر در حال ساخت دارایی Windows یا فاویکون هستید، مبدل PNG به ICO گام طبیعی بعدی است.

سوالات متداول