לוגו מגיע בשני קבצים: logo.svg ב-3 KB ו logo.png ב-40 KB שניהם נראים אותו דבר בכרטיסיית דפדפן לפוצץ אותם כדי למלא מסך מקרן ורק אחד נשאר חד נסה להעלות אותם לפרופיל חברתי ורק השני מתקבל ואם כל מה שיש לך זה ה-PNG, הכלים שמבטיחים ל-" המר PNG ל-SVG" החזר משהו שהוא מבחינה טכנית SVG אבל לא הקובץ שהמעצב שלך היה מכין.
מדריך זה מסביר את ההבדל בין שני הפורמטים במונחים של מה כל קובץ מאחסן, מתי להשתמש באיזה, מה קורה כאשר אתה מעבד SVG לפיקסלים, ומה מעקב אחר PNG לצורות וקטוריות יכול ולא יכול לשחזר. זה כולל מספרים ממשיים ממנוע המעקב מאחורי ממירי Toolz, ויושב מתחת ל רכזת כלי תמונה.
TL;DR: SVG הוא פורמט וקטור: הוא מאחסן צורות כגיאומטריה, כך שהוא משתנה לכל גודל ללא טשטוש והוא אידיאלי עבור לוגואים, אייקונים ודיאגרמות. PNG הוא פורמט רסטר: הוא מאחסן רשת קבועה של פיקסלים, ללא הפסדים, המתאימה לצילומי מסך, יצירות אמנות מפורטות ולכל מקום שמקבל רק תמונות. מעבר מ-SVG ל-PNG מדויק בגודל שתבחר; השתמש ב ממיר SVG ל-PNG ב 2x או 4x עבור פלט חד הולך מ PNG ל SVG הוא מעקב, אשר בונה מחדש צורות מפיקסלים ואינו לשחזר עיצוב מקורי זה עובד עבור לוגו שטוח אמנות קו, ונכשל על תמונות כל ההמרות כאן לרוץ צד הלקוח, שום דבר לא הועלה, חינם, אין הרשמה.
מה ההבדל בין SVG ו PNG?
SVG מתאר תמונה כהוראות לציור שלה, בעוד PNG מאחסן את הציור המוגמר כפיקסלים. כל השאר בשני הפורמטים נובע מההבדל האחד הזה.
קובץ SVG, המוגדר על ידי ה-W3C ב גרפיקה וקטורית ניתנת להרחבה (SVG) 2, הוא טקסט XML. הוא מפרט נתיבים, עיגולים, מלבנים, שיפועים וטקסט, כל אחד עם קואורדינטות וצבעים שום דבר בו לא אומר כמה פיקסלים יש לתמונה. כאשר דפדפן מציג אותו, המעבד מגלה אילו פיקסלים מכסה כל צורה בגודל על המסך, וזו הסיבה שאותו קובץ חד בטלפון ובצג 5K.
קובץ PNG, שצוין על ידי ה-W3C כ גרפיקת רשת ניידת ופורסם כ-ISO/IEC 15948, היא רשת של פיקסלים צבעוניים דחוסים עם DEFLATE הדחיסה היא ללא הפסדים, כך שהפיקסלים שאתה מפענח הם בדיוק הפיקסלים שנשמרו PNG יכול לשאת ערוץ אלפא מלא ועד 16 סיביות לערוץ מה שהוא לא יכול לעשות זה להוסיף פרטים: 512 x 512 PNG המוצג ב-2048 x 2048 כל פיקסל נמתח על פני בלוק של 4 x 4, והקצוות הופכים רכים או חסומים.
הנה אותו תג פשוט כמו מקור SVG:
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="80" viewBox="0 0 240 80">
<rect x="4" y="4" width="232" height="72" rx="16" fill="#1d4ed8"/>
<text x="120" y="52" font-family="Arial, sans-serif" font-size="32"
text-anchor="middle" fill="#ffffff">TOOLZ</text>
</svg>
ארבע שורות הסימון הללו הן התמונה כולה, והן נשארות ארבע שורות בין אם אתה מציג אותה ברוחב של 240 פיקסלים או 24,000 גרסת ה-PNG של אותו תג ב-240 x 80 מכילה 19,200 פיקסלים, וב-960 x 320 היא מכילה 307,200.
SVG לעומת PNG: באיזה פורמט עלי להשתמש?
השתמש ב-SVG עבור כל דבר העשוי מצורות שחייבות להתאים לקנה מידה, וב-PNG עבור כל דבר העשוי מפיקסלים או בכיוון למקום כלשהו שמקבל רק תמונות רסטר. טבלה זו מגדירה אותן זו לצד זו:
| נכס | SVG | PNG |
|---|---|---|
| דגם תמונה | וקטור: נתיבים, צורות, טקסט | רסטר: רשת פיקסלים קבועה |
| סטנדרטי | W3C SVG 2 | W3C PNG, ISO/IEC 15948 |
| קנה מידה | חד בכל גודל | מטשטשים או בלוקים כשהם מוגדלים |
| דחיסה | טֶקסט; gzip בשרת | דפלפט ללא הפסדים |
| שקיפות Transparency | כן | כן, אלפא מלא |
| גודל קובץ עבור לוגו | בדרך כלל כמה KB | גדל עם ממדי פיקסלים |
| גודל קובץ לתמונה | לא מעשי | גדול אבל סביר |
| ניתן לעריכה לאחר ייצוא | כן, צורות וצבעים בעורך וקטור | רק פיקסל אחר פיקסל |
| טקסט בפנים | יכול להישאר לבחירה וחיפוש | אפוי לפיקסלים |
| יכול להכיל סקריפטים | כן, שזה חשש ביטחוני | לא |
| מקובל על ידי העלאות חברתיות, אפליקציות משרדיות, דואר אלקטרוני | לעתים קרובות לא | כמעט תמיד |
| הטוב ביותר עבור | לוגו, אייקונים, דיאגרמות, תרשימים, איורי ממשק משתמש | צילומי מסך, אמנות מפורטת, נכסים בגודל קבוע |
כלל מעשי: שמור את ה-SVG כמאסטר שלך לכל דבר וקטור, וייצא ממנו PNG בגדלים שכל יעד צריך. לעולם אל תשמור רק את ה-PNG של לוגו, כי הפיכת פיקסלים בחזרה לצורות היא אובדן באופן שהופך צורות לפיקסלים לא.
עבור תצלומים, אף פורמט אינו הבחירה הנכונה למשלוח. תמונה ב-PNG היא גדולה, ותמונה ב-SVG היא או PNG עטוף ב-XML או קירוב עוקב. JPEG, WebP או AVIF בנויים לעבודה זו; מה זה WebP ומתי להשתמש בו מכסה את צד הצילום.
למה כל כך הרבה מקומות מסרבים להעלאות SVG?
כי SVG הוא מסמך שיכול להכיל תוכן פעיל, לא רק תמונה מפרט SVG מאפשר <script> אלמנטים, תכונות מטפל באירועים כגון onload, קישורים למשאבים חיצוניים ו-HTML מוטבע דרך <foreignObject>. אתר שמקבל העלאת SVG ומאוחר יותר משרת אותה מהדומיין שלו עלול בסופו של דבר להריץ מישהו אחר' s JavaScript עבור כל מבקר שפותח את הקובץ ישירות.
חיטוי SVG בבטחה אפשרי אבל בצורה מטופשת, כל כך הרבה פלטפורמות לוקחות את המסלול הפשוט יותר: תמונות פרופיל, רשימות שוק, רשתות מודעות, ספריות מדיה רבות של CMS ורוב לקוחות הדואל מקבלים פורמטים של רסטר בלבד. גם למסמכי Office ולאפליקציות צ'אט יש תמיכה חלקית יותר.
זו הסיבה הנפוצה ביותר להמיר SVG ל-PNG. דפדפן המצייר SVG כתמונה הוא המקרה הבטוח, שכן SVG נטען דרך <img> אלמנט או על קנבס אסור להריץ סקריפטים או להביא קבצים חיצוניים ממירי Toolz מציגים SVGs בדיוק כך, מה שהופך את זה בטוח להמיר קובץ ממקור לא ידוע.
איך ממירים SVG ל PNG מבלי לאבד איכות?
עיבוד ה-SVG בגודל הפיקסל שאתה צריך, או יותר, ולעולם אל תגדיל את ה-PNG לאחר מכן. מכיוון שה-SVG הוא גיאומטריה, ציור שלו ב-4x מדויק כמו ציור שלו ב-1x; כל אובדן האיכות בכיוון הזה נובע מבחירת פלט קטן מדי.
ה ממיר SVG ל-PNG עובד את הגודל בסדר הזה:
- אם שורש SVG קובע
widthוheight, אלה משמשים, עם יחידות כגוןmm,pt,inוcmמומר לפיקסלים CSS. - אם יש לו רק א
viewBox, נעשה שימוש ברוחב ובגובה של viewBox. - אם אין לו אף אחד מהם, הוא מצויר ב-1024 x 1024.
- אם הצד הארוך ביותר עדיין מתחת ל-512 פיקסלים, הציור מוגדל בפרופורציה עד שהצד הזה הוא 512, מכיוון שסמל בגודל 24 על 24 שצויר בגודלו המוצהר קטן מכדי להשתמש בו.
- לאחר מכן, אפשרות סולם SVG מכפילה את התוצאה ב-1, 2 או 4.
קח את התג למעלה, שמצהיר width="240" height="80". הצד הארוך ביותר הוא מתחת ל-512, אז הוא מוגדל ל-512 x 171. ב-2x ה-PNG יוצא ב-1024x342, כשהפינות הלא צבועות נשארות שקופות. ההערה מתחת לתוצאה מציינת את הגודל ומהיכן הוא הגיע, כך שאין ניחוש.
בחר 2x עבור מסכים, שבו רוב הטלפונים והמחשבים הניידים משתמשים בשני פיקסלים או יותר של המכשיר לכל פיקסל CSS, ו-4x עבור הדפסה או צגים גדולים. תקרת הפלט היא 100 מגה פיקסל או 16,384 פיקסלים בצד, וקבצי SVG מעל 50 MB מסורבים; קנה מידה קטן יותר מתקן את המקרה הראשון.
שני סוגים של תוכן אינם שורדים עיבוד. תמונות וגופני אינטרנט המקושרים באמצעות כתובת URL נותרים בחוץ, מכיוון ש-SVG שצויר כתמונה אינו יכול להביא שום דבר מחוץ לקובץ, כך שהטקסט נופל בחזרה לגופן מערכת; המרת טקסט לקווי מתאר בעורך הווקטור שלך לפני הייצוא מונעת זאת. ו-SVG מונפש הופך למסגרת סטילס אחת.
האם עלי להמיר SVG ל-PNG, JPG או PDF?
המר ל-PNG כברירת מחדל, ל-JPG רק כאשר היעד דוחה PNG או זקוק לקובץ קטן יותר עבור גרפיקה דמוית תמונה, ול-PDF כאשר אתה צריך מסמך להדפסה או דואל.
| מטרה | שקיפות Transparency | גודל | מה שאתה מפסיד | השתמש עבור |
|---|---|---|---|---|
| PNG | נשמר | בינוני | מדרגיות | העלאות, שקופיות, נכסי אפליקציות, כל דבר עם רקע שקוף |
| JPG | מלא בלבן | הקטן ביותר לאמנות מורכבת | מדרגיות, שקיפות, קצת חדות קצה | טפסים שלוקחים רק JPG, קבצים מצורפים לדואל |
| PDF (מגולף) | אזורים שקופים מציגים את הדף הלבן | גדול יותר | מדרגיות, טקסט לבחירה, קישורים ללחיצה | גיליונות הוכחה, הדפסת תרשים, שליחת יצירות אמנות למי שאינם מעצבים |
ה ממיר SVG ל-JPG ממלא אזורים שקופים בלבן, כי ל-JPEG אין ערוץ אלפא, ומחיל את המחוון Quality.Crisp edings on flat color are בדיוק המקום שבו דחיסת JPEG משאירה צלצולים חלשים, כך שלוגו בדרך כלל נראה טוב יותר כ-PNG.
ה ממיר SVG ל-PDF ראוי אזהרה ברורה זה rasterizes: כל SVG נמשך פיקסלים, מאוחסן כמו PNG, וממוקם על דף ה-PDF אינו מכיל צורות וקטור, טקסט לא ניתן לבחור, ו התקרבות מספיק רחוק מראה פיקסלים אפשרות קנה המידה עדיין עוזר, שכן גודל הדף נשאר קבוע בעוד 2x ו 4x לארוז פיקסלים יותר לתוכו (72, 144 או 288 פיקסלים לאינץ 'עם התאמה לתמונה).If בית דפוס מבקש וקטור PDF, per ISO 32000 PDF יכול לשאת נתיבים וקטוריים אמיתיים, אבל אתה צריך עורך וקטור ' ייצוא עבור זה, לא ממיר תמונה.
מה עושה המרת PNG ל-SVG?
המרת PNG ל-SVG מתחקה אחר התמונה: היא מקבצת את הפיקסלים לאזורים בעלי צבע דומה ומתאימה קווי מתאר סביב כל אזור, מייצרת נתיבים וקטוריים מלאים. הוא לא מוצא את הקובץ הווקטור המקורי, מכיוון ש-PNG אינו מכיל תיעוד של הצורות שיצרו אותו. כל קצה בפלט הוא אומדן שנלקח מהפיקסלים.
הנותב מאחור PNG ל-SVG ו JPG ל-SVG ב-toolz הוא imagetracerjs, פועל ברקע Web Worker כך שהדף נשאר מגיב. זה עובד בשני שלבים:
- הפחתת צבע. התמונה מצטמצמת לפלטה קטנה, המספר שאתה בוחר תחת צבעים: 2, 8 או 16.
- התאמת קצה. עבור כל שכבת צבע, הנותב הולך על הגבול של כל אזור מחובר ומתאים אליו קווים ישרים ועיקולים, ומייצר נתיב מלא אחד לכל אזור.
כל נתיב מקבל גם קו מתאר של 1 פיקסל בצבע משלו בלעדיו, צורות שכנות משאירות פערים בקו השיער במקום שבו הקצוות שלהן לא ממש נפגשים, והרקע מופיע כתפרים לבנים דקים.
הפרטים שולטים עד כמה קווי המתאר האלה עוקבים אחר הפיקסלים:
| פרט | סובלנות קו ועקומה | כתמים ירדו למטה | טשטוש מראש | תוצאה |
|---|---|---|---|---|
| נמוך | 2 פיקסלים | 16 נקודות | קל | קבצים חלקים יותר, פשוטים יותר, קטנים יותר |
| בינוני (ברירת מחדל) | 1 פיקסלים | 8 נקודות | אף אחד | מאוזן |
| גבוה | 0.5 פיקסלים | 2 נקודות | אף אחד | עוקב אחרי פיקסלים מקרוב, שומר על צורות זעירות, כבדות יותר |
ה-SVG המתואר כתוב עם זה width ו height הגדר לגודל התמונה המקורי ו-a viewBox בפיקסלים עוקבים, כך שהוא נפתח בגודל שאתה מצפה ומתרחב בצורה נקייה בכל מקום שאתה מציב אותו.
מה איתור יכול לעשות טוב, ואיפה הוא נכשל?
התחקות מסתדרת היטב בתמונות שהיו דמויות וקטור מלכתחילה: צבע שטוח, קצוות קשים, מעט צבעים. זה נכשל בכל דבר עם גוונים רציפים, כי לתמונה אין קצוות למצוא, רק שיפועים.
| מקור | איך זה מתחקה | הגדרות מוצעות |
|---|---|---|
| לוגו שטוח, 2 עד 6 צבעים | צורות נקיות, קובץ קטן | 8 צבעים, בינוני |
| אמנות קו שחור-לבן, חתימות, בולים | מאוד נקי | 2 צבעים, בינוני או גבוה |
| אייקונים עם שיפוע | שיפוע הופך ללהקות | 16 צבעים, בינוני, ואז פשט בעורך |
| ציור סרוק על נייר | מרקם נייר הופך לכתמים | 2 צבעים, נמוך |
| לוגו JPG עם חפצי דחיסה | כתמים לאורך הקצוות, רקע המתואר כצורה | פירוט נמוך; מחק את צורת הרקע לאחר מכן |
| צילום מסך עם טקסט | אותיות הופכות לקווי מתאר בלוביים | שמור את זה בתור PNG |
| צילום | צורות פוסטרים כתמים, קובץ ענק | אל תעקבו |
שורת הצילום אינה עניין של טעם בבדיקת מנוע Toolz, תמונה רועשת של 2000 פיקסלים שהתחקתה ב-16 צבעים ארכה 28 שניות והפיקה SVG של 46 מגה-בייט, כבדה פי כמה מהתמונה ממנה הגיעה ועדיין גרועה יותר בעליל. רעש נותן לנותב אלפי אזורים זעירים, וכל אחד הופך לנתיב משלו עם קואורדינטות משלו.
בדיקה זו היא הסיבה שהממיר משנה כל תמונה יותר מ-1200 פיקסלים בצד עד 1200 לפני המעקב. המעקב מסתיים תוך שניות ולא דקות, ומכיוון שהפלט שומר על הרוחב והגובה המקוריים, שום דבר לגבי אופן מיקום ה-SVG לא משתנה. עקבות שעדיין פועלת לאחר שתי דקות נעצרת עם הודעה המציעה פחות צבעים או פרטים נמוכים יותר, במקום להשאיר את הכרטיסייה עמוסה ללא הגבלת זמן.
מקורות JPG מוסיפים שתי בעיות ספציפיות. דחיסת JPEG משאירה בלוקים חלשים סביב קצוות חדים, שהנותב יכול להפוך לצורות תועות; פרטים נמוכים מטשטשים מעט ומפילים כתמים כדי להתמודד עם זה. ול-JPG אין שקיפות, כך שהקופסה הלבנה סביב לוגו הופכת לצורה מלאה נוספת מאחורי הגרפיקה. בעורך וקטור, בחר את הצורה הזו ומחק אותה.
איך אני מקבל SVG נקי מלוגו PNG?
התחל עם ההגדרות הפשוטות ביותר המשמרות את העיצוב, הסתכל בתצוגה המקדימה והוסף רק צבעים או פרטים כאשר משהו חסר. הגדרות כבדות יותר מתקנות רק לעתים רחוקות עקבות רע; הם מוסיפים לו עוד נתיבים.
רצף אמין:
- השתמש במקור הגדול והנקי ביותר שיש לך ייצוא PNG מנצח צילום מסך, וצילום מסך מנצח צילום של תדפיס.
- ספור את הצבעים בלוגו ובחר את האפשרות הקרובה ביותר בו או מעליו סימן דו-צבעוני רוצה 2, סימן חמישה צבעים רוצה 8.
- Trace at Medium.בדוק את התצוגה המקדימה ואת גודל הקובץ המוצג תחת התוצאה.
- אם יש כתמים או קצוות מחוספסים, חזור על נמוך. אם פרטים דקים נעלמו, חזור על גבוה.
- פתח את התוצאה בעורך וקטור לשלב האחרון: מחק את צורת הרקע אם יש כזו, מיזוג צורות שאמורות להיות אחת, והחלף כל טקסט עוקב בטקסט אמיתי בגופן הימני.
כאשר גודל הקובץ המוצג לאחר המעקב גדול מה-PNG, התייחס לזה כאל אות. עבור לוגו זה בדרך כלל אומר שמתחקים אחר רעש; עבור כל דבר אחר זה בדרך כלל אומר שהתמונה צריכה להישאר רסטר.
אם העקבות מועדות למכונת חיתוך, חרט לייזר או תוכנת רקמה, 2 צבעים הם לרוב התשובה הנכונה אפילו לעיצוב צבעוני, מכיוון שהמכונות הללו פועלות מקווי מתאר ולא ממילוי.
האם אני יכול להמיר בין הפורמטים האלה במקום אחד?
כן. הכללי ממיר תמונה מקבל SVG יחד עם JPG, JFIF, PNG, WebP, AVIF, GIF, BMP, ICO, HEIC, TIFF, PSD, CR2, DNG ו-PDF, וכותב JPG, PNG, WebP, GIF, ICO, PDF או SVG. בחירת SVG כמטרה עוקבת אחר כל מקור רסטר עם אותן הגדרות צבעים ופרטים; בחירת יעד רסטר עבור מקור SVG מציגה את אפשרות קנה המידה של SVG.
דפי הזוג הייעודיים מקבלים רק פורמט מקור משלהם, מה ששומר על האפשרויות על המסך רלוונטיות: דפי SVG מציגים קנה מידה, דפי המעקב מציגים צבעים ופרטים.
שילוב אחד לא מוצע: PDF ל-SVG. הממיר מסרב לה בהודעה, והמסלול שהוא מציע הוא שני שלבים: המרת דף ה-PDF ל-PNG תחילה, ולאחר מכן מעקב אחר ה-PNG. אם ה-PDF הגיע מתוכנית וקטורית, ייצוא SVG מאותה תוכנית שומר על הנתיבים האמיתיים והוא האפשרות הטובה יותר.
SVG יכול גם להפוך ל-favicon. עיבודו ל-ICO מייצר תמונות PNG מרובעות בכל גודל סמל, והמינימום של 512 פיקסלים אומר שסמל קטן SVG עדיין נותן ערך נקי של 256 פיקסלים. גדלי Favicon ומה נכנס לקובץ ICO מכסה אילו גדלים לכלול.
האם המרות SVG ו-PNG פרטיות?
כן. עיבוד, קידוד ומעקב כולם מתרחשים בצד הלקוח, בתוך לשונית הדפדפן, כך שלא מועלה קובץ. שלב הפענוח של SVG והנותב יורדים רק כאשר קובץ זקוק להם, מה ששומר על אור העמוד כאשר אתה ממיר רק בין פורמטי רסטר.
המגבלות, במקום אחד: קבצי SVG עד 50 MB, פלט מעובד עד 100 מגה פיקסל ו 16,384 פיקסלים בצד, מקורות רסטר עד 100 מגה פיקסל, מעקב עד 1200 px בצד הארוך ביותר, ותקרה של שתי דקות לכל עקבות הכלים הם בחינם, ללא הרשמה, עם מגבלה יומית על המרות.
