diff --git a/README.md b/README.md new file mode 100644 index 0000000..8b20cd4 --- /dev/null +++ b/README.md @@ -0,0 +1,15 @@ +![license](https://licensebuttons.net/p/zero/1.0/88x31.png) + +# Vegvisir Branding +This repository contains branding resources for the [Vegvisir web framework](https://vegvisir.vlw.se). + +Generated resources in this repository are optimized for hotlinking on live webpages. You can permalink directly to any version of a file in this repository. + +A mirror of all latest resources are also available on `blob.vlw.se/branding/vegvisir`. +For example: +``` +https://blob.vlw.se/branding/vegvisir/icons/svg/128x128.svg +``` + +# Scaffold +All generated resources must follow specific rules. Refer to the `README.md` in each directory requirements. diff --git a/icons/README.md b/icons/README.md new file mode 100644 index 0000000..36d4af7 --- /dev/null +++ b/icons/README.md @@ -0,0 +1,54 @@ +# `/icons` +The `original.svg` file contains the original Inkscape file which all generated icons derive from. It should not be used directly. + +## Sizes +All icons must be generated in the following sizes: +Width|Height|File path +--|--|-- +48px|48px|/icons/[[*Extension*]](#extensions)/48x48.[[*Extension*]](#extensions) +57px|57px|/icons/[[*Extension*]](#extensions)/57x57.[[*Extension*]](#extensions) +60px|60px|/icons/[[*Extension*]](#extensions)/60x60.[[*Extension*]](#extensions) +72px|72px|/icons/[[*Extension*]](#extensions)/72x72.[[*Extension*]](#extensions) +76px|76px|/icons/[[*Extension*]](#extensions)/76x76.[[*Extension*]](#extensions) +96px|96px|/icons/[[*Extension*]](#extensions)/96x96.[[*Extension*]](#extensions) +120px|120px|/icons/[[*Extension*]](#extensions)/120x120.[[*Extension*]](#extensions) +144px|144px|/icons/[[*Extension*]](#extensions)/144x144.[[*Extension*]](#extensions) +152px|152px|/icons/[[*Extension*]](#extensions)/152x152.[[*Extension*]](#extensions) +180px|180px|/icons/[[*Extension*]](#extensions)/180x180.[[*Extension*]](#extensions) +192px|192px|/icons/[[*Extension*]](#extensions)/192x192.[[*Extension*]](#extensions) +256px|256px|/icons/[[*Extension*]](#extensions)/256x256.[[*Extension*]](#extensions) +384px|384px|/icons/[[*Extension*]](#extensions)/384x384.[[*Extension*]](#extensions) +512px|512px|/icons/[[*Extension*]](#extensions)/512x512.[[*Extension*]](#extensions) + +## Bitmaps +A lossless-quality `512x512px` bitmap should be generated from `original.svg` which will be used as the base for generating bitmap in the required [sizes](#sizes). + +Use the lossless bitmap with [Squoosh.app](https://squoosh.app) to generate the required sizes. The following Squoosh preset overrides should be used when generating: + +### AVIF +- Encoder: `OxiPNG` +- Reduce palette: `On` +- - Colors: `18` +- Quality: `40` +- Effort: `10` + +### PNG +- Encoder: `OxiPNG` +- Reduce palette: `On` +- - Colors: `18` +- Effort: `6` + +### WebP +- Encoder: `WebP` +- Reduce palette: `On` +- - Colors: `18` +- Effort: `6` +- Quality: `41` + +## Vectors +Use the `original.svg` file to generate SVG files of the required [sizes](#sizes). + +All generated SVG:s should be imported to [SVGOMG](https://optimize.svgomg.net/) and exported with the default settings except: + +- Number precision: `2` +- Transform precision: `3`