From c9079bdd51f9a5c2fdb96a5137c1bc9559741bdb Mon Sep 17 00:00:00 2001 From: Jack Chou Date: Fri, 3 Jul 2020 20:11:57 -0700 Subject: [PATCH] Added SVG optimization guideline (#1972) --- .github/CONTRIBUTING.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 2bda11ec..c987415d 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -96,8 +96,12 @@ See https://www.privacytools.io/providers/vpn/#criteria for more details. ## Images - SVG file format is strongly preferred. PNG files can be used as a fallback if images are too complex or otherwise unsuitable as a vector format. +- We like to optimize all SVGs we add to the site. [This](https://github.com/privacytools/privacytools.io/pull/1968#issuecomment-652773633) is a helpful guide as to how we do it with [Inkscape](https://inkscape.org/) + - Some SVGs generated by Illustrator or Sketch are broken, therefore copying the SVG content to a new canvas is sometimes required. (We found this with the Mailcow logo). Looked fine in local builds but was wrong once rendered through netlify preview etc. +- We only have SVGs that have a canvas size of 128x128px or 384x128px. - Provider logo dimensions are 384px x 128px ([example](https://github.com/privacytools/privacytools.io/blob/master/assets/img/svg/3rd-party/mullvad.svg)) -- Tool logo dimensions are 120px x 120px ([SVG example](https://github.com/privacytools/privacytools.io/blob/master/assets/img/svg/3rd-party/firefox_browser.svg), [PNG example](https://github.com/privacytools/privacytools.io/blob/master/assets/img/png/3rd-party/claws_mail.png)) +- Tool logo dimensions are 128px x 128px ([SVG example](https://github.com/privacytools/privacytools.io/blob/master/assets/img/svg/3rd-party/firefox_browser.svg), [PNG example](https://github.com/privacytools/privacytools.io/blob/master/assets/img/png/3rd-party/claws_mail.png)) + ## Licensing