Path.fromSvg()

[palmavilluan]

I have created svg elements using the p5.js-svg librarie. Now i want to convert the svgs into paths so i can create glyphs with it. and the push the glyphs into a new fontfile. In the README file i found the Path.fromSVG() method whitch i think would do exactly what i try to do.
Im using the following script tag to load opentype.js:

<script src="https://cdnjs.cloudflare.com/ajax/libs/opentype.js/1.3.4/opentype.min.js" integrity="sha512-Ro+jjHMdfC0ZYcLjWhxVxZtGWFbIGsfvZbVCU3EYCr/aP4dIyzHkSeuhF3wQHb43wz2UCs0M7o16+lAC3/muYA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Expected Behavior

I was expecting that the function gives me a Path whitch i can use to create a new Glyph. And then push the Glyphs in to a new Font File.

Current Behavior

However when im running my code i get the error that “Path.fromSVG is not a function”. I have logged the Path object to the console and look at the provided prototype functions. and fromSVG is not in this list.

Possible Solution

In the opentype.js repository under /src i have found the path.js file in whitch i have found a fromSVG() function. So probably it dont work because i have linked to cdn instead of downloading opentype.js and so the path.js file isnt available in the browser.

Another possible reason could be that the fromSVG() function is still work in progress and not yet published in the opetype.min.js 1.3.4.

How can i solve my Problem?

Im Happy for every Help/Suggestions;)

[palmavilluan]

I just tried again and i realized that im still not able to call the fromSVG function on the Path object. I am still using the following script tag to load opentype.js:

<script src="https://cdnjs.cloudflare.com/ajax/libs/opentype.js/1.3.4/opentype.min.js" integrity="sha512-Ro+jjHMdfC0ZYcLjWhxVxZtGWFbIGsfvZbVCU3EYCr/aP4dIyzHkSeuhF3wQHb43wz2UCs0M7o16+lAC3/muYA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

The Path.fromSVG() function whitch is already described in the readme doesnt seems to exist in the current published version of opentype. So i have searched for it in the src folder of the GitHub Repo. I found the following function in the path.js file:
`Path.prototype.fromSVG = function(pathData, options = {}) {
if (typeof SVGPathElement !== 'undefined' && pathData instanceof SVGPathElement) {
pathData = pathData.getAttribute('d');
}

// set/merge default options
options = createSVGParsingOptions(options);

this.commands = [];

// TODO: a generator function could possibly increase performance and reduce memory usage,
// but our current build process doesn't allow to use those yet.
const number = '0123456789';
const supportedCommands = 'MmLlQqCcZzHhVv';
const unsupportedCommands = 'SsTtAa';
const sign = '-+';

let command = {};
let buffer = [''];

let isUnexpected = false;

function parseBuffer(buffer) {
    return buffer.filter(b => b.length).map(b => {
        let float = parseFloat(b);
        if (options.decimalPlaces || options.decimalPlaces === 0) {
            float = roundDecimal(float, options.decimalPlaces);
        }
        return float;
    });
}

function makeRelative(buffer) {
    if (!this.commands.length) {
        return buffer;
    }
    const lastCommand = this.commands[this.commands.length - 1];
    for (let i = 0; i < buffer.length; i++) {
        buffer[i] += lastCommand[i & 1 ? 'y' : 'x'];
    }
    return buffer;
}

function applyCommand() {
    // ignore empty commands
    if (command.type === undefined) {
        return;
    }
    const commandType = command.type.toUpperCase();
    const relative = commandType !== 'Z' && command.type.toUpperCase() !== command.type;
    let parsedBuffer = parseBuffer(buffer);
    buffer = [''];
    if (!parsedBuffer.length && commandType !== 'Z') {
        return;
    }
    if (relative && commandType !== 'H' && commandType !== 'V') {
        parsedBuffer = makeRelative.apply(this, [parsedBuffer]);
    }

    const currentX = this.commands.length ? this.commands[this.commands.length - 1].x || 0 : 0;
    const currentY = this.commands.length ? this.commands[this.commands.length - 1].y || 0 : 0;

    switch (commandType) {
        case 'M':
            this.moveTo(...parsedBuffer);
            break;
        case 'L':
            this.lineTo(...parsedBuffer);
            break;
        case 'V':
            // multiple values interpreted as consecutive commands
            for (let i = 0; i < parsedBuffer.length; i++) {
                let offset = 0;
                if (relative) {
                    offset = this.commands.length ? (this.commands[this.commands.length - 1].y || 0) : 0;
                }
                this.lineTo(currentX, parsedBuffer[i] + offset);
            }
            break;
        case 'H':
            // multiple values interpreted as consecutive commands
            for (let i = 0; i < parsedBuffer.length; i++) {
                let offset = 0;
                if (relative) {
                    offset = this.commands.length ? (this.commands[this.commands.length - 1].x || 0) : 0;
                }
                this.lineTo(parsedBuffer[i] + offset, currentY);
            }
            break;
        case 'C':
            this.bezierCurveTo(...parsedBuffer);
            break;
        case 'Q':
            this.quadraticCurveTo(...parsedBuffer);
            break;
        case 'Z':
            if (this.commands.length < 1 || this.commands[this.commands.length - 1].type !== 'Z') {
                this.close();
            }
            break;
    }

    if (this.commands.length) {
        for (const prop in this.commands[this.commands.length - 1]) {
            if (this.commands[this.commands.length - 1][prop] === undefined) {
                this.commands[this.commands.length - 1][prop] = 0;
            }
        }
    }
}

for (let i = 0; i < pathData.length; i++) {
    const token = pathData.charAt(i);
    const lastBuffer = buffer[buffer.length - 1];
    if (number.indexOf(token) > -1) {
        buffer[buffer.length - 1] += token;
    } else if (sign.indexOf(token) > -1) {
        if (!command.type && !this.commands.length) {
            command.type = 'L';
        }

        if (token === '-') {
            if (!command.type || lastBuffer.indexOf('-') > 0) {
                isUnexpected = true;
            } else if (lastBuffer.length) {
                buffer.push('-');
            } else {
                buffer[buffer.length - 1] = token;
            }
        } else {
            if (!command.type || lastBuffer.length > 0) {
                isUnexpected = true;
            } else {
                continue;
            }
        }
    } else if (supportedCommands.indexOf(token) > -1) {
        if (command.type) {
            applyCommand.apply(this);
            command = { type: token };
        } else {
            command.type = token;
        }
    } else if (unsupportedCommands.indexOf(token) > -1) {
        // TODO: try to interpolate commands not directly supported?
        throw new Error('Unsupported path command: ' + token + '. Currently supported commands are ' + supportedCommands.split('').join(', ') + '.');
    } else if (' ,\t\n\r\f\v'.indexOf(token) > -1) {
        buffer.push('');
    } else if (token === '.') {
        if (!command.type || lastBuffer.indexOf(token) > -1) {
            isUnexpected = true;
        } else {
            buffer[buffer.length - 1] += token;
        }
    } else {
        isUnexpected = true;
    }

    if (isUnexpected) {
        throw new Error('Unexpected character: ' + token + ' at offset ' + i);
    }
}
applyCommand.apply(this);

if (options.optimize) {
    this.commands = optimizeCommands(this.commands);
}

const flipY = options.flipY;
let flipYBase = options.flipYBase;
if (flipY === true && options.flipYBase === undefined) {
    const boundingBox = this.getBoundingBox();
    flipYBase = boundingBox.y1 + boundingBox.y2;
}
// apply x/y offset, flipping and scaling
for (const i in this.commands) {
    const cmd = this.commands[i];
    for (const prop in cmd) {
        if (['x', 'x1', 'x2'].includes(prop)) {
            this.commands[i][prop] = options.x + cmd[prop] * options.scale;
        } else if (['y', 'y1', 'y2'].includes(prop)) {
            this.commands[i][prop] = options.y + (flipY ? flipYBase - cmd[prop] : cmd[prop]) * options.scale;
        }
    }
}

return this;

};

/**

• Generates a new Path() from an SVG path element or path notation
• @param {string|SVGPathElement}
• @param {object}
  */
  Path.fromSVG = function(path, options) {
  const newPath = new Path();
  return newPath.fromSVG(path, options);
  };`

Am i Right with my suggestion? Is it already foreseeable when a new version of OpenType.js will be released, in which the fromSVG() function will be available?

[Connum]

Are you running the latest version from the master branch? Because I think that function wasn't available in the last official release yet.

[ILOVEPIE]

<script src="https://cdnjs.cloudflare.com/ajax/libs/opentype.js/1.3.4/opentype.min.js" integrity="sha512-Ro+jjHMdfC0ZYcLjWhxVxZtGWFbIGsfvZbVCU3EYCr/aP4dIyzHkSeuhF3wQHb43wz2UCs0M7o16+lAC3/muYA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
@Connum 1.3.4 so no.

[ILOVEPIE]

@palmavilluan either wait for 2.0.0 or use the master branch