Opened 6 years ago

Last modified 21 months ago

#13202 assigned enhancement

(easy) Use SVG icons on website

Reported by: diver Owned by: nobody
Priority: normal Milestone:
Component: Website/ Version:
Keywords: Cc: stippi
Blocked By: Blocking:
Platform: All


Icons look blurry when displayed on a high-dpi monitor.

Attachments (2) (35.8 KB ) - added by humdinger 6 years ago.
Zip of IOM-exported SVGs
svg_png_icons.png (24.7 KB ) - added by humdinger 6 years ago.
comparisson SVG - PNG

Download all attachments as: .zip

Change History (13)

comment:1 by waddlesplash, 6 years ago

Owner: changed from waddlesplash to nobody
Status: newassigned
Summary: Use SVG icons on website(easy) Use SVG icons on website

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.)

comment:2 by diver, 6 years ago

Owner: changed from nobody to humdinger

humdinger, would you mind taking a look? :)

comment:3 by humdinger, 6 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. :

comparisson SVG - PNG

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...

by humdinger, 6 years ago

Attachment: added

Zip of IOM-exported SVGs

by humdinger, 6 years ago

Attachment: svg_png_icons.png added

comparisson SVG - PNG

comment:4 by humdinger, 6 years ago

Owner: changed from humdinger to nobody

comment:5 by diver, 6 years ago

Could it be that missing gradients in SVG files is Web+'s fault? Need to check with other browsers.

comment:6 by richienyhus, 6 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 diver, 6 years ago

Cc: stippi added

comment:8 by kainjow, 6 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 joshas, 5 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 Janus, 5 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 jt15s, 21 months ago

Replaced some PNGs with SVGs - see for details.

Note: See TracTickets for help on using tickets.