Custom Fonts inside SVGs

Community Help
1

Hi, two questions here:

First, is there a way to embed custom fonts into the SVG? I know how to get custom fonts to the page, but when I try to save the svg as a png, it shows up as the default font. Observe:

CloudApp

I have tried including a <defs> tag inside the svg (from this note), but that doesn’t seem to work — at least, not on Observable.

Any thoughts?

Second, I dig Mike’s save-svg-as-png function… does anyone know how to get it to save @2x?

Thanks so much!

1 Like
2

I don’t know, but I have the same problem!

3

I’m not sure how to embed custom fonts, but this quick edit of rasterize should save at 2x:

function rasterize(svg) {
  const scale = 2;
  let resolve, reject;
  const promise = new Promise((y, n) => (resolve = y, reject = n));
  const image = new Image;
  image.onerror = reject;
  image.onload = () => {
    const rect = svg.getBoundingClientRect();
    const context = DOM.context2d(scale*rect.width, scale*rect.height);
    context.drawImage(image, 0, 0, scale*rect.width, scale*rect.height);
    context.canvas.toBlob(resolve);
  };
  image.src = URL.createObjectURL(serialize(svg));
  return promise;
}

(just replace the rasterize cell in https://beta.observablehq.com/@mbostock/saving-svg with this one)

2 Likes
4

Thanks so much!

That answers my second question…

If anyone can still address my first question (re: embedding custom fonts within svg that can be rasterized), much appreciated!

5

Certainly! :wink:

7 Likes
6

Thank you @mootari!