question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Glyph.toSVG or Path.toSVG?

See original GitHub issue

Is there any API for converting glyphs or paths to SVG, instead of drawing them onto a context? Especially on the Node side of things these are relatively necessary (glyph lookup REST servers, for instance).

I can trivially implement one as

function toSVG(path) {
  return path.commands.map(function(v) { return [v.type, v.x, v.y].join(' '); }).join(' ');
}

but having it built in would be very nice, especially if it came with an option to round outline fractionals to however-many-decimal-places.

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
Pomaxcommented, Jun 19, 2015

As per https://github.com/nodebox/opentype.js/issues/128, the above function doesn’t work. However, this does:

var Interpreter = function() {
  this.stack = [];
};

Interpreter.prototype = {
  beginPath: function() {},
  moveTo: function(x,y) {
    this.stack.push(["M", x, y].join(" "));
  },
  lineTo: function(x,y) {
    this.stack.push(["L", x, y].join(" "));
  },
  quadraticCurveTo: function(x1, y1, x, y) {
    this.stack.push(["Q", x1, y1, x, y].join(" "));
  },
  cubicCurveTo: function(x1, y1, x2, y2, x, y) {
    this.stack.push(["C", x1, y1, x2, y2 x, y].join(" "));
  },
  closePath: function() {
    this.stack.push("Z");
  },
  fill: function(f) {
    this.fillStyle = f;
  },
  stroke: function(s) {
    this.strokeStyle = s;
  },
  toPath: function() {
    return this.stack.join(" ");
  }
};

And then feeding that into a draw call, to draw “to string” rather than to a canvas:

var path = font.getPath(id, size*idx, size, size);
var interpreter = new Interpreter();
path.draw(interpreter);
var svgPath = interpreter.toPath();
0reactions
VivaRadocommented, Nov 26, 2022
Read more comments on GitHub >

github_iconTop Results From Across the Web

Convert Glyph path to SVG - Stack Overflow
Take the raw drawing data, put it in a path element, remove the glyph specific attributes, add an appropriate viewBox.
Read more >
SVG Glyphs to Paths Converter
Convert SVG font glyphs to SVGs in a SPRITE2 or ZIP file. Visit this Scratch forum post for instructions. Type the charset you...
Read more >
how to convert font's glyphs to svg or png ? · Issue #492 - GitHub
I find the ttf file has 13 glyphs ,which is the same both in opentype.js and other ttf editor software (eg. FontCreator).
Read more >
How to convert icons from fonts to separate svg files
How to convert icons from fonts to separate svg files · 1) Use the same font in the newly created rich editor. ·...
Read more >
<glyph> - SVG: Scalable Vector Graphics - MDN Web Docs
A <glyph> defines a single glyph in an SVG font. Usage context. Categories, Text content element. Permitted content, Any number of the following...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found