A vector button for F-Droid

Using SVG graphics

SVG (Scalable Vector Graphic) is a great image format. Using vectors, rather than bitmaps, SVG images are usually tiny file sizes. They also scale up infinitely without a loss of quality, or those jaggy pixels you get when you scale up bitmap images. This makes SVGs great for the high screen resolutions we're seeing on hi-DPI displays on mobile devices and some laptops. They'll scale to fit any size layout and stay crisp for any screen resolution.

On the Ind.ie website, I've used SVGs wherever possible. Screenshots and photos only work as bitmaps, but every logo, icon, and other graphic element is an SVG. As wide browser support for SVGs is still fairly recent, all our graphics are displayed as PNG files by default. I've then used Modernizr to detect a browser's support for SVG, and use CSS to replace all the PNGs with their SVG equivalents when SVG support is detected. You can see how I've implemented this CSS by viewing source, or seeing the original Stylus file on source.small-tech.org.

F-Droid button

When I was working on the new Pulse page, we needed to add the Google Play and F-Droid buttons that were present on the previous Syncthing page for the Android client. However, these buttons were standard pixel density PNG files, and so would look blurry or pixellated on hi-DPI displays.

It was easy to find an SVG version of the Google Play button, but nothing for F-Droid. I decided I could fairly easily reproduce the button in vector format. And I may as well share the results so anyone else can use, or edit and use, this button on their own sites.

I hope somebody else finds the button useful. If you do end up using it, please let us know!.

Licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. The attribution is included in the file, so you don't have to provide attribution elsewhere on your site.