איך עושים וקטוריזציה ללוגו: מ-PNG ל-SVG צבעוני, בחינם

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

PNG JPG WebP → SVG
✓ מעקב צבע אמיתי בלי הרשמה JPG · PNG · WebP · BMP חינם 100 %
מווקטר את הלוגו שלי עכשיו →

מה זה באמת אומר לעשות וקטוריזציה ללוגו

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

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

אזהרה אחת לפני הכול: כמה "ממירים" מוסרים לכם .svg שהוא בעצם ה-PNG שלכם עטוף בתג <image> ב-base64. פתחו את הקובץ בעורך טקסט: בלוק מקודד ענק אחד במקום אלמנטים של <path> אומר שקיבלתם מפת סיביות משונה-שם, לא וקטור.

תוצאות אמיתיות של הממיר

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

שלושה סוגי לוגואים נכנסים מהדלת

ההגדרה שתבחרו תלויה באיזה משלושת הלוגואים אתם מחזיקים. החליטו על זה קודם - זה המנוף האיכותי הגדול ביותר שיש לכם.

המותג החד-צבעי

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

הלוגו הצבעוני השטוח

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

האמבלם עתיר הגרדיאנטים

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

איזו הגדרה לאיזה לוגו

התאימו את הלוגו לשורה וקחו את ההגדרה - כל ההחלטה בטבלה אחת:

הלוגו שלכם הגדרה מה שתקבלו
לוגוטייפ, אייקון או חותמת חד-צבעיים שחור-לבן צורה נקייה אחת, קובץ מינימלי, מוכן לחיתוך
2-6 צבעים אחידים (רוב לוגואי הלקוח) Poster מסלול ניתן לעריכה לכל צבע
גרדיאנטים, מתכתיים, צללים רכים תמונה גרדיאנטים מקורבים ברצועות
לוגו על רקע עמוס או צבעוני הכינו קודם חתכו או הסירו את הרקע ואז עקבו
צילום מסך זעיר, רוחב מתחת ל-~200 פיקסל השיגו קובץ גדול יותר שום הגדרה לא ממציאה רזולוציה - ראו מדריך הלוגו המטושטש
לוגו עם סריפים דקים או פרטים רבים Poster + פירוט גבוה פירוט מסלול גבוה שומר קווים דקים בחיים

סקרן מה קורה לפיקסלים מתחת לכל בחירה? המכניקה מפורקת ב מה וקטוריזציה באמת עושה.

כמה צבעים ה-SVG צריך לשמור?

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

  • 1-2 צבעים: שחור-לבן. אם המותג הוא צבע אחד ועוד רקע, מעקב צבעוני משלם רק על רעש anti-aliasing. צורה אחת, קובץ קל כנוצה.
  • 3-8 צבעים אחידים: Poster. נקודת המתק של לוגואים אמיתיים. צבעי המותג שורדים כשכבות בעלות שם שאפשר לצבוע מחדש; הערפל של ה-JPEG בין הצורות נבלע ולא מתועד.
  • עשרות גוונים: תמונה. רק לאמבלמים עם גרדיאנט. הדיוק עולה, אבל גם המשקל: SVG במצב תמונה יכול לשקול פי עשרה מאחיו ב-Poster ועדיין להיראות מסוגנן.
לפני · המקור 5 KB
קובץ PNG: לוגו כחול-כהה עגול עם חץ כפול לבן
אחרי · SVG פריסט שחור-לבן · 2 KB
אותו לוגו שהומר ל-SVG עם פריסט שחור-לבן: עקומות חלקות, מילוי שחור
המרה אמיתית שבוצעה עם הכלי: ה-PNG המקורי משמאל שורטט עם פריסט שחור-לבן ל-SVG שמימין — קובץ וקטור שנשאר חד לחלוטין בכל רמת זום.

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

SVG בשכבות: למה מסלול אחד לכל צבע חשוב

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

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

איך עושים וקטוריזציה ללוגו בחינם (4 שלבים)

בלי חשבון, בלי התקנה, בלי חותמת מים:

  1. העלו את הלוגו - גררו PNG, JPG, WebP או BMP. הגרסה הגדולה והנקייה ביותר שיש לכם מתועדת הכי טוב.
  2. בחרו הגדרה לפי הטבלה למעלה - שחור-לבן למותגים חד-צבעיים, Poster ללוגואים צבעוניים שטוחים, תמונה לאמבלמים עם גרדיאנט.
  3. כוונו את מספר הצבעים לפלטת המותג - בערך הצבעים שבהם הלוגו עוצב, ועוד הרקע.
  4. בדקו את התצוגה המקדימה מול רשימת הבדיקה למטה והורידו את ה-SVG - אלמנטים אמיתיים של <path>, מוכנים לדפוס, לאינטרנט או לחיתוך.

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

האם המעקב טוב? בדיקת איכות של 60 שניות

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

  • זום ל-400 %. הקצוות חייבים להישאר עקומות חלקות. מדרגות או ערפל אומרים שהמקור קטן מדי או מספר הצבעים גבוה מדי.
  • כווצו לגודל פאביקונה. אם המותג לא קריא ב-16 פיקסל, המעקב נאמן אבל הלוגו צריך וריאנט אייקון מפושט - תעדו רק את חלק הסמל בנפרד.
  • בדקו את הצבעים. כל צבע מותג צריך להיקרא כמו עצמו. גוונים שהוסטו אומרים שהמעקב שרף צבעים על anti-aliasing - הורידו את המספר ועשו שוב.
  • שקלו את הקובץ. SVG של לוגו אמור לשקול כמה קילובייטים. עשרות KB אומרות שהמנוע צייר רעש; המשקל הזה ילך עם הקובץ לכל דף שטוען אותו.

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

כשמעקב לוגו לא עובד - ומה לעשות במקום

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

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

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

Illustrator מול Inkscape מול ממיר אונליין חינמי

שלוש הדרכים מובילות ל-SVG. הן נבדלות בעלות, בעקומת הלמידה ובמה שאפשר לתקן אחר כך:

כלי הכי טוב ל לשים לב ל
Adobe Illustrator שליטה ידנית מלאה: ציור מסלולים מחדש ביד, צבעי מותג מדויקים, מסירה לדפוס מנוי על מה שהוא, רוב הזמן, קליק אחד של Image Trace
Inkscape (חינם) מעקב מקומי, עריכה וניקוי מסלולים בלי עלות תוכנה עקומת הלמידה של עורך מלא; ריבוי צבעים דורש את לשונית הריבוי-סריקה
ממיר אונליין לוגו אחד, דקה אחת, בלי התקנה - הגדרות צבע מכווננות ללוגואים, פלט שכבות עבודות אצווה וניקוי כבד נשארות לדסקטופ; ללוגואים חסויים בדקו מדיניות פרטיות

הערה כנה: Image Trace של Illustrator ו-Trace Bitmap של Inkscape מריצים את אותו סוג מנוע כמו מעקב אונליין. תוכנה בתשלום קונה עריכה ידנית אחרי המעקב - לא מעקב אוטומטי טוב יותר.

לוגו אחד, כל הוריאנטים - ומסלול אצווה

עבודת מותג אמיתית היא אף פעם לא קובץ אחד. אותה המרה מכסה את כל הערכה:

  • וריאנטים: אייקון בלבד, נעילה אופקית, היפוך לרקעים כהים - תעדו כל אחד ממקור הראסטר שלו, אותה הגדרה, תוצאות עקביות.
  • יעדים: דפוס (מכרטיס ביקור ועד שילוט), אינטרנט (מפאביקונה ועד hero), ומכונות חיתוך או חריטה שעוקבות ישירות אחרי מסלולים וקטוריים.
  • מסירה: SVG שכבות עם מסלול לכל צבע הוא הקובץ שמפתחים ובתי דפוס מבקשים - סוף למיילים של "אפשר לקבל גרסה גדולה יותר?".

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

מדריכי המרה קשורים

החלמה, תיאוריה ועבודת אצווה - המדריכים סביבו.

🔍 תיקון לוגו מטושטש או מפוקסל ✏️ מה וקטוריזציה באמת עושה 🔄 PNG ל-SVG: המדריך המלא 📦 המרת תיקייה שלמה באצווה 🌐 ממיר אונליין חינם

שאלות נפוצות

איך עושים וקטוריזציה ללוגו בחינם?

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

אפשר לעשות וקטוריזציה ללוגו בלי Adobe Illustrator?

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

לוגו צבעוני שומר על הצבעים שלו ב-SVG?

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

האם ל-SVG יש רקע שקוף?

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

בטוח להעלות לוגו לקוח חסוי?

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

מווקטרו את הלוגו שלכם עכשיו - חינם, בלי הרשמה

העלו PNG או JPG, בחרו הגדרה והורידו SVG צבעוני בשכבות בפחות מדקה - בלי חשבון, בלי חותמת מים ובלי Illustrator.

מווקטר את הלוגו שלי עכשיו → ⬇️ הורדת אפליקציית דסקטופ