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 · CH-SG flag SVG

defaultconstant

The flag of St. Gallen (ザンクト・ガレン州), CH-SG, as an SVG string: viewBox 419.5 by 419.5 (1:1), 1.0 KB. From Wikimedia Commons, "Flag of Canton of Sankt Gallen 2011.svg" (public domain); the /manifest entry gives its author, licence and why it was chosen. It has a viewBox and no width or height, so it fills the box it is put in at its own aspect ratio.

Import it

import value from "@johnmorrisdotca/hata/flags/ch-sg";

Definition

const svg: string = "<svg data-hata=\"ch-sg\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-32.75 9.67 419.5 419.5\"><g stroke=\"#000\" stroke-width=\"4.5\"><path fill=\"#00a55b\" stroke=\"none\" d=\"M-32.75 9.67h419.5v419.5h-419.5z\" style=\"fill:#093;fill-opacity:1\"/><path fill=\"#fff\" d=\"M168.6 35.7a8.45 7.5 0 0 1 16.8 0v375.8a8.45 7.5 0 0 1-16.8 0z\"/><path fill=\"#fff\" d=\"M144.75 369.3a7.45 7.2 0 0 1-14.9 0V114.6a7.45 6.4 0 0 1 14.9 0v253.3a9.38 8.9 0 0 0 18.75 0V116.2a9.38 8.4 0 0 0-18.75 0m64.5 253.1a7.45 7.2 0 0 0 14.9 0V114.6a7.45 6.4 0 0 0-14.9 0v253.3a9.38 8.9 0 0 1-18.75 0V116.2a9.38 8.4 0 0 1 18.75 0M163.5 119a13.5 11.5 0 0 1 27 0v247a13.5 11 0 0 1-27 0M198 77.6V49.8h-25c-25-.2-38.5-13-49.4-27.2-6.9 13.6-8.9 22-9.2 34.8.4 15 2.2 24.1 11 40 13.9-14.2 26.7-19.5 46.3-19.8z\"/><path fill=\"#00a55b\" stroke-linejoin=\"round\" d=\"M125.5 131h103v22h-103zm0 200.7h103v22h-103zm0-12.2h1.5L228.5 199v-33.7H227L125.5 285.8z\" style=\"fill:#093;fill-opacity:1\"/><path fill=\"#00a55b\" stroke-linejoin=\"round\" d=\"M125.5 165.3h1.5l101.5 120.5v33.7H227L125.5 199z\" style=\"fill:#093;fill-opacity:1\"/></g></svg>"

Examples

Example 1

import flag from "@johnmorrisdotca/hata/flags/ch-sg";

const host=document.createElement("div");
host.innerHTML = flag; // or toDataUri(flag) from "@johnmorrisdotca/hata" for an <img src>
console.log(host.querySelector("svg")?.getAttribute("viewBox"));

Example 2

import { svg } from "@johnmorrisdotca/hata/flags/ch-sg";
console.log(svg.startsWith("<svg"),svg.length);
true 1071

What it prints (run when this page was built)

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