From fbd0d59f326ebe26d9f9d0d3eb46e423e7352d07 Mon Sep 17 00:00:00 2001 From: Jack Chou Date: Thu, 2 Jul 2020 13:20:20 -0700 Subject: [PATCH 1/3] Added SVG optimization guideline to contributing.md, reference PR#1968 --- .github/CONTRIBUTING.md | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 2bda11ec..375c4345 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -96,6 +96,7 @@ 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/) - 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)) -- 2.49.1 From 445f2cd57cbf346049dd924695080563637084c4 Mon Sep 17 00:00:00 2001 From: Jack Chou Date: Fri, 3 Jul 2020 08:16:33 -0700 Subject: [PATCH 2/3] Adding dimension specifications for SVG images and notes on SVG generated by Illustrator/Sketch --- .github/CONTRIBUTING.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 375c4345..d03d8355 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -97,9 +97,12 @@ See https://www.privacytools.io/providers/vpn/#criteria for more details. - 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)) + ## Licensing The content and original technology of this website is made available under the Creative Commons Zero v1.0 Universal license text. Some files or folders may include works from other projects with separate licenses, and will be marked as such. **By contributing to this repository, contributors do not necessarily agree to sign a CLA or legally transfer their copyright to the project, but they do at a minimum agree to license their work under the current license of this repository: In this case, the Creative Commons Zero v1.0 Universal.** -- 2.49.1 From d02882d65a1b637d7bfee7fb68692e3ef35078e4 Mon Sep 17 00:00:00 2001 From: Jack Chou Date: Fri, 3 Jul 2020 08:19:02 -0700 Subject: [PATCH 3/3] Updated tool logo dimensions from 120px x 120px to 128px x 128px in accordance to svg specs --- .github/CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index d03d8355..c987415d 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -100,7 +100,7 @@ See https://www.privacytools.io/providers/vpn/#criteria for more details. - 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 -- 2.49.1