phauer / svg-buddy

Command line tool to embed fonts into SVG files
MIT License
45 stars 2 forks source link

Why does it require Google fonts? #6

Open rikoe opened 3 years ago

rikoe commented 3 years ago

Is there a specific reason for this restriction? My SVG file contains the URL where to download the font, so arguably there is no reason it can't just retrieve that?

  <defs>
    <style>
      @font-face {
        font-family: "Virgil";
        src: url("https://excalidraw.com/Virgil.woff2");
      }
      @font-face {
        font-family: "Cascadia";
        src: url("https://excalidraw.com/Cascadia.woff2");
      }
    </style>
  </defs>
Timmmm commented 2 years ago

I ran into exactly the same issue, while also trying to use Excalidraw fonts. It seems like a tool that literally just inlines fonts does not exist. I ended up manually downloading those two fonts and writing a hacky script to insert them:

#!/usr/bin/env deno run --allow-read --allow-write

import { encode as base64Encode } from "https://deno.land/std/encoding/base64.ts";

function main() {
  const virgil = Deno.readFileSync("Virgil.woff2");
  const virgilUri = "data:application/x-font-woff2;base64," + base64Encode(virgil);
  const cascadia = Deno.readFileSync("Cascadia.woff2");
  const cascadiaUri = "data:application/x-font-woff2;base64," + base64Encode(cascadia);

  for (const filename of Deno.args) {
    let svg = Deno.readTextFileSync(filename);
    svg = svg.replace("https://excalidraw.com/Virgil.woff2", virgilUri);
    svg = svg.replace("https://excalidraw.com/Cascadia.woff2", cascadiaUri);
    Deno.writeTextFileSync(filename, svg);
  }
}

main();

You can use it like this:

  1. Install Deno
  2. wget https://excalidraw.com/Virgil.woff2
  3. wget https://excalidraw.com/Cascadia.woff2
  4. chmod +x thatscript.ts
  5. ./thatscript.ts your_drawing.svg

It also sucks because it also includes the entire font even though only a few characters are probably used. My SVG goes from 21 kB to 213 kB. Not ideal but it could be worse.

chipsenkbeil commented 1 year ago

To follow up here, you can manually download the fonts and place them in your cache directory to avoid downloading from Google. I had to do this because the tool now fails with a 503 error when trying to download any font.

On Mac, this is located in ~/.svg-buddy/. Specifically, for an svg created using Excalidraw, I downloaded the woff2 files and zipped them individually such that I had:

~/.svg-buddy/cascadia.zip
~/.svg-buddy/segoe-ui-emoji.zip
~/.svg-buddy/virgil.zip

Optimized size is still quite large with 9.7KB file becoming 203KB.