arcs: "svg": the same drawing, a fraction of the bytes

[
  "baseball little league     26 KB ->   2.5 KB",
  "basketball fiba          91.6 KB ->   7.1 KB",
  "curling curling canada   30.4 KB ->   3.4 KB",
  "football cfl             65.2 KB ->  65.2 KB",
  "hockey ahl              446.6 KB ->  32.6 KB",
  "lacrosse ncaam          146.5 KB ->  51.7 KB",
  "soccer epl               86.5 KB ->   4.8 KB",
  "tennis atp                2.3 KB ->   2.3 KB",
  "volleyball fivb           3.7 KB ->   3.7 KB"
]

import { SPORTS, leagues, surface } from "@sportsdataverse/sporty";
import { toSVG } from "@sportsdataverse/sporty/svg";

// By default every arc is written point by point (200 per arc). `arcs: "svg"` finds the points that lie on
// one circle and writes them as a single SVG arc command; the drawing is the same. Football, tennis and
// volleyball surfaces have no arcs, so they do not change.
const kb = (s: string): number => Math.round(new TextEncoder().encode(s).length / 102.4) / 10;

SPORTS.map((sport) => {
  const league = leagues(sport).find((l) => l !== "custom") ?? "";
  const scene = surface(sport, league);
  const sampled = kb(toSVG(scene));
  const arcs = kb(toSVG(scene, { arcs: "svg" }));
  return `${`${sport} ${league}`.padEnd(22)} ${String(sampled).padStart(6)} KB -> ${String(arcs).padStart(5)} KB`;
});

Tags: toSVG · svg · arcs. All sporty examples.