Remove PNG assets

[maureenlholland]

After some consideration, we have decided to go ahead with removing PNG assets that can be handled by fewer SVG files.

:warning: This will be a major breaking change to the package and will have a significant impact on Protocol

Success Criteria:

• SVGs must be available in appropriate logo and wordmark variations (~to resolve: do we keep -white variations as separate files or should dark mode be handled with fill and stroke CSS in protocol?~ See comment below for reason to keep -white variations as separate files)
  • Logo
  • Logo Flat
  • Wordmark Vertical
  • Wordmark Horizontal
  • Wordmark Stack (Vertical and Horizontal)
• Size and high-res PNG variations are removed
• ~Protocol is updated to use SVG instead of PNG for logos and wordmarks~

Remove PNGs from the following logo folders:

• [x] Pocket
• [x] Mozilla
• [x] Mozilla VPN
• [x] Firefox
• [x] Firefox Browser
• [x] Firefox Browser Beta
• [x] Firefox Browser Developer
• [x] Firefox Browser Focus
• [x] Firefox Browser Nightly
• [x] Firefox Lockwise
• [x] Firefox Monitor
• ~[ ] Firefox Send~ Deleted entire directory

[craigcook]

Regarding "to resolve: do we keep -white variations as separate files or should dark mode be handled with fill and stroke CSS in protocol?":

I think CSS can only change colors of an SVG when it's embedded inline in a page, but not when it's treated as a regular image (in img or as a CSS background). So we probably need to keep the -white variants.

[maureenlholland]

Listed all possible variations and checked current SVG availability. Add strikethroughs to anything not currently in PNG (we don't use these variations)

Note: I left the flat logo checks, although those are only available in SVG anyway. We probably don't need them for beta, developer, or focus, but other products have them.

CONCLUSION: ~the only PNG-equivalent SVG we are missing is Mozilla VPN logo-word-hor-white.svg~ We have all the SVG assets we need!

checking firefox ~Missing! logo-white.svg~ ~Missing! logo-word-hor-stack.svg~ ~Missing! logo-word-hor-stack-white.svg~ ~Missing! logo-word-ver-stack.svg~ ~Missing! logo-word-ver-stack-white.svg~

checking mozilla ~Missing! logo-white.svg~ ~Missing! logo-word-ver.svg~ ~Missing! logo-word-ver-white.svg~ ~Missing! logo-word-hor-stack.svg~ ~Missing! logo-word-hor-stack-white.svg~ ~Missing! logo-word-ver-stack.svg~ ~Missing! logo-word-ver-stack-white.svg~

checking pocket ~Missing! logo-white.svg~ ~Missing! logo-word-ver.svg~ ~Missing! logo-word-ver-white.svg~ ~Missing! logo-word-hor-stack.svg~ ~Missing! logo-word-hor-stack-white.svg~ ~Missing! logo-word-ver-stack.svg~ ~Missing! logo-word-ver-stack-white.svg~

checking browser ~Missing! logo-white.svg~

checking lockwise ~Missing! logo-white.svg~

checking monitor ~Missing! logo-white.svg~

checking send ~Missing! logo-white.svg~

checking vpn ~Missing! logo-white.svg~ Missing! logo-word-hor-white.svg (added with https://github.com/mozilla/protocol-assets/pull/68)

checking beta ~Missing! logo-white.svg~ Missing! logo-flat.svg Missing! logo-flat-white.svg

checking developer ~Missing! logo-white.svg~ Missing! logo-flat.svg Missing! logo-flat-white.svg

checking focus ~Missing! logo-white.svg~ Missing! logo-flat.svg Missing! logo-flat-white.svg

checking nightly ~Missing! logo-white.svg~ Missing! logo-flat.svg Missing! logo-flat-white.svg

[craigcook]

I don't know if Beta, Dev Edition, Focus, and Nightly need their own flat assets because they're all just recolored versions of the regular Firefox logo to begin with (well, Beta is a little different). We could add black and white copies to the folders for completeness but they would be duplicates of the flat Firefox logo.

[maureenlholland]

I'm happy to leave them out for now and add as needed.

[maureenlholland]

Final decisions:

• Keep og.png
• No png fallback otherwise