Tools 4 All
דף הבית
כלי תמונות

עורך SVG מקוון

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

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

התחלה מהירה וקיצורי מקלדת

בחרו כלי משמאל (או לחצו על המקש שלו), גררו על הקנבס כדי לצייר, והשתמשו בחלונית העיצוב שמימין כדי לעצב את הבחירה. לחצו על ? בכל עת לרשימת הקיצורים המלאה.

  • ניווט: גלילה להזזה, Ctrl/⌘ + גלילה או צביטה לזום, החזיקו Space וגררו להזזה. Shift+1 מבצע זום להתאמה.
  • בחירה: לחיצה, Shift-לחיצה או גרירת מסגרת בחירה. לחיצה כפולה על קבוצה כדי להיכנס אליה, על נתיב כדי לערוך את הצמתים שלו, או על טקסט כדי להקליד.
  • טרנספורמציה: גררו את הידיות לשינוי קנה מידה (Shift שומר על פרופורציות, Alt משנה ביחס למרכז), גררו את הכפתור העגול לסיבוב, ו-Ctrl/⌘-גרירה של ידית צד להטיה.
  • עט: לחיצה לפינות, גרירה לעקומות, לחיצה על הצומת הראשון לסגירת הנתיב, ולחיצה על Enter לסיום.
  • קבצים: שחררו קובצי SVG או תמונות בכל מקום בעורך, הדביקו קוד SVG או צילומי מסך, והשמירה האוטומטית שומרת על העבודה שלכם.
Untitled
Guide, features and FAQ

איך משתמשים בעורך ה-SVG

  1. פתיחה או התחלת ציור

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

  2. ציור ועריכה

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

  3. ארגון

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

  4. ייצוא

    הורידו SVG, ‏PNG, ‏JPEG או WebP מותאמים בכל קנה מידה, או העתיקו את התוצאה כקוד SVG, כ-data URI, כרכיב React או כ-SVG מוכן ל-Tailwind שמקבל את הצבע שלו מ-CSS.

עורך SVG מקצועי שפועל כולו בדפדפן

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

מה אפשר לעשות

  • ציור מדויק: כלי עט עם עקומות בזייה, עיפרון חופשי עם החלקה, מלבנים עם פינות מעוגלות, משופעות או הפוכות באופן עצמאי, אליפסות, קווים, מברשת כתם, מחק, סכין ומספריים, וצורות הניתנות לעריכה: מצולעים, כוכבים, משולשים, צלבים, מסגרות, טבעות, פלחים, סהרונים, חצים, בועות דיבור, גלגלי שיניים, לבבות, עננים, פרחים וספירלות, וטקסט.
  • עריכת נתיבים צומת אחר צומת: הזזת צמתים וידיות, המרה בין צמתים פינתיים, חלקים וסימטריים, הוספה ומחיקה של צמתים, חיבור ופיצול נתיבים, כיפוף ישיר של מקטעים והצמדת ידיות למשיקים.
  • שילוב צורות: איחוד, חיסור, חיתוך משותף, החרגה וחלוקה, וגם המרת קו מתאר לצורה, היסט נתיב, פישוט והיפוך כיוון — הכול מחושב על ידי מנוע הגאומטריה שלנו ששומר על עקומות, ב-worker ברקע.
  • עיצוב של הכול: צבעים אחידים, מעברי צבע ליניאריים ורדיאליים עם ידיות על הקנבס, דוגמאות, אטימות נפרדת למילוי ולקו המתאר, מקווקווים, קצוות, חיבורים, ראשי חץ, מצבי מיזוג, אפקטים של טשטוש וצל, נתיבי חיתוך ומסכות.
  • שמירה על סדר: חלונית שכבות עם גרירה לשינוי סדר, שינוי שמות וקינון, נעילה והסתרה, קיבוץ ופירוק קבוצות, יישור ופיזור ביחס לבחירה, למשטח העבודה או לאובייקט מפתח, דוגמיות צבע של המסמך וסמלים לשימוש חוזר.
  • עבודה כמו מקצוענים: קווי עזר חכמים עם תוויות מרחק ורמזי ריווח שווה, הצמדה לרשת, לפיקסלים, לקווי עזר מהסרגל, לצמתים ולנתיבים, שדות מספריים ל-X/Y/W/H/סיבוב, ביטולים ללא הגבלה וקיצורי מקלדת בסגנון Figma ו-Illustrator.
  • קוד וייצוא: תצוגת קוד SVG דו-כיוונית, ייצוא SVG מותאם עם הצגת גודל, PNG/JPEG/WebP בכל קנה מידה, והעתקה כ-SVG, כ-data URI, כ-React ‏(JSX או TSX), כ-Tailwind SVG או כרקע CSS.
  • בנוי לייצור לרשת: צבעי המסמך עם החלפה בלחיצה ו"המרה ל-currentColor", טקסט לקווי מתאר, המרת קו מתאר לצורה, שיטוח טרנספורמציות ופירוק קבוצות, התאמת הקנבס לתוכן ופישוט נתיבים רועשים.
  • סביבת עבודה אמיתית: כמה ציורים בלשוניות, לכל אחד היסטוריית ביטולים משלו, תפריטים קצרים עם תפריטי משנה, חלונית צד שמתקפלת (Ctrl/⌘+B) ועריכה במסך מלא בטלפונים ובמחשבים.

למה עורך שבנוי על SVG חשוב

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

מהיר עם קבצים גדולים

מהירות הייתה מטרה עיצובית מהשורה הראשונה של הקוד. הציור מוצג באופן מקורי על ידי הדפדפן בתוך שכבה מבודדת. ידיות בחירה, קווי מתאר במעבר עכבר וקווי עזר מצוירים בשכבת על נפרדת, כך שהזזת העכבר לעולם אינה נוגעת במסמך. אינדקס מרחבי (R-tree) מוצא את מה שנמצא מתחת לסמן תוך מיקרו-שניות, גם עם עשרות אלפי צורות. במסמכים כבדים, הזזה וזום מועברים לרכיב ההרכבה של ה-GPU, והווקטורים מוצגים מחדש בחדות כשעוצרים. עבודה כבדה כמו פעולות בוליאניות, היסט נתיבים ואופטימיזציה של SVG רצה ב-Web Worker, כך שהממשק נשאר מגיב.

כלי דיוק לעבודה וקטורית

השתמשו בכלי העט כדי ללחוץ לפינות ולגרור לעקומות חלקות. החזיקו Shift כדי לשמור על זוויות של 45° ו-Alt כדי לשבור ידית. עם כלי הצמתים אפשר לגרור מקטע כדי לכופף אותו, ללחוץ לחיצה כפולה כדי להוסיף צומת, או לבחור כמה צמתים וליישר אותם. קווי עזר חכמים מראים מתי אובייקט מתיישר עם הקצוות או המרכזים של שכניו, ומתי הריווח בין אובייקטים שווה. אפשר גם לגרור קווי עזר מהסרגלים. לערכים מדויקים, הקלידו X, ‏Y, רוחב, גובה וסיבוב בחלונית העיצוב. השדות מקבלים חישובים כמו 120+16 או 200/3.

ייצוא נקי וקטן

עורכים משאירים לעיתים קרובות בקבצים שהם שומרים מטא-נתונים, הגדרות שאינן בשימוש, קבוצות מיותרות ומספרים מדויקים מדי. חלון הייצוא מריץ ברקע מייעל בסגנון SVGO. הוא מעגל מספרים לדיוק שתבחרו, ממיר נתוני נתיב לצורה הקצרה ביותר, מסיר מטא-נתונים של עורכים והגדרות שאינן בשימוש, מקצר מזהים וצבעים ומקפל קבוצות חסרות תועלת. אפשר לכבות כל אופטימיזציה, והחלון מציג את גודל הקובץ לפני ואחרי. לפלט רסטר, בחרו PNG, ‏JPEG או WebP ב-1×, ‏2×, ‏4× או בגודל מדויק בפיקסלים, עם רקע שקוף או בלעדיו.

בנוי לייצור לרשת

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

הקבצים שלכם נשארים במכשיר שלכם

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

לכלי תמונות נוספים

שאלות נפוצות

האם עורך ה-SVG הזה באמת חינמי ופרטי?
כן. הוא חינמי, לא דורש חשבון ופועל ב-100% בדפדפן. הציורים שלכם לעולם אינם מועלים: קבצים נקראים מקומית, השמירה האוטומטית נכתבת לאחסון של הדפדפן עצמו (IndexedDB) והייצוא נוצר במכשיר שלכם.
האם הוא יכול לפתוח קובצי SVG מ-Illustrator, מ-Inkscape, מ-Figma או מספריות אייקונים?
כן. העורך עובד ישירות על מסמך ה-SVG, כך שקבצים מהעולם האמיתי שומרים על המבנה, המזהים, הסגנונות, מעברי הצבע, הסמלים, נתיבי החיתוך והמסכות שלהם. קבצים מבולגנים או לא תקינים מתוקנים בזמן הפתיחה, סקריפטים מושבתים בזמן העריכה, וקובצי ‎.svgz נפרסים אוטומטית.
יש לו כלי עט ופעולות בוליאניות כמו ב-Illustrator?
כן. כלי העט מצייר נתיבי בזייה עם צמתים פינתיים, חלקים וסימטריים, וכלי הצמתים מאפשר להוסיף, למחוק, להמיר, לחבר, לפצל וליישר צמתים. איחוד, חיסור, חיתוך משותף, החרגה וחלוקה עובדים על עקומות ושומרים אותן כעקומות, ואפשר גם להמיר קווי מתאר לצורה, לבצע היסט ולפשט נתיבים.
אפשר להנפיש SVG?
כן. פתחו את סביבת העבודה "הנפשה", הזיזו את סמן הניגון ושנו את המיקום, הסיבוב, קנה המידה, האטימות או הצבעים של אובייקט: כל שינוי הופך לפריים מפתח עם עקומת האצה, ומאפיינים שכבר מונפשים מקבלים פריים מפתח חדש אוטומטית. ההנפשות נשמרות כ-SVG סטנדרטי (SMIL), כך שהן מתנגנות בכל דפדפן בלי שום סקריפט.
אפשר לערוך את קוד ה-SVG ישירות?
כן. חלונית הקוד מציגה את קוד המקור החי של ה-SVG עם הדגשת תחביר. עריכת הקוד מעדכנת את הציור, ועריכת הציור מעדכנת את הקוד. אפשר לבטל כל שינוי, משני הצדדים.
אילו פורמטי ייצוא נתמכים?
SVG מותאם, שמופק על ידי מייעל מובנה בסגנון SVGO עם הצגת גודל לפני ואחרי, ו-PNG, ‏JPEG ו-WebP ב-1×, ‏2×, ‏4× או בגודל מותאם, עם שקיפות לפי הבחירה. אפשר גם להעתיק את הבחירה כקוד SVG, כ-data URI או כ-JSX ל-React.
האם אאבד את העבודה שלי אם הדפדפן ייסגר?
לא. המסמך שלכם נשמר אוטומטית באחסון המקומי של הדפדפן רגע אחרי כל שינוי. בפעם הבאה שתפתחו את העורך הוא ישחזר את הסשן האחרון, ומסמכים ישנים יותר יישארו זמינים תחת קובץ ← קבצים אחרונים.
אפשר לגרום לאייקון להשתמש ב-currentColor עבור React או Tailwind?
כן. האזור "צבעי המסמך" מציג כל צבע בציור (כל כתיב של צבע נספר פעם אחת). לחצו על דוגמית צבע כדי לבחור את כל מה שמשתמש בו ולשנות אותו בכל מקום בבת אחת, או בחרו "המרה ל-currentColor": האייקון יקבל אז את הצבע שלו מ-CSS, כמו מחלקת text-… של Tailwind, ובעורך הוא ישמור על המראה שלו. העתיקו אותו כרכיב React או כ-Tailwind SVG מתפריט העריכה או מתפריט ההקשר.
איך ממירים טקסט לנתיבים או קו מתאר לצורה ממולאת?
בחרו את הטקסט ובחרו "טקסט לקווי מתאר" (Ctrl/⌘+Shift+O): כל גליף הופך לנתיב בדיוק במקום שבו הדפדפן צייר אותו, כולל טקסט על נתיב וקטעים מעוצבים. לקווי מתאר, "המרת קו מתאר לצורה" הופכת את הקו לצורה ממולאת שתואמת לעובי, לקצוות, לחיבורים ולמקווקווים שלו, כך שלוגו שומר על המשקל שלו בכל גודל.
האם הוא יכול לנקות קובצי SVG מיובאים עם טרנספורמציות וקבוצות מקוננות?
כן. "שיטוח טרנספורמציות ופירוק קבוצות" כותב כל טרנספורמציה לתוך קואורדינטות הנתיב ומפרק את הקבוצות בצעד ביטול אחד, ושומר רק את מה שאחרת היה משנה את המראה (קבוצות עם חיתוך, מסכה או הפניה). "התאמה לתוכן" חותך את הקנבס (viewBox, רוחב וגובה) לגבולות האיור, כולל קווי המתאר, עם ריפוד לפי הבחירה, ו"פישוט" מקטין את מספר הנקודות בנתיבים רועשים.
אפשר לעבוד על כמה ציורים בבת אחת?
כן. כל ציור נפתח בלשונית משלו מעל הקנבס, עם היסטוריית ביטולים, בחירה וזום משלו. עברו ביניהם בחופשיות; סגירת לשונית שומרת את הקובץ בקובץ ← קבצים אחרונים, והלשוניות הפתוחות חוזרות בביקור הבא.
איפה כל הפקודות? התפריטים קצרים.
פקודות קשורות נמצאות בתפריטי משנה (סידור, טרנספורמציה, נתיב, חיתוך ומסכה, העתקה בתור, יישור ופיזור…). רחפו או הקישו עליהם, או השתמשו במקשי החצים. לכל פקודה יש גם קיצור מקלדת: לחצו על ? לרשימה המלאה. במחשב אפשר לקפל את חלונית הצד עם Ctrl/⌘+B כדי לתת לקנבס יותר מקום.
האם הוא עובד בטלפונים ובטאבלטים?
כן. במסכים קטנים הכלים עוברים לסרגל כלים תחתון והחלוניות נפתחות כגיליונות. צביטה לזום, גרירה בשתי אצבעות להזזה ולחיצה ארוכה לתפריט ההקשר.
כמה גדולים יכולים להיות הציורים שלי?
העורך בנוי לקבצים כבדים. הוא משתמש באינדקס מרחבי לבדיקת פגיעה ולבחירה, בשכבת על נפרדת לידיות ולקווי עזר, בהזזה וזום דרך רכיב ההרכבה בלבד במסמכים גדולים, וב-Web Workers לגאומטריה ולאופטימיזציה. מסמכים עם עשרות אלפי רכיבים נשארים מגיבים.
כל כלי התמונות ←
דוחס תמונות הקטנת גודל קובץ התמונה תוך שמירה על האיכות החזותית. ממיר תמונות המרת תמונות בין PNG, JPEG, WebP, GIF, BMP, ICO, TIFF ועוד. שינוי גודל תמונות שינוי גודל תמונות לממדים מדויקים — מושלם לתמונות פספורט. תמונה ל-PDF שילוב תמונה אחת או יותר במסמך PDF אחד.