Download as PNG + import {rasterize, serialize} from "@mbostock/saving-svg"

[BMPMS]

Hi there...

I can't work this out.

• Download as PNG works perfectly for me EXCEPT it adds padding so my images aren't the exact proportions I need
• rasterize (from the import link) has no padding so perfect BUT the font isn't working.

I'm getting the font via 2 html cells

html<style> @import url('https://db.onlinewebfonts.com/c/cd1a1ecc7f4fb10382ee628185851756?family=PetitaMedium'); @import url('https://db.onlinewebfonts.com/c/c4472a3c62119358ca3d0b7ae69622da?family=PetitaBold'); @import url('https://db.onlinewebfonts.com/c/99090440904a69f285b7be20695f482d?family=PetitaLight'); </style>:contentReference[oaicite:42]{index=42}

style = html`

<style> body, svg { font-family: 'PetitaLight', sans-serif; } </style>

`
I'm sure it must be a one liner but I can't seem to work it out.

[Fil]

Are you using notebooks or is it in a framework project?

[BMPMS]

Sorry - I'm using notebooks.

[Fil]

Do you mind cropping the resulting image to remove the padding? This should be fairly easy to automate in a notebook.

We're padding the image because the contents often overflow their dimensions (in particular D3's color legends).

[BMPMS]

Makes sense. Just trying to do a very specific one off task.. I've managed to solve it by adding the following to your serialize function.

const style = document.createElementNS(svgns, "style");
style.setAttribute("type", "text/css");
style.textContent = `
body, svg {
    font-family: 'PetitaLight', sans-serif;

}
`;
svg.insertBefore(style, svg.firstChild);