ממיר SVG ל־PNG

מה זה קובץ SVG, ולמה ההמרה לפיקסלים היא כיוון אחד בלבד

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

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

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

מאיפה הגיע הגודל שבשדות

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

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

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

בחירת הגודל שאתם צריכים — והציור שאינו מצהיר על אף אחד

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

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

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

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

באיזה פורמט לשמור את הציור אחרי ההמרה לפיקסלים

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

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

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

מה המרה לפיקסלים אינה יכולה לקחת אתה

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

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

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

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

מה כל שורה מספרת לכם על הציור שלכם, ומתי היא מסרבת

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

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

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

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

למה הציור שלכם לעולם אינו עוזב את הלשונית הזאת

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

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

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