Skip to the content

Hata旗

Load a native country or region flag, choose supported framing and keep each drawing’s source, author and licence.

Hata (旗) is Japanese for a flag. About the name

Contents

Reference · Codes, URLs and SVG helpers

framefunction

A flag framed in another shape without stretching it: at its own aspect ratio, at 4:3, square, or in a circle. The flag is nested, whole, inside a new SVG of the frame's shape, and its own viewBox and preserveAspectRatio place it: by default (fit: "auto") the way measured for that flag to keep its colours, so Canada's square shows the whole flag rather than a crop that drops its red bars, and Japan's is cropped to the disc; crop crops at the side chosen for the flag, cover from the centre, hoist from the pole, and whole (or contain) shows all of it. The result is an SVG string like any flag's, with no width or height, so it fills the box it is put in.

With shape: "flag" and no label, the flag is handed back as it was.

Import it

import { frame } from "@johnmorrisdotca/hata";

Definition

function frame(svg: string, options?: FrameOptions): string | null

Parameters

NameTypeDescription
svgstring

A flag's SVG string, from /flags/<code> or flag().

options (optional)FrameOptions

shape ("flag", "4:3", "1:1" or "round"; "flag" when left out), fit ("auto", "whole", "crop", "cover", "hoist" or "contain"; "auto" when left out) and label, a name for assistive technology.

Returns

string | null

The framed SVG string, or null when svg is not an SVG with a viewBox.

Examples

import { frame } from "@johnmorrisdotca/hata";
import canada from "@johnmorrisdotca/hata/flags/ca";

console.log(frame(canada, { shape: "round" }));                    // the whole flag on a neutral disc: a crop would lose its bars
console.log(frame(canada, { shape: "round", fit: "cover" }));      // a circle, the maple leaf in the middle
console.log(frame(canada, { shape: "4:3", fit: "whole" }));        // all of the 1:2 flag, with bands above and below
console.log(frame(canada, { shape: "1:1", fit: "crop" }));         // the centre crop, because a crop was asked for by name
console.log(frame(canada, { label: "Canada" }));                   // the flag, with role="img" and a title
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><clipPath id="hata-round-12ton6c"><circle cx="256" cy="256" r="256"/></clipPath></defs><g clip-path="url(#hata-round-12ton6c)"><circle cx="256" cy="256" r="256" fill="#e6e6e6"/><svg data-hata="ca" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9600 4800" x="27.03" y="141.51" width="457.95" height="228.97" preserveAspectRatio="xMidYMid meet"><title>Flag of Canada (Pantone colours)</title><path fill="#d52b1e" d="M0 0h2400l99 99h4602l99-99h2400v4800H7200l-99-99H2499l-99 99H0z"/><path fill="#fff" d="M2400 0h4800v4800H2400zm2490 4430-45-863a95 95 0 0 1 111-98l859 151-116-320a65 65 0 0 1 20-73l941-762-212-99a65 65 0 0 1-34-79l186-572-542 115a65 65 0 0 1-73-38l-105-247-423 454a65 65 0 0 1-111-57l204-1052-327 189a65 65 0 0 1-91-27l-332-652-332 652a65 65 0 0 1-91 27l-327-189 204 1052a65 65 0 0 1-111 57l-423-454-105 247a65 65 0 0 1-73 38l-542-115 186 572a65 65 0 0 1-34 79l-212 99 941 762a65 65 0 0 1 20 73l-116 320 859-151a95 95 0 0 1 111 98l-45 863z"/></svg></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><clipPath id="hata-round-tqhznh"><circle cx="256" cy="256" r="256"/></clipPath></defs><g clip-path="url(#hata-round-tqhznh)"><svg data-hata="ca" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9600 4800" x="0" y="0" width="512" height="512" preserveAspectRatio="xMidYMid slice"><title>Flag of Canada (Pantone colours)</title><path fill="#d52b1e" d="M0 0h2400l99 99h4602l99-99h2400v4800H7200l-99-99H2499l-99 99H0z"/><path fill="#fff" d="M2400 0h4800v4800H2400zm2490 4430-45-863a95 95 0 0 1 111-98l859 151-116-320a65 65 0 0 1 20-73l941-762-212-99a65 65 0 0 1-34-79l186-572-542 115a65 65 0 0 1-73-38l-105-247-423 454a65 65 0 0 1-111-57l204-1052-327 189a65 65 0 0 1-91-27l-332-652-332 652a65 65 0 0 1-91 27l-327-189 204 1052a65 65 0 0 1-111 57l-423-454-105 247a65 65 0 0 1-73 38l-542-115 186 572a65 65 0 0 1-34 79l-212 99 941 762a65 65 0 0 1 20 73l-116 320 859-151a95 95 0 0 1 111 98l-45 863z"/></svg></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480"><svg data-hata="ca" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9600 4800" x="0" y="0" width="640" height="480" preserveAspectRatio="xMidYMid meet"><title>Flag of Canada (Pantone colours)</title><path fill="#d52b1e" d="M0 0h2400l99 99h4602l99-99h2400v4800H7200l-99-99H2499l-99 99H0z"/><path fill="#fff" d="M2400 0h4800v4800H2400zm2490 4430-45-863a95 95 0 0 1 111-98l859 151-116-320a65 65 0 0 1 20-73l941-762-212-99a65 65 0 0 1-34-79l186-572-542 115a65 65 0 0 1-73-38l-105-247-423 454a65 65 0 0 1-111-57l204-1052-327 189a65 65 0 0 1-91-27l-332-652-332 652a65 65 0 0 1-91 27l-327-189 204 1052a65 65 0 0 1-111 57l-423-454-105 247a65 65 0 0 1-73 38l-542-115 186 572a65 65 0 0 1-34 79l-212 99 941 762a65 65 0 0 1 20 73l-116 320 859-151a95 95 0 0 1 111 98l-45 863z"/></svg></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><svg data-hata="ca" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9600 4800" x="0" y="0" width="512" height="512" preserveAspectRatio="xMidYMid slice"><title>Flag of Canada (Pantone colours)</title><path fill="#d52b1e" d="M0 0h2400l99 99h4602l99-99h2400v4800H7200l-99-99H2499l-99 99H0z"/><path fill="#fff" d="M2400 0h4800v4800H2400zm2490 4430-45-863a95 95 0 0 1 111-98l859 151-116-320a65 65 0 0 1 20-73l941-762-212-99a65 65 0 0 1-34-79l186-572-542 115a65 65 0 0 1-73-38l-105-247-423 454a65 65 0 0 1-111-57l204-1052-327 189a65 65 0 0 1-91-27l-332-652-332 652a65 65 0 0 1-91 27l-327-189 204 1052a65 65 0 0 1-111 57l-423-454-105 247a65 65 0 0 1-73 38l-542-115 186 572a65 65 0 0 1-34 79l-212 99 941 762a65 65 0 0 1 20 73l-116 320 859-151a95 95 0 0 1 111 98l-45 863z"/></svg></svg>
<svg data-hata="ca" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9600 4800" role="img" aria-label="Canada"><title>Canada</title><title>Flag of Canada (Pantone colours)</title><path fill="#d52b1e" d="M0 0h2400l99 99h4602l99-99h2400v4800H7200l-99-99H2499l-99 99H0z"/><path fill="#fff" d="M2400 0h4800v4800H2400zm2490 4430-45-863a95 95 0 0 1 111-98l859 151-116-320a65 65 0 0 1 20-73l941-762-212-99a65 65 0 0 1-34-79l186-572-542 115a65 65 0 0 1-73-38l-105-247-423 454a65 65 0 0 1-111-57l204-1052-327 189a65 65 0 0 1-91-27l-332-652-332 652a65 65 0 0 1-91 27l-327-189 204 1052a65 65 0 0 1-111 57l-423-454-105 247a65 65 0 0 1-73 38l-542-115 186 572a65 65 0 0 1-34 79l-212 99 941 762a65 65 0 0 1 20 73l-116 320 859-151a95 95 0 0 1 111 98l-45 863z"/></svg>

What it prints (run when this page was built)

View sourceEdit on GitHubMade from the source of @johnmorrisdotca/hata 1.6.0.