microsoft / microsoft/maker.js

SVG Import - some paths fail to import

Open
#341 11 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement help wanted
Dominant language
TypeScript
Stars
2k
Forks
302
Avg merge
21h 28m
Merged PRs (30d)
5

Description

Hi,

I noticed makerJs sometimes failed to import some SVG paths generated by other libraries.

M 0 0 L 10 0 will import ok.
M 0 0 10 0 will fail to import.

The SVG Move Path command spec mentions:

Move the begining of the next subpath to the coordinate x,y. All subsequente pair of coordinates are considered implicite absolute LineTo (L) command.

I suspect the SVG Importer is not handling this part of the spec.

Simple demo below (can copy and paste into https://maker.js.org/playground):

var makerjs = require('makerjs');

// Draw a square from origin 0,0 with sides of 10 units.
// Equivalent to:
// <svg xmlns="http://www.w3.org/2000/svg">
//     <path stroke="red" fill="none" d="M 0 0 L 10 0"/>
//     <path stroke="red" fill="none" d="M 10,0 L 10,10"/>
//     <path stroke="red" fill="none" d="M 10 10 0 10"/>
//     <path stroke="red" fill="none" d="M 0,10 0,0"/>
// </svg>

var svgTestPaths = 
{
    path1: "M 0 0 L 10 0",    // Top    (ok)
    path2: "M 10,0 L 10,10",  // Right  (ok) 
    path3: "M 10 10 0 10",    // Bottom (failed)
    path4: "M 0,10 0,0"       // Left   (failed)
};

this.models = 
{
    path1: makerjs.importer.fromSVGPathData(svgTestPaths.path1),
    path2: makerjs.importer.fromSVGPathData(svgTestPaths.path2),
    path3: makerjs.importer.fromSVGPathData(svgTestPaths.path3),
    path4: makerjs.importer.fromSVGPathData(svgTestPaths.path4)
};

this.notes = 
[
	'# SVG path import test',
	'Draw four sides of a square using various SVG Path syntax. ' + 
    'Note the bottom and left paths fail to import'
].join('\n');

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the makerjs.importer.fromSVGPathData entry point and trace how SVG move-path coordinates are parsed. Use the provided path3 and path4 reproduction alongside the explicit-L examples. Done means repeated coordinate pairs after an M command import as line segments and both shorthand paths produce the expected square sides.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.