🏠 back to Observable

Custom Fonts inside SVGs


#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!


#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)


#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:


Embedding external svg's?
#6

Thank you @mootari!