Editor has no way to export paths back to SVG — user with paths they've drawn can't export as SVG (the universal vector format), only PES/DST/EXP/JEF (machine-specific formats) #284

New issue

Closed

opened 2026-10-04 03:43:03 +00:00 by Mark · 1 comment

Mark commented

2026-10-04 03:43:03 +00:00

Owner

Finding

grep -rn 'export.*svg\|svg.*export' src/components/editor/ returns 0. The editor's ExportDialog (per #129) supports PES, DST, EXP, JEF — all machine-specific embroidery formats. SVG (the universal vector format) is not in the list.

A user with paths they've drawn:

Wants to use them in another tool (Inkscape, Illustrator, web design)
Has to import the PES into a converter tool (e.g., Ink/Stitch for Inkscape)
Loses fidelity through the conversion

A direct SVG export would write the paths' geometry as <path d="M x y L x y L x y Z" /> elements.

Where

ExportDialog: src/components/workspace/ExportDialog.tsx (formats: PES, DST, EXP, JEF)
No SVG export: grep -rn 'export.*svg' src/components/editor/ returns 0
The format list: per the snippet earlier (FORMATS: ExportFormat[] = ['PES', 'DST', 'EXP', 'JEF'])

Suggested fix shape

Format list: add 'SVG' to the FORMATS array:

const FORMATS: ExportFormat[] = ['PES', 'DST', 'EXP', 'JEF', 'SVG'];

Client function: add exportSVG to easystitch-client.ts:

export async function exportSVG(
  stitchObjects: ServiceStitchObject[],
  options: { fileName: string; fabricType?: string; hoopSize?: string }
): Promise<ExportResult> {
  // Convert stitchObjects to SVG path data
  const paths = stitchObjects.map((obj) => {
    const d = obj.nodes.map((n, i) => `${i === 0 ? 'M' : 'L'} ${n.x} ${n.y}`).join(' ');
    return `<path d="${d}" fill="${obj.color}" stroke="none" />`;
  });
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${hoopSize}">${paths.join('
')}</svg>`;
  return { blob: new Blob([svg], { type: 'image/svg+xml' }), format: 'SVG' };
}

Format descriptions: add SVG to FORMAT_DESCRIPTIONS:

SVG: 'Vector (universal)',

Format compatibility: SVG is always compatible (DST is the only one that's universal in embroidery).
UI: the format selector shows SVG as a 5th option.

Severity

Low. The user can convert via a tool. Power users with cross-tool workflows notice.

Discovered by

Gap analysis (2026-10-02) of editor export formats.

The SVG import (per #283) is the round-trip: import SVG, edit, export back to SVG.
The current export formats are all embroidery-machine-specific.
Figma/Illustrator's universal vector format is SVG. The editor's lack of it is a gap for users who want to use their paths elsewhere.

## Finding `grep -rn 'export.*svg\|svg.*export' src/components/editor/` returns 0. The editor's ExportDialog (per #129) supports PES, DST, EXP, JEF — all machine-specific embroidery formats. SVG (the universal vector format) is not in the list. A user with paths they've drawn: - Wants to use them in another tool (Inkscape, Illustrator, web design) - Has to import the PES into a converter tool (e.g., Ink/Stitch for Inkscape) - Loses fidelity through the conversion A direct SVG export would write the paths' geometry as `<path d="M x y L x y L x y Z" />` elements. ## Where - ExportDialog: `src/components/workspace/ExportDialog.tsx` (formats: PES, DST, EXP, JEF) - No SVG export: `grep -rn 'export.*svg' src/components/editor/` returns 0 - The format list: per the snippet earlier (`FORMATS: ExportFormat[] = ['PES', 'DST', 'EXP', 'JEF']`) ## Suggested fix shape 1. **Format list**: add 'SVG' to the FORMATS array: ```ts const FORMATS: ExportFormat[] = ['PES', 'DST', 'EXP', 'JEF', 'SVG']; ``` 2. **Client function**: add `exportSVG` to `easystitch-client.ts`: ```ts export async function exportSVG( stitchObjects: ServiceStitchObject[], options: { fileName: string; fabricType?: string; hoopSize?: string } ): Promise<ExportResult> { // Convert stitchObjects to SVG path data const paths = stitchObjects.map((obj) => { const d = obj.nodes.map((n, i) => `${i === 0 ? 'M' : 'L'} ${n.x} ${n.y}`).join(' '); return `<path d="${d}" fill="${obj.color}" stroke="none" />`; }); const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${hoopSize}">${paths.join(' ')}</svg>`; return { blob: new Blob([svg], { type: 'image/svg+xml' }), format: 'SVG' }; } ``` 3. **Format descriptions**: add SVG to FORMAT_DESCRIPTIONS: ```ts SVG: 'Vector (universal)', ``` 4. **Format compatibility**: SVG is always compatible (DST is the only one that's universal in embroidery). 5. **UI**: the format selector shows SVG as a 5th option. ## Severity Low. The user can convert via a tool. Power users with cross-tool workflows notice. ## Discovered by Gap analysis (2026-10-02) of editor export formats. ## Related - The SVG import (per #283) is the round-trip: import SVG, edit, export back to SVG. - The current export formats are all embroidery-machine-specific. - Figma/Illustrator's universal vector format is SVG. The editor's lack of it is a gap for users who want to use their paths elsewhere.

Mark added the

feature-request

triage-approved

labels

2026-10-04 03:43:03 +00:00

Mark referenced this issue

2026-10-04 03:55:22 +00:00

Editor's Path Properties section has no 'export path as SVG' affordance — user with a single path wanting to share it (e.g., as a logo component) has to save the whole design and export, no single-path export #346

Mark referenced this issue from a commit

2026-10-04 16:45:09 +00:00

fix(#284): export the design as SVG — universal vector round-trip

Mark commented

2026-10-04 16:45:56 +00:00

Author

Owner

Shipped via fix(#284) at commit 4172a90 on main. The Export dialog now offers SVG as a 5th format alongside PES/DST/EXP/JEF.

Implementation:

buildSVG(objects, hoopSize, catalog?) in src/lib/stitch-adapters.ts — emits closed <path d="M…L…L…Z" fill="…" /> elements from each visible workspace path, scaled from canvas pixels to millimeters and wrapped in an SVG sized to the active hoop (4x4 → 100×100mm, 5x7 → 130×180mm, etc.).
ExportDialog.exportRequest branches on format === "SVG" to call buildSVG instead of exportPES — SVG never reaches the easystitch service.
formatCompatible returns true for SVG (universal vector — no machine-family mismatch).
Hidden paths (visible: false) are skipped so the user's layers-panel intent travels with the export.

Verified:

tsc -b clean
eslint . clean
48/48 vitest pass on the touched files (7 new buildSVG tests, 1 new ExportDialog SVG-path test, plus existing assertions extended)
vite build succeeds

Round-trip with #283: a design imported from an SVG file on disk can now be exported back as SVG without fidelity loss through Ink/Stitch or any other converter.

Shipped via fix(#284) at commit 4172a90 on main. The Export dialog now offers SVG as a 5th format alongside PES/DST/EXP/JEF. Implementation: - `buildSVG(objects, hoopSize, catalog?)` in `src/lib/stitch-adapters.ts` — emits closed `<path d="M…L…L…Z" fill="…" />` elements from each visible workspace path, scaled from canvas pixels to millimeters and wrapped in an SVG sized to the active hoop (4x4 → 100×100mm, 5x7 → 130×180mm, etc.). - `ExportDialog.exportRequest` branches on `format === "SVG"` to call `buildSVG` instead of `exportPES` — SVG never reaches the easystitch service. - `formatCompatible` returns `true` for SVG (universal vector — no machine-family mismatch). - Hidden paths (`visible: false`) are skipped so the user's layers-panel intent travels with the export. Verified: - `tsc -b` clean - `eslint .` clean - 48/48 vitest pass on the touched files (7 new buildSVG tests, 1 new ExportDialog SVG-path test, plus existing assertions extended) - `vite build` succeeds Round-trip with #283: a design imported from an SVG file on disk can now be exported back as SVG without fidelity loss through Ink/Stitch or any other converter.

Mark closed this issue

2026-10-04 16:46:02 +00:00