Project

General

Profile

Feature #27828

Use vectorised graphics (SVG) for logos and artwork in Web UI

Added by David Beitey almost 3 years ago. Updated over 2 years ago.

Status:
Done
Priority:
Important
Assignee:
Erin Clark
Category:
GUI (new)
Estimated time:
Severity:
New
Reason for Closing:
Reason for Blocked:
Needs QA:
Yes
Needs Doc:
Yes
Needs Merging:
No
Needs Automation:
No
Support Suite Ticket:
n/a
Hardware Configuration:

Description

High-DPI screens are extremely commonplace, featuring in all major smartphones and tablets, and being adopted by more and more laptop and desktop machines for their displays.

At present, the use of low-resolution rasterised PNG images for UI elements such as the FreeNAS/TrueNAS/iX logos, the close button (cancel.png) and so on, results in the images appearing pixellated on these types of screens. This is easily fixed with the use of vectorised graphics in the form of SVGs. Replacement SVGs, created from the original vector artwork, could be dropped into place and used anywhere the existing .png files are. This then means images are infinitely scalable, transparent, able to be styled in-browser, and typically much smaller than the rasterised counterparts.

SVGs are supported in more browsers than Angular 4 supports (https://caniuse.com/#feat=svg) so there will be no issue with compatibility.

Can these images be changed over to SVGs? Suggest also running SVGs through svgo (https://github.com/svg/svgo) for optimisation; significant file size savings can be garnered by just running that tool over the files.

Originally reported at https://github.com/freenas/webui/issues/168 and moved here. In most cases, I'd make an attempt at a pull request, but I don't have the original artwork.

CMYK_FreeNAS_Shark_ondark.eps (983 KB) CMYK_FreeNAS_Shark_ondark.eps Erin Clark, 01/16/2018 03:53 PM
CMYK_OnDark_TrueNAS_Logo.eps (1.02 MB) CMYK_OnDark_TrueNAS_Logo.eps Erin Clark, 01/16/2018 03:53 PM

History

#1 Updated by Dru Lavigne almost 3 years ago

  • Assignee changed from Release Council to Erin Clark
  • Target version set to 11.3

#2 Updated by Erin Clark almost 3 years ago

  • Status changed from Unscreened to Screened
  • Priority changed from No priority to Important

#3 Updated by Erin Clark almost 3 years ago

I have attached the original FreeNAS and TrueNAS logos if you would like to try making a PR with these (you'll need to convert to SVG)

#4 Updated by David Beitey almost 3 years ago

Erin Clark wrote:

I have attached the original FreeNAS and TrueNAS logos if you would like to try making a PR with these (you'll need to convert to SVG)

Perfect, thanks - that's exactly what I needed. I'm about 75% done with a PR so will open it shortly.

#5 Updated by David Beitey almost 3 years ago

PR opened at https://github.com/freenas/webui/pull/306.

This changes FreeNAS/TrueNAS/iX logos and icons, as well as the Beastie Shark graphic into their SVG equivalents for scalability and greatly improving their appearance on zoomed interfaces, high-DPI screens, mobile devices etc.

Several image tags within the HTML have also had their alt text added or improved for better accessibility at the same time.

cancel.png from Hopscotch has been left alone as the graphic scales well enough and it's an issue for that upstream project to resolve. An issue was raised over there with linkedin/hopscotch#357.

Beastie Shark's artwork was re-obtained from https://forums.freenas.org/index.php?threads/freenas-artwork.40541/ (which is where the original PNG was presumably sourced).

Note that images have not been optimised. Though they could easily be run through svgo to save around 50% of their size, this limits their ease of / ability to be edited later. Ideally, angular-cli would do the optimisation automatically as part of the build but this isn't currently a feature they have implemented (angular/angular-cli#2935 & angular/angular-cli#5356). Webpack has loaders that will help optimise images (eg https://github.com/tcoopman/image-webpack-loader) but using this would involve ejecting from angular-cli, so I'll leave this decision up to someone else.

#6 Updated by Dru Lavigne over 2 years ago

  • Status changed from Screened to Needs Developer Review

#7 Updated by Erin Clark over 2 years ago

  • Status changed from Needs Developer Review to Closed

Nice work

#8 Updated by Dru Lavigne over 2 years ago

  • Status changed from Closed to Done
  • Target version changed from 11.3 to Master - FreeNAS Nightlies
  • Needs Merging changed from Yes to No

Also available in: Atom PDF