Use SVGs for UI graphics. Implements #27828. #306
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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. This implements https://redmine.ixsystems.com/issues/27828.
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 LinkedInAttic/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 fromangular-cli
, so I'll leave this decision up to someone else.