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

מסכים סטנדרטיים בסדר ב-1x — הגודל הנומינלי של היצירה. תצוגות High-DPI ו-Retina דוחסות פי שניים בערך יותר פיקסלים באותו שטח, כך שייצוא 2x שומר על אייקונים וגרפיקה חדים במקום מטושטשים. עבור הדפסה, פוסטרים או תצוגות גדולות מאוד, 3x או 4x נותנים לכם מרווח נשימה. מכיוון שהמקור הוא וקטור, ייצוא גדול יותר לא עולה לכם דבר באיכות — העקומות פשוט מחושבות מחדש בספירת הפיקסלים הגבוהה יותר לפני שהן משוטחות. במקרה של ספק, רנדרו גודל נדיב; תמיד תוכלו להקטין PNG גדול, אבל לעולם לא תוכלו לשחזר פרטים בהגדלת אחד קטן.

השקיפות מגיעה יחד עם ההמרה

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

הכל נשאר במכשיר שלכם

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

שאלות נפוצות