benjamminf / warpjs

Warp, distort, bend, twist and smudge your SVG’s directly in the browser
https://benjamminf.github.io/warpjs
MIT License
486 stars 34 forks source link

Q: passing warp a path or a glyph from a svg font, instead of a full svg. #14

Closed plagasul closed 3 years ago

plagasul commented 5 years ago

This is a question, not an issue. I would like to use warp on a single glyph from a .svg font, in a node script.

Right now I am loading the .svg font file as a string, looping over the glyphs, and doing things to each glyph's 'd' parameter data. This is the path that draws the glyph.

I would like to pass either the path(as string) or the glyph (as a string) to the warp object, manipulate it, and then return the path/glyp (still as string) so I can update it on the string that represents the font file and then write it to disk.

Can this be done, or does warp need the full svg? Also, can I pass string to warp, and how do I return it or update it ?

Thank you

plagasul commented 5 years ago

This is a shortened example of how the script works, I am using cheerio .

const cheerio = require('cheerio');
const args = process.argv.slice(2);
var fs = require('fs');
var svg2ttf = require('svg2ttf');

fs.readFile(args[0], function read(err, data) {
    if (err) {
        throw err;
    }

    // convert to string and pass to cheerio 
    var svgFont = data.toString();
    const $ = cheerio.load(svgFont, {
        normalizeWhitespace: true,
        xmlMode: true
    });

    // loop all glyph tags
    $("glyph").each(function(i,el){
        var path = $(this).attr("d"); // the glyph's path
        //
        // DO THE WARP TO THE PATH???
        //
        $(this).attr("d", path); // update it
    })

    // update the svg font string data as xml
    svgFont = $.xml(); 

    // write the font to disk as ttf
    var ttf = svg2ttf(svgFont, {});
    fs.writeFileSync(args[1], new Buffer(ttf.buffer));
}
jboarman commented 5 years ago

Note that I don't currently see how to work with warpjs without it being done in a browser. I've tried a few Node DOM parsers like JSDOM and domino, and no luck so far. There are dependencies on SVG dom elements that don't appear to be available in these server-side DOMs. I doubt Cheerio/htmlparser2 is much different.

Maybe @benjamminf has some thoughts on how one could use this library server side as it seems I'm not alone in needing this.

benjamminf commented 4 years ago

Bit late to the party here. But @jboarman you're right in this isn't very easily usable outside of the web browser. I had enough foresight to separate out the DOM-specific code from the algorithmic code, so you can get it to run in Node.js with a bit (or a lot) of bending. https://github.com/benjamminf/warpjs/tree/master/src/path contains all the code to parse/encode path strings, interpolate paths with points, and transform them with your custom transformer.

The things you'll be missing though are converting non-path elements to path elements, which is done in https://github.com/benjamminf/warpjs/blob/master/src/svg/normalize.js