Skip to content

Replace PNG icons with SVG #722

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

joshas
Copy link

@joshas joshas commented Apr 21, 2025

Replaced all icons on website with higher resolution SVG versions, that were available in Haiku artwork directory.
Some notable issues, that might prevent this PR from being merged right away, hence why I am creating it as draft.

  1. bullet_orange.gif, link_tags.png, read_more_16.png - icons probably were copied from previous theme and do not have alternatives in Haiku artwork directory, that might be used. Either have to be redrawn by someone with more artistic skill than me, or sourced from some open icon library.
  2. App_Debugger.svg and System_Kernel.svg icons had issues with export, probably due to conic gradient used in originals. Patched them as best as I could, hard to spot the difference from originals.
  3. dowload.svg was built by combining two other icons. Looks close enough to original PNG, but big arrow positioning is still a bit off. Might need some extra work to look perfect.
  4. File_PDF.svg looks a bit different from old icon, but this will prevent any possible lawsuits from Adobe, for misuse of their PDF logo.
  5. microphone_48 was sourced from archive provided in original issue ticket.
  6. App_HaikuDepot.svg was moved from files directory.
  7. Did not touch any other PNG images yet, but did a check to find where those are used - in API docs.

Talking about API documentation, I found that there are some images used from main website. It should be easy to update CSS and use SVG icons there too. Are there any other Haiku sub-websites that are sharing icons with main website and removing PNG icons might break them?

Now for the main issue: some SVG icons are still rendered with errors in WebPositive, mostly related to gradients. I fear this might be not acceptable.
preview-2

preview

On modern browsers SVG icons are looking good, especially on higher resolution displays. There are a few minor rendering issues here and there, though.
haiku-2x

All remaining standard definition PNG images should be updated in separate task. Maybe we could even remake "Get Haiku" button using CSS only?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

1 participant