Use vectorised graphics (SVG) for logos and artwork in Web UI
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.
#3 Updated by Anonymous over 3 years ago
- File CMYK_FreeNAS_Shark_ondark.eps CMYK_FreeNAS_Shark_ondark.eps added
- File CMYK_OnDark_TrueNAS_Logo.eps CMYK_OnDark_TrueNAS_Logo.eps added
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)
#5 Updated by David Beitey over 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.