HubToolify Country & Territory Flags
====================================

5 flags, each in 4 presentations: Original, Rectangle, Circle, Rounded.
These are HubToolify's own SVG implementations of national and territorial flag designs,
drawn from each flag's official specification. The designs themselves belong to the
countries and territories they represent (see LICENSE.txt).

Collection status (2026-09-25): 242 flags complete; 0 awaiting artwork; 16 places that fly another entry's flag; 1 with no official flag. See PROVENANCE.txt.

Presentations
-------------

- Original — Official proportions, nothing added.
- Rectangle — Fitted inside a 3:2 canvas — never stretched or cropped.
- Circle — Circular avatar — the flag is cropped to a circle.
- Rounded — Official proportions with rounded corners.

What is in this pack
--------------------

Folder / file — Contents
svg/<presentation>/<id>.svg — One SVG per flag and presentation
png/<presentation>/<width>/<id>.png — Transparent PNGs, 256 and 1024 px wide
manifest.json — Every flag: names, codes, region, proportions, official colours, sources, files
cheatsheet.html — Search and filter every flag in a browser
cheatsheet.csv — The same list for a spreadsheet
examples/index.html — Working HTML: image, inline SVG, CSS classes, padding and background
examples/flags.css — CSS classes: hti-flag hti-flag-<id>
examples/react/Flag.jsx — A React component
examples/vue/Flag.vue — A Vue 3 component
source/ — Editable source geometry (see source/README.txt)
PROVENANCE.txt — How the flags were drawn, every source, and what is not included

Flag ids are lower-case codes: ISO 3166-1 alpha-2 (fr) or, where a place has
none, its documented code (gb-sct, bq-bo, xk). manifest.json lists every code.

Colours
-------

Every file carries the flag's official colours. Resize a flag, pad it or put it on a
background, but do not recolour it: a flag's colours are part of its legal definition.

Figma
-----

1. Drag one or more files from svg/<presentation>/ onto the canvas (or use
   File → Place image…, Ctrl/Cmd + Shift + K, and pick the SVGs).
2. Each flag arrives as an editable vector frame at its official proportions. Circle,
   Rounded and Rectangle use a clip path, which Figma imports as a mask group — keep it
   to preserve the shape.
3. Resize with Shift held (or set constraints to Scale) so proportions stay exact.
   Avoid "Flatten" if you want to keep the separate stripes and emblems editable.

Photoshop
---------

1. Use the transparent PNGs in png/<presentation>/<width>/: pick the width closest to
   (and not smaller than) the size you need.
2. File → Place Embedded… keeps the PNG as a smart object you can scale down without
   loss. File → Open also works; the background stays transparent.
3. Need a size that is not in the pack? Export any width up to 2048 px from the flag's
   panel on hubtoolify.com, or open the SVG in a vector editor and export from there.

Web
---

    <img src="svg/original/fr.svg" height="32" alt="Flag of France">

Always give flags a text alternative (alt="Flag of …").

See LICENSE.txt for what you may do with these files, and PROVENANCE.txt for sources.
