Opened 7 years ago
Last modified 3 years ago
#13202 assigned enhancement
(easy) Use SVG icons on website
| Reported by: | diver | Owned by: | nobody |
|---|---|---|---|
| Priority: | normal | Milestone: | |
| Component: | Website/www.haiku-os.org | Version: | |
| Keywords: | Cc: | stippi | |
| Blocked By: | Blocking: | ||
| Platform: | All |
Description
Icons look blurry when displayed on a high-dpi monitor.
Attachments (2)
Change History (13)
comment:1 by , 7 years ago
| Owner: | changed from to |
|---|---|
| Status: | new → assigned |
| Summary: | Use SVG icons on website → (easy) Use SVG icons on website |
comment:3 by , 7 years ago
I exported all the icons I could find on the website to SVG, see the attached zip.
Unfortunately, IOM's SVG export as problems, esp. with certain gradients. See e.g. :
Top row the SVGs as rendered by Web+, below the PNGs as exported by IOM.
Firefox and Inkscape under Linux at times render different errors of IOM-exported SVGs. Mysteriously enough, Ubuntu's "Tracker" (how do they call their file manager?) and its standard image viewer render those SVGs perfectly!
I can't seem to figure out how to edit gradients in Inkscape. If anyone wants to take it from here...
Of course the real solution would be for IOM to export SVGs more correctly...
comment:4 by , 7 years ago
| Owner: | changed from to |
|---|
comment:5 by , 7 years ago
Could it be that missing gradients in SVG files is Web+'s fault? Need to check with other browsers.
comment:6 by , 7 years ago
Just checked on Android 4.1 in Google Chrome and Android Internet. Both show missing gradients, although it is ever so slightly better than Web+'s attempt at rendering.
comment:7 by , 7 years ago
| Cc: | added |
|---|
comment:8 by , 7 years ago
SVGs don't render correctly on Safari 10.0.3 on macOS Sierra either.
If @2x and @3x pngs can be generated, then those could be used instead.
comment:9 by , 6 years ago
SVG export in Icon-O-Matic produces invalid gradients, that's why they are rendered incorrectly #14210. As for Web+ rendering, it might still be lacking some SVG features support.
comment:10 by , 6 years ago
There is a simple explanation for radial gradient icon-o-matic exports always the value cx and cy set to 0 and the radius to 64. Than it uses the matrix transformation to render the gradient... I think Web+ doesn't support gradientTransform. Ubuntu filemanager probably does.
comment:11 by , 3 years ago
Replaced some PNGs with SVGs - see https://github.com/haiku/website/pull/562 for details.
Should be pretty easy for anyone who wants to work on it - just export original HVIF files as SVG, add them to the repository, re-upload. (Also verify that they exported correctly - Icon-o-Matic's SVG export is still slightly buggy.)