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

New issue

Closed

opened 2026-10-04 03:55:22 +00:00 by Mark · 0 comments

Mark commented

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

Owner

Finding

grep -rn 'exportPath\|exportSelectedPath' src/components/editor/ returns 0. The editor has no single-path export.

A user with a design:

Has 5 paths, only cares about 1
Wants to export that 1 path as a separate SVG
Currently: has to save the whole design, open the SVG in Inkscape, delete the other 4 paths, save

The fix is a "Export this path" affordance on the per-path row.

Where

Path list row: src/components/editor/EditorRightPanel.tsx (per-row actions)
No path export: grep -rn 'exportPath' src/components/editor/ returns 0
The full design export: src/components/workspace/ExportDialog.tsx (PES/DST/EXP/JEF/SVG per #284)

Suggested fix shape

UI: a "..." button in the path list row that has an "Export as SVG" item:

<DropdownMenuItem onClick={() => onExportPath(p.id)}>
  <FileDown size={12} /> Export as SVG
</DropdownMenuItem>

Implementation: serialize the single path's nodes to SVG path data:

const onExportPath = (pathId: string) => {
  const path = paths.find((p) => p.id === pathId);
  if (!path) return;
  const d = path.nodes.map((n, i) => `${i === 0 ? 'M' : 'L'} ${n.x} ${n.y}`).join(' ');
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="${d}" stroke="${path.threadColor}" fill="none" /></svg>`;
  const blob = new Blob([svg], { type: 'image/svg+xml' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `${path.name || 'path'}.svg`;
  a.click();
  URL.revokeObjectURL(url);
};

Use cases:

Sharing a single design element
Using a path in another tool
Creating a reusable component

Severity

Low. The user can copy the design. Power users with reusable components notice.

Discovered by

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

#284 (open) — Full design SVG export. The per-path is the smaller scope.
The full design export (per #129) is the workspace's ExportDialog.
Figma/Illustrator have "Export selection" with format options. The editor's per-path is the parallel.

## Finding `grep -rn 'exportPath\|exportSelectedPath' src/components/editor/` returns 0. The editor has no single-path export. A user with a design: - Has 5 paths, only cares about 1 - Wants to export that 1 path as a separate SVG - Currently: has to save the whole design, open the SVG in Inkscape, delete the other 4 paths, save The fix is a "Export this path" affordance on the per-path row. ## Where - Path list row: `src/components/editor/EditorRightPanel.tsx` (per-row actions) - No path export: `grep -rn 'exportPath' src/components/editor/` returns 0 - The full design export: `src/components/workspace/ExportDialog.tsx` (PES/DST/EXP/JEF/SVG per #284) ## Suggested fix shape 1. **UI**: a "..." button in the path list row that has an "Export as SVG" item: ```tsx <DropdownMenuItem onClick={() => onExportPath(p.id)}> <FileDown size={12} /> Export as SVG </DropdownMenuItem> ``` 2. **Implementation**: serialize the single path's nodes to SVG path data: ```ts const onExportPath = (pathId: string) => { const path = paths.find((p) => p.id === pathId); if (!path) return; const d = path.nodes.map((n, i) => `${i === 0 ? 'M' : 'L'} ${n.x} ${n.y}`).join(' '); const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="${d}" stroke="${path.threadColor}" fill="none" /></svg>`; const blob = new Blob([svg], { type: 'image/svg+xml' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `${path.name || 'path'}.svg`; a.click(); URL.revokeObjectURL(url); }; ``` 3. **Use cases**: - Sharing a single design element - Using a path in another tool - Creating a reusable component ## Severity Low. The user can copy the design. Power users with reusable components notice. ## Discovered by Gap analysis (2026-10-02) of editor export affordances. ## Related - #284 (open) — Full design SVG export. The per-path is the smaller scope. - The full design export (per #129) is the workspace's ExportDialog. - Figma/Illustrator have "Export selection" with format options. The editor's per-path is the parallel.