やり方

旗の全体か切り抜きかを選ぶ

枠用の絵の読み込みと、手元のSVGの枠を分けます。

標準のAPIを使う

import { frame,aspectOf } from "@johnmorrisdotca/hata";
import usa from "@johnmorrisdotca/hata/flags/us";
import { flag } from "@johnmorrisdotca/hata/load";
const round=frame(usa,{shape:"round",fit:"whole"});
console.log(round===null?null:aspectOf(round));
console.log((await flag("CA",{shape:"1:1",fit:"auto"}))?.startsWith("<svg"));

1
true

frame(svg)は渡した絵だけを扱い、flag(code,{shape})は正方形や4:3用の絵を選べます。どちらも引き伸ばしません。whole（containも同じ）は帯や円の背景で全体を保ちます。cropは選んだ側を使って枠を満たし、autoが全体を選ぶ場合にも切り抜きます。

枠への収め方を選ぶ

autoは収録した絵の記録に従い、不明なSVGは全体を表示します。coverは中心、hoistは旗竿側を保ちます。色や紋章が欠ける切り抜きには、資料の理由を保ちます。元の枠の判断で読めます。形のflagは本来の比率で、作成画面ではownと呼びます。

ソースを見る GitHub で編集@johnmorrisdotca/hata 1.6.0 のソースから作成しました。

この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。