איך מייבאים ועורכים קובצי SVG ב-Figma, ב-Canva או ב-WordPress?

יש לכם את ה-SVG. ומה עכשיו?

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

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

למה Figma, Canva ו-WordPress אוהבים את הפורמט הזה

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

בפועל, SVG מ-PixelToPath נותן לכם:

• נתיבים שניתנים לעריכה: צבע אחד לכל צורה, ניתן לשינוי ב-Figma (Fill) או ב-Canva (משבצות צבע)
• קובץ קל, רחוק מהתקורה של 3 מ״ב ב-Canva, ומהיר יותר לטעינה באתר WordPress מ-PNG בגרסת @2x
• חדות זהה כ-favicon, כבאנר LinkedIn או כרול-אפ: קובץ אחד יחיד
• מוצר סופי שאפשר לשלוח ללקוח: הוא יפתח אותו בכלי שיש לו, לא ב-Creative Cloud

Figma: ייבוא ה-SVG ושינוי צבעים

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

1. מורידים את ה-svg מ-PixelToPath ופותחים את קובץ ה-Figma שלכם.
2. גוררים את הקובץ מהסייר ישירות לבד. חלופה: File ← Place image, או Ctrl+Shift+K (Cmd+Shift+K במק) כדי למקם את ה-SVG.
3. השכבה מופיעה כקבוצה. לחיצה כפולה נכנסת פנימה, או לחיצה ימנית ← Ungroup (Shift+Ctrl+G / Shift+Cmd+G) אם רוצים לטפל בצורות בנפרד.
4. בוחרים נתיב. בפאנל הצדדי, במקטע Fill, לוחצים על משבצת הצבע: הקס, פלטה, טפטפת. כל הצורה מתחלפת, והקווים נשארים חדים.
5. ללוגו מונוכרומטי, בוחרים את כל הצורות בקבוצה ומחילים צבע אחד. ואז מייצאים כ-SVG, PNG או PDF ממקטע ה-Export, אם המוצר הסופי כבר לא וקטורי.

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

Canva: העלאת ה-SVG ושינוי צבע

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

1. ב-Canva, פותחים עיצוב. הפאנל השמאלי ← Uploads ← Upload files. בוחרים את ה-svg (מתחת ל-3 מ״ב; ייצוא של PixelToPath רחוק מזה).
2. אחרי שהקובץ נכנס להעלאות שלכם, גוררים אותו לעמוד. משנים גודל בעזרת הידיות: הווקטור נשאר חד, כולל בפורמטי סטורי או A4.
3. לוחצים על ה-SVG. בסרגל הכלים מופיעות משבצות צבע, אחת לכל גוון בקובץ. לוחצים על משבצת ובוחרים את הצבע החדש: Canva מחיל אותו על כל הצורות באותו גוון.
4. אם לא מופיעה שום משבצת, ה-SVG מורכב מדי (הדרגות, יותר מדי צבעים, נתיבים בסגנון צילום). חוזרים ל-PixelToPath, עוברים לפוסטר או לשחור-לבן, מייצאים שוב ומייבאים שוב.

Canva ממליץ על פרופיל SVG 1.1, צורות באותו צבע מקובצות יחד, ואפס מרקם. פריסטי הלוגו של PixelToPath כבר עומדים באילוצים האלה. אין צורך לעבור דרך Illustrator כדי ל״הכין״ את הקובץ.

WordPress: לאפשר העלאת SVG בלי לפתוח פרצה

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

אל תסתפקו בהוספת image/svg+xml ב-functions.php. בלי ניקוי הקובץ, אתם פותחים פרצה. השיטה הבטוחה: תוסף מתוחזק שמנקה סקריפטים, אירועי onload וישויות XML. Safe SVG (10up), יותר ממיליון התקנות.

1. בממשק הניהול של WordPress: Plugins ← Add New. מחפשים את Safe SVG (מחבר: 10up). מתקינים ומפעילים.
2. עוברים אל Settings ← Media. מגבילים העלאת SVG למנהלים (או לתפקידים מהימנים). לא פותחים את הפורמט לכל חשבונות המחברים אם יש באתר כותבים רבים.
3. Media ← Add New. גוררים את ה-svg של PixelToPath. התוסף מנקה אותו בעת הייבוא ומציג תצוגה מקדימה בספרייה — משהו ש-WordPress לא עושה מובנה.
4. בפוסט או בעמוד, מוסיפים בלוק Image ובוחרים את ה-SVG. ללוגו בכותרת: Customize / Site Identity, או בלוק Image בתבנית (Site Editor).
5. חלופה למפתחים: לוותר על ספריית המדיה. מניחים את הקובץ בתבנית (assets/logo.svg) ומפנים אליו מהתבנית, או מטמיעים אותו inline כדי לעצב אותו ב-CSS. בלי העלאה, ולכן בלי שטח תקיפה בספריית המדיה.

Safe SVG יכול גם להגביל מי רשאי להעלות. מעדכנים את התוסף: ניקוי הקובץ הוא הבקרה האמיתית, לא רק תיבת הסימון ״אפשר SVG״.

איזה SVG של PixelToPath לשלב בכלים האלה?

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

• לוגו, אייקון, אותיות: שחור-לבן או פוסטר. אלה צבעים אחידים ש-Figma ו-Canva משנים בלחיצה אחת.
• הימנעו מצילום אם בכוונתכם לשנות צבעים. המצב הזה יוצר המון צורות קטנות; Canva לרוב לא יציג משבצות צבע שימושיות.
• חתכו את המקור לפני ההמרה: פחות רקע, פחות צמתים, SVG נקי יותר בשכבת ה-Figma.
• וריאציה אחת לכל שימוש: SVG מונוכרומטי ל-Figma (מדריך המותג), SVG צבעוני ל-Canva (פוסט), אותו קובץ מנוקה ל-WordPress (כותרת).

איפה זרימת העבודה הזאת משנה את השגרה

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

• מדריכי מותג ב-Figma: ה-PNG של הלקוח הופך לרכיב שמשנים את צבעו (ראשי, הפוך, מונוכרומטי) בלי לצייר מחדש
• פרסומים ב-Canva: SVG אחד, שישה צבעי קמפיין, סטוריז וקרוסלות חדות
• לוגו ב-WordPress: קובץ אחד בכותרת, חד במובייל וב-Retina, קל יותר מה-PNG הישן
• מוצר סופי לפרילנסר: מוסרים את ה-SVG יחד עם ההוראות ל-Figma / Canva. הלקוח כבר לא תלוי בכם
• אייקוני UI: מייבאים אותם ל-Figma בכמות, מצמידים לגריד של 24 פיקסלים ומייצאים את הסט

שמרו PNG לצילומים. לכל מה שצריך לשנות צבע או להישאר חד, השילוב של PixelToPath + Figma / Canva / WordPress מספיק.