קוד פתוח · מקומי · ללא ענן · ללא תשלום

סטודיו עיצוב חי
עם Claude Code

שרת Python אחד שמחבר דפדפן עם Inkscape, GIMP, Scribus ו-Photopea. עריכה חיה, היסטוריית Git מלאה, קומיטים אוטומטיים בעברית, ו-AI בכל שלב — בלי רישיון, בלי ענן, על המקבוק שלך.

התחלה מהירה Star on GitHub ראה דוגמאות
ללא תלויות pip stdlib Python 3 בלבד רישיון MIT תומך RTL ועברית
http://localhost:8765/index.html?f=poster.svg
live
ערב שירה במדבר הנגב ה׳ באייר · 20:00
100%
poster.svg
היסטוריה
שינוי צבעים, עריכת טקסט
a3f1e2c · 2m ago
הזזת אלמנטים
b7d4a1f · 5m ago
הצגת שכבות, שינוי שקיפות
c9e2f3a · 8m ago
שינוי טיפוגרפיה
d1a4b5c · 12m ago
מבנה שכבות
e2b5c6d · 20m ago
שינוי אפקטים
f3c6d7e · 25m ago
Quickstart · 60 seconds

שלוש פקודות — אתה בפנים

מתקינים, מריצים, פותחים את Claude Code — ומתחילים שיחה

1
התקנה
# כלים נדרשים (macOS) $ brew install --cask \ inkscape gimp scribus $ brew install fswatch poppler
2
שרת מקומי
# clone + run — no pip needed $ git clone \ github.com/nezarim/svg-live \ ~/svg-live $ python3 ~/svg-live/server.py
3
Claude Code
# כל פרויקט — שיחה אחת $ cd ~/my-project $ claude > בנה לי פוסטר ל... ✓ קובץ מתרענן חי בדפדפן
טיפ: Claude Code רואה אוטומטית את CLAUDE.md של svg-live, אז הוא כבר יודע איך לעבוד עם התצוגה החיה — פשוט תגיד לו מה לעצב.
Three paths

שלוש דרכים להתחיל שיחה

בחר את הנתיב שמתאים למה שיש לך ביד עכשיו

נתיב 1 · מאפס

כשאין לך שום דבר — רק רעיון

פתח תיקייה חדשה, הרץ claude, תאר מה אתה רוצה. Claude יוצר SVG מאפס, שומר לתיקייה, ופותח אותו ב-svg-live. כל תיקון שלך = שמירה = קומיט בגיט.

  • מתאים ל: פוסטרים, הזמנות, לוגואים, אייקונים
  • זמן להתחלה: פחות מדקה
  • דורש: רעיון בעברית או אנגלית
$ mkdir ~/yoga-poster && cd ~/yoga-poster $ claude > בנה לי פוסטר לסדנת יוגה באוויר הפתוח. > גוונים רגועים, טיפוגרפיה עברית נקייה. ✓ Created yoga.svg (1.2 KB) ✓ ln -sf $(pwd)/yoga.svg ~/svg-live/ ✓ Open localhost:8765/?f=yoga.svg
yoga.svg
סדנת יוגה באוויר הפתוח כ״ד באייר · 07:00
Live demo · Claude Code

כך Claude Code עורך SVG

לחץ הפעל — תראה ארבעה תיקונים רצופים, כל אחד משנה את התצוגה חי

Claude Code · ~/yoga-poster
$ claude
Claude Code v2.3 · loaded ~/svg-live/CLAUDE.md
Press ▶ to start demo...
yoga.svg
הלחץ ״הפעל״ להתחלה
git log · auto-commits
<empty>
צעד 0 / 4
Live demo · Inkscape

כך מלטשים את התוצאה ב-Inkscape

לחיצה אחת פותחת את ה-SVG ב-Inkscape. שמירה = קומיט אוטומטי בעברית

poster.svg
Inkscape · poster.svg
zoom 140%
פוסטר
git log · poster.svg
claude: מבנה ראשוני
a3f1e2c · now
מה קורה מתחת: לחיצה על ״פתח ב-Inkscape״ שולחת POST /open?f=poster.svg&app=inkscape. השרת פותח ב-Inkscape, מריץ keystroke "5" לזום לעמוד, ומפעיל fswatch שתופס כל שמירה.
מה השתנה
  • טיפוגרפיה משוכללת
  • יישור אופטי של הכותרת
  • קישוט גאומטרי עדין
  • הזזת חותמת למיקום מרכזי
Why svg-live

עיצוב זה לא רק
טיוטה בכלי ענן.

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

במקום לקוד חדש שצריך ללמוד, svg-live מחבר את הכלים הכי חזקים שיש (וחינמיים) — Inkscape, GIMP, Scribus — ומוסיף עליהם תצוגה חיה בדפדפן, ניהול גרסאות בגיט, ו-שילוב עם Claude שעורך מרקדפ SVG מהטרמינל.

התוצאה: זרימת עבודה של מעצב + מפתח בכלי אחד קטן של כמה מאות שורות Python.

Features

הכל במקום אחד

שמונה יכולות ליבה שהופכות את הדפדפן לסטודיו

תצוגה חיה

כל שמירה בקובץ מתרעננת בדפדפן תוך 500ms — בלי רענון ידני.

ניתוב עורכים חכם

SVG→Inkscape, PSD/XCF→GIMP, SLA→Scribus, INDD/AI→Photopea. לחיצה אחת.

היסטוריית Git

כל שמירה — קומיט אוטומטי. פאנל צד עם כל הגרסאות. לחיצה על קומיט ישן טוענת את הגרסה.

קומיטים בעברית

השרת מנתח את ה-diff ויוצר הודעת קומיט: ״שינוי צבעים, עריכת טקסט״.

עימוד ספרים

קבצי Scribus (.sla) עם תצוגת עמודים, ניווט במקשים, וייצוא PDF.

Symlinks חכמים

הקבצים נשארים בפרויקט שלהם. הגיט שלהם. השרת פותר נתיבים של ../assets/ אוטומטית.

ייצוא ניד

PNG ב-150/300/600 DPI דרך Inkscape CLI, או SVG עם תמונות מוטמעות base64.

שילוב AI

Claude Code עורך SVG ישר, ו-Nano Banana 2 יוצר תמונות — הקובץ מתרענן חי.

Use Cases

ארבעה שימושים מהעולם האמיתי

מה אפשר לבנות עם svg-live ב-30 דקות

01 פוסטר לאירוע

הזמנה לברית, חתונה או אירוע

מתחילים מ-SVG ריק. מבקשים מ-Claude שיוסיף כותרת, מעטפות קישוט, ופרטים. מלטשים ב-Inkscape, מחליפים תמונת רקע דרך Nano Banana, מייצאים PDF להדפסה.

  • עריכת טקסט עברי עם RTL מלא
  • טיפוגרפיה מדויקת ב-Inkscape ללא מעבר לאפליקציה אחרת
  • ייצוא 300dpi PNG לדפוס דרך Inkscape CLI
  • כל שינוי מתועד, גרסאות ניתנות לשחזור
# Claude Code session > בנה לי הזמנה לחתונה בסגנון צמחוני ✓ Created invitation.svg with olive branches + henna pattern > שנה את הכותרת ל-״רחל ודוד״ בגופן "Frank Ruhl Libre" ✓ Updated text element, font-family="Frank Ruhl Libre" > הוסף תאריך ה־"כ״ג באייר תשפ״ו" ✓ Added date element, Hebrew numerals > הפוך את הרקע לגוון קרם חם מאוד עדין ✓ Changed background to #faf7f1 # כל שמירה → קומיט אוטומטי a3f1e2c inkscape (invitation): עריכת טקסט b7d4a1f inkscape (invitation): שינוי צבעים
# Symlink book file $ ln -sf ~/book-project/chapter1.sla ~/svg-live/chapter1.sla # Open in viewer $ open http://localhost:8765/index.html?f=chapter1.sla # Viewer shows per-page navigation ← → מעבר בין עמודים Ctrl+ +/- זום H היסטוריית גרסאות # Every save → Scribus headless → PDF → PNG → render 📖 book-project: עדכון עמוד 12, תיקוני סגנון 📖 book-project: הזזת כותרות עליונות 📖 book-project: יישור טקסט דו-צדדי
02 עימוד ספר

ספר רב-עמודי ב-Scribus

פותחים קובץ .sla. ה-viewer מזהה שזה ספר, מריץ Scribus ב-headless mode, מייצא ל-PDF, שובר לעמודים עם pdftoppm, ומציג ניווט בין עמודים — הכל חי. חוזרים בגרסה — svg-live מוציא את הקובץ ההיסטורי מה-git ומייצר תצוגה גם לגרסה ההיא.

  • תצוגת עמוד-לעמוד עם ניווט במקלדת
  • סגנון ״e-vrit״: יישור דו-צדדי, כותרות עליונות, מספור עמוד
  • שמירת גרסאות היסטוריות של הספר
  • גופן Frank Ruhl Libre לעברית אמיתית
03 איטרציית לוגו

עיצוב לוגו — 50 איטרציות

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

v1 · v2 · v3 · v4 · all committed
> תן שלוש גרסאות ללוגו ״נייר־סולאר״ ✓ logo_v1.svg - mountain+sun minimal ✓ logo_v2.svg - abstract energy burst ✓ logo_v3.svg - panel grid pattern > לוגו שני, הפוך את הצבע ל-navy ✓ Updated fill from #fbbf24 → #1e3a8a # Compare all versions in git log $ git log --all --oneline a3f1e2c inkscape (logo_v3): שינוי צבעים b7d4a1f inkscape (logo_v2): שינוי צבעים, עריכת טקסט c9e2f3a inkscape (logo_v1): מבנה שכבות # Check out v1 to try it on a mockup $ git show a3f1e2c:logo_v1.svg > preview.svg
# Open JPG in GIMP via viewer $ curl -X POST localhost:8765/open?f=photo.jpg&app=gimp → LIBGL_ALWAYS_SOFTWARE=1 GIMP launched → Fit image to window (⌘⇧J) sent # Or via Claude Code with GIMP MCP > הסר את האדם ברקע בעזרת OpenCV inpainting ✓ Selected region (320, 180, 480, 420) ✓ cv2.inpaint with Navier-Stokes method ✓ Saved photo_clean.jpg # Preview refreshes automatically in browser 🔄 Live reload: photo_clean.jpg (2.3 MB)
04 ריטוש תמונה

הסרת חפץ, ריטוש עור, שיפור צבעים

עריכות רסטר עוברות ל-GIMP עם זיהוי פורמט אוטומטי. svg-live דואג ל-software rendering (פותר את המסך השחור של GIMP 3.2 ב-macOS), ל-fit-to-window, ולתצוגה חיה של התמונה בדפדפן. לטקסט מסובך כמו הסרת אובייקטים — Claude יכול להריץ OpenCV inpainting ישירות.

  • תומך ב-JPG, PNG, WebP, TIFF, PSD, XCF
  • תצוגת PSD מיידית דרך sips (ללא Photoshop)
  • Photopea בדפדפן לעריכה דמוית-פוטושופ
  • גרסאות מתועדות לכל שינוי
Workflow

איך עובדים עם זה

ארבעה צעדים מהקובץ הראשון לייצוא מוכן-לדפוס

1

מקשרים קובץ קיים

יוצרים symlink מהפרויקט שלכם ל-~/svg-live/. הקובץ המקורי נשאר במקום.

$ ln -sf ~/my-poster/design.svg ~/svg-live/poster.svg # optional: also link the assets folder $ ln -sf ~/my-poster/assets ~/svg-live/assets
2

פותחים בדפדפן

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

$ cd ~/svg-live && python3 server.py svg-live on http://localhost:8765 $ open http://localhost:8765/index.html?f=poster.svg
3

עורכים — קלוד או ידנית

מבקשים מ-Claude Code לשנות את ה-SVG, או לוחצים על כפתור Inkscape לעריכה ידנית. השינויים נשמרים חי בדפדפן.

# Claude Code session > שנה את הכותרת לגודל 48px בצבע כחול כהה > הזז את הלוגו 20 מ״מ ימינה > הוסף מלבן קרם מאחורי הטקסט ✓ All changes saved, browser refreshed # Or click "Open in Inkscape" for manual polish
4

מייצאים ומשתפים

PNG ב-300 DPI לדפוס, או SVG נייד עם תמונות מוטמעות שעובד בכל מקום.

$ curl localhost:8765/export?f=poster.svg&dpi=300 → poster_20260420_143022_300dpi.png $ curl localhost:8765/export-svg?f=poster.svg → poster_20260420_143022_embedded.svg (3.2 MB, self-contained)
Auto-commit AI

קומיטים חכמים
בעברית

כל שמירה ב-Inkscape, Scribus, או GIMP נתפסת דרך fswatch. השרת מריץ git diff, מזהה אילו מאפיינים השתנו, ומייצר הודעת קומיט בעברית.

לא עוד ״WIP״ או ״save״. ההיסטוריה שלכם קריאה, אוטומטית, ומדויקת — כמו שחבר צוות כותב קומיטים.

איך זה עובד
  1. fswatch מזהה שמירה
  2. git diff מחלץ את השינוי
  3. היוריסטיקה סורקת מאפיינים (fill, opacity, font, transform, filter, display...)
  4. מתרגמת לתווית עברית
  5. git add + commit
git log --oneline
posterשינוי צבעים, עריכת טקסט
a3f1e2c · 2 minutes ago
+12 −5
posterהזזת אלמנטים, שינוי שקיפות
b7d4a1f · 5 minutes ago
+8 −8
posterהצגה/הסתרת שכבות
c9e2f3a · 8 minutes ago
+2 −2
posterשינוי טיפוגרפיה, מבנה שכבות
d1a4b5c · 12 minutes ago
+24 −10
posterשינוי אפקטים, שינוי תמונה
e2b5c6d · 16 minutes ago
+6 −4
poster+42/-18 שורות
f3c6d7e · 25 minutes ago
+42 −18
אוצר המילים של המנתח
fill=, stop-color
שינוי צבעים
<text>, tspan
עריכת טקסט
transform=, x=, y=
הזזת אלמנטים
font-size, font-family
שינוי טיפוגרפיה
opacity
שינוי שקיפות
<filter>, feGaussian
שינוי אפקטים
display:none, visibility
הצגה/הסתרת שכבות
<g>, inkscape:label
מבנה שכבות
Formats

תומך בעשרה פורמטים

וקטור, רסטר ועימוד — הכל בכלי אחד

.svg וקטור
Inkscape · live edit
.png / .jpg רסטר
GIMP · live preview
.webp / .gif רסטר
Browser native
.psd עיצוב
GIMP · sips preview
.xcf עיצוב
GIMP native
.tif / .tiff עיצוב
GIMP · sips preview
.sla עימוד
Scribus · multi-page
.indd עימוד
Photopea in browser
.ai עימוד
Photopea in browser
.bmp רסטר
GIMP · live preview
API Reference

כל נקודות הקצה של השרת

שילוב עם סקריפטים, shortcuts, או אוטומציה

סוג Endpoint תיאור
GET /list-files רשימת כל הקבצים הנתמכים בתיקייה (SVG, JPG, PNG, PSD, SLA)
GET /history?f=<file> היסטוריית קומיטים לקובץ. פותר symlinks אוטומטית
GET /version?f=<file>&sha=<sha> תוכן הקובץ בגרסה ספציפית. תומך SVG, רסטר, ו-SLA (עמוד N)
GET /preview?f=<file> תצוגת PNG לקבצי עיצוב (PSD, XCF, TIFF, SLA). cached
GET /book-preview?f=<sla>&page=N תצוגת עמוד בודד מקובץ Scribus (PDF → PNG)
GET /book-pages?f=<sla> מספר עמודים בקובץ Scribus
GET /export?f=<file>&dpi=300 ייצוא PNG דרך Inkscape CLI. DPI: 150/300/600
GET /export-svg?f=<file> ייצוא SVG נייד: כל התמונות מוטמעות base64
GET /reveal?f=<file> פתיחת תיקיה מכילה ב-Finder (open -R)
GET /assets/<path> resolver אוטומטי מתיקיית assets של הקובץ המקושר
POST /open?f=<file>&app=<editor> פתיחה בעורך: auto / inkscape / gimp / scribus / photopea
POST /upload-svg?name=<name> העלאת טקסט SVG (body = SVG content)
POST /upload-file?name=<name> העלאת קובץ בינארי (תמונה, PSD, וכו׳)
POST /add-file הוספת קובץ ע״פ נתיב מוחלט (JSON: {"path": "..."}). יוצר symlink
Install

התקנה ב-60 שניות

ארבע פקודות — ואתם רצים

# 1. Clone $ git clone https://github.com/nezarim/svg-live.git ~/svg-live $ cd ~/svg-live # 2. Install editors + system helpers (macOS, via Homebrew) $ brew install --cask inkscape gimp scribus $ brew install fswatch poppler # 3. Start the server (Python 3 stdlib only — no pip needed) $ python3 server.py svg-live on http://localhost:8765 # 4. Open in browser $ open http://localhost:8765/index.html
דרישות חובה
  • macOS (הפונקציונליות של osascript)
  • Python 3 (מגיע עם macOS)
  • git
רכיבים לפי פורמט
  • • Inkscape — SVG, ייצוא PNG
  • • GIMP — PSD/XCF/TIFF
  • • Scribus — קבצי .sla
  • • fswatch — קומיטים אוטומטיים
  • • poppler — תצוגת עמודי Scribus
הרשאת Accessibility: svg-live שולח keystroke ל-Inkscape ("5" לזום-לעמוד) ול-GIMP (⌘⇧J ל-fit). תן הרשאה ב- System Settings → Privacy & Security → Accessibility → Terminal.
Shortcuts

קיצורי מקלדת

מעצבים עם הידיים על המקלדת

+
זום-אין
−
זום-אאוט
0
איפוס זום
⌘ + wheel
זום עם גלגלת
← →
ניווט עמודי ספר
H
היסטוריית גרסאות
F
מסך מלא
drag & drop
העלאת קובץ
R
רענון ידני
Compared

למה לא Figma או Adobe?

השוואה ישירה — בלי מרקטינג

svg-live Figma Illustrator Canva
קבצים שלך, במחשב שלך
מחיר חודשי $0 $15+ $22+ $12+
עובד offline
היסטוריית Git אמיתית
שילוב Claude Code
ייצוא PNG 600dpi עד 4x
עימוד ספרים חלקי
תמיכה RTL עברית חלקי חלקי
פתוח ל-scripts paid API

svg-live הוא לא תחליף ל-Figma לצוותים של 20 מעצבים. הוא כלי למעצב אחד או שניים שרוצים שליטה מלאה בקוד, ב-Git, וב-AI.

FAQ

שאלות נפוצות

זה תומך ב-Windows או Linux?
כרגע macOS בלבד. התצוגה החיה והניתוב של העורכים משתמשים ב-osascript ובפקודת open של macOS. יציאת Linux אפשרית עם xdotool; ב-Windows ידרוש יותר עבודה. PRs welcome.
למה לא לשרת את זה בענן?
svg-live מפעיל אפליקציות מקומיות (Inkscape, GIMP, Scribus) ופותח תיקיות ב-Finder. זו בעיקרון המטרה: להיות סטודיו מקומי, לא כלי ענן. אפשר לחבר אליו Claude Code, Nano Banana, או כל סקריפט — אבל הקבצים והתהליכים רצים אצלך.
האם אני חייב Inkscape או Scribus כדי להשתמש?
לא. מותקנים רק את העורכים שאתה צריך. אם אתה עובד רק עם SVG, Inkscape מספיק. התצוגה החיה, הייצוא והגיט עובדים בלי תלות בעורך חיצוני. העורכים מוסיפים את היכולת לעשות עריכה ידנית.
איך זה עובד עם Claude Code?
ה-repo כולל CLAUDE.md שמלמד את Claude על מבנה הפרויקט. פותחים את Claude Code בתיקיית הפרויקט המקורי, ומבקשים ממנו לערוך את ה-SVG. Claude קורא את הקובץ, משנה את markup, שומר — הדפדפן מתרענן חי.
מה קורה אם יש לי SVG גדול עם הרבה תמונות?
עובד מצוין. אם ה-SVG מפנה ל-../assets/photo.jpg, השרת מפעיל asset resolver אוטומטי: מוצא את ה-symlink המקורי, ומגיש את התמונה מתיקיית ה-assets האמיתית. לייצוא ״נייד״, יש /export-svg שמטמיע הכל ב-base64.
הקומיטים האוטומטיים מסבכים את ההיסטוריה?
הם רצים רק על הקובץ שפתוח ב-viewer (דרך fswatch). אם אתה לא רוצה אותם, אל תלחץ על ״פתח ב-Inkscape״ — הוא מתחיל את ה-watcher רק אז. אפשר גם git rebase -i בסוף כדי לצמצם את ההיסטוריה לפני PR.
האם יש API לאוטומציה?
כן. כל מה שה-viewer עושה חשוף דרך HTTP: /list-files, /history, /version, /preview, /export, /open, ועוד. אפשר להריץ curl localhost:8765/export?f=poster.svg&dpi=300 מתוך כל shell script או Makefile.
אני רוצה להשתמש ב-Nano Banana 2. איך זה משתלב?
Claude לא קורא ל-image-generation ישירות. הוא מציע לך prompt, אתה מריץ אותו ב-Nano Banana 2 (Gemini 2.5 Flash Image) בעצמך, מביא את הקובץ ל-assets/, ו-Claude מעדכן את ה-SVG. זה מונע חיוב מקרי על AI generation, ומאפשר לך לראות בדיוק איזו תמונה הולכת פנימה.

מספיק להסתמך
על כלי ענן.

svg-live פתוח, מקומי, ניתן להרחבה, וכתוב בכמה מאות שורות Python. שש דקות להתקין, שעה ללמוד, שנים להשתמש.

Clone from GitHub הוראות התקנה