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 פיקסלים על מסך בצפיפות גבוהה, והוא ייראה רך ומשונן. הפיקסלים שימלאו את המקום הזה לא קיימים. הפתרון קל: תייצאו בגודל שבו באמת תשתמשו, או גדול יותר, במיוחד לתצוגות Retina ו-4K שבהן לרוב אתם רוצים פי 2 מהגודל הנקוב. זה היתרון האמיתי האחד שאתם מוותרים עליו בעזיבת וקטור, אז תשקיעו רגע בבחירת רזולוציית היעד נכון.

מתי אסור לרסטר

אם היעד יכול לקרוא SVG, תשאירו את ה-SVG. נקודה.

באתר שלכם עצמכם, אייקון או לוגו צריכים להישאר וקטור. הוא יהיה חד בכל מסך בכל רמת זום, הוא יהיה קטן יותר מ-PNG המקביל, ולעולם לא תצטרכו לייצא מחדש גרסה גדולה יותר כשתצוגה בצפיפות גבוהה יותר תצא. לרסטר אותו שם זה חיסרון טהור — הייתם זורקים את התכונה הכי טובה של הפורמט כדי להשיג תאימות שכבר יש לכם.

ואל תרסטרו את קובץ המקור. ה-SVG הוא מקור האמת; הוא יכול לייצר PNG בכל גודל, בכל זמן. PNG לא יכול לחזור בכיוון השני — אי אפשר לשחזר מסלולי וקטור נקיים מרשת של פיקסלים. אז תשמרו את ה-SVG, ותתייחסו לכל PNG כייצוא חד-פעמי למקום ספציפי אחד. אותו עיקרון כמו כל השאר: תמירו את העותק שאתם שולחים, שמרו את המקור שאתם עורכים.

איך אני עושה את זה בפועל

כשאני צריך פיקסלים מווקטור, אני משתמש בממיר ה-SVG-ל-PNG כאן. הוא מרנדר את ה-SVG בדפדפן שלכם ומוסר לכם את ה-PNG, אז שום דבר לא נטען לשום מקום — הכול קורה על המכונה שלכם. תבחרו גודל שמתאים ליעד, תקבלו PNG נקי עם שקיפות שלמה.

אבל המיומנות האמיתית היא לא ההמרה. זו השאלה שאתם שואלים קודם: האם המקום הזה קורא וקטור? אם כן, תשאירו את ה-SVG בשקט ותיהנו מהאפשרות החדה והקטנה ביותר שיש. אם לא — מייל, כרטיס OG, איזו אפליקציה ישנה עקשנית — אז תרסטרו, בגודל הנכון, ותשמרו את ה-SVG שלכם בטוח לפעם הבאה. תעשו את ההחלטה הזו נכון ולעולם לא יהיה לכם ריבוע ריק במקום שבו הלוגו אמור להיות.