אייקון SVG של 433 בתים, שכולו הוראות ציור, יצא PNG של 128×128 ו־4.1KB בשבריר שנייה, בגודל ברירת המחדל (פי 2). SVG מתאר צורות ולא פיקסלים, ולכן בוחרים כמה פיקסלים יהיו ב־PNG, והוא נשאר חד בכל אחד מהגדלים. ההגדרה “גודל” מופיעה מתחת לאזור הגרירה ברגע שמוסיפים SVG, ושינוי שלה ממיר מחדש את מה שכבר הוספתם.
התג לדוגמה של הדף, עם שתי שורות טקסט בעברית, שוקל 782 בתים ויצא PNG של 640×320 ו־28.6KB, עם הטקסט מימין לשמאל ובתוך התג.
כמה פיקסלים בכל הגדרה
האייקון מוגדר בגודל 64×64, והתג לדוגמה של הדף בגודל 320×160:
| גודל | האייקון (64×64) | התג (320×160) | מתאים ל־ |
|---|---|---|---|
| פי 1 | 64×64 | 320×160 | מסכים ישנים, חתימת מייל |
| פי 2 (ברירת מחדל) | 128×128 | 640×320 | טלפונים ומחשבים ניידים עם מסך חד |
| פי 4 | 256×256 | 1280×640 | הדפסה, מצגות, הגדלה |
אם לא בטוחים, נשארים בפי 2: תמונה עם פי 2 פיקסלים מהגודל שבו היא מוצגת נראית חדה בטלפון, והקובץ עדיין קטן. עוברים לפי 4 כשה־PNG הולך להדפסה או להגדלה.
מאיפה מגיע הגודל ההתחלתי
הכלי קורא את width ו־height של ה־SVG. כשהם חסרים, או כתובים ביחידות שהן לא פיקסלים, כמו 10cm או 100%, הוא משתמש ב־viewBox. SVG בלי אף אחד מהם מקבל 300×150, כמו שגם דפדפנים עושים. לגודל שההגדרות לא מגיעות אליו, ממירים בפי 4 ואחר כך משתמשים בשינוי גודל תמונה.
הדפדפן הוא שמצייר
ה־PNG נראה בדיוק כמו שה־SVG נראה אצלכם בדפדפן, לטוב ולרע. עברית מסודרת מימין לשמאל כמו בדף אינטרנט, והגופן מגיע מהמכשיר. כל מה שה־SVG מושך מקבצים או מאתרים אחרים נחסם מטעמי אבטחה, ואם אי אפשר לצייר את הקובץ בכלל, תופיע ההודעה: “לא הצלחנו לצייר את קובץ ה־SVG. ייתכן שהוא לא תקין, או שהוא נשען על קבצים שהדפדפן חוסם מטעמי אבטחה.” שמות קבצים בעברית נשמרים, ורק הסיומת מתחלפת.
מכינים אייקון לאתר? מחולל Favicon מקבל SVG ומוציא את כל הגדלים בבת אחת.