search

chocolatey-archive / chocolatey

[DEPRECATED - https://github.com/chocolatey/choco] Chocolatey NuGet - Like apt-get, but for windows.
https://chocolatey.org
Apache License 2.0
2.81k stars 344 forks source link

Make SVG the preferred format for package icons #324

Open TomOne opened 10 years ago

TomOne commented 10 years ago

I’m sure you already heard about SVG (Scalable Vector Graphics) or even worked with them. SVG would be the best format for package icons. Basically we need to handle these tasks:

More details were discussed in the forum: https://groups.google.com/forum/#!topic/chocolatey/qeHoiEh_XuM

If you ask me, there are no significant reasons why we should wait to implement this innovative improvement. The future clearly belongs to vector graphics.

TomOne commented 10 years ago

@ferventcoder: I’ve seen you use Google Analytics on chocolatey.org. It would be very interesting to know how many visitors use IE8 or lower. Then we have facts.

ferventcoder commented 10 years ago

For this last year, IE8 and lower has been about 3% (about 9K visitors).

IE is 11.58% (any version) of the visits, with Firefox at 19.85% and Chrome at 59.89%.

See images below:

image

image

TomOne commented 10 years ago

Thanks for providing these statistics. IE8 usage is low, as I had expected. But even in 8 months when Windows XP support ends it won’t be zero. :-1:

However, I found a very simple solution for a fallback to PNG if a browser doesn’t support SVG using the JavaScript plugin SVGeezy. Then this simple JavaScript code will replace all SVGs with their PNG equivalents:

svgeezy.init(false, 'png');

This assumes of course that in the same directory in addition to the SVG file there must exist the equivalent PNG file (e. g. http://example.com/icon.svg and http://example.com/icon.png). But that’s not a problem at all, we just need to mention that in the icon guidelines in the wiki.

I would be very pleased to make a pull request for chocolatey.org to integrate this fallback. @ferventcoder, is that OK for you?

ferventcoder commented 10 years ago

how big is the plugin?

TomOne commented 10 years ago

Tiny. Only 1.158 KB for the minified version, see the code: https://github.com/benhowdle89/svgeezy/blob/master/svgeezy.min.js

ferventcoder commented 10 years ago

Well then I'm down for it if you want to send me a PR. :)

TomOne commented 10 years ago

Great. I have good news for you. We don’t even need SVGeezy. This plugin was designed for folks who don’t already have Mondernizr and jQuery integrated in their pages, but chocolatey.org has them integrated. So Modernizr can be used for feature detection and jQuery for DOM manupulation and the code becomes even simpler, without the need of SVGeezy:

if (!Modernizr.svg) {
    $('img[src$=".svg"]').each(function()
    {
        $(this).attr('src', $(this).attr('src').replace('.svg', '.png'));
    });
}

I found this code on David Bushell’s blog, a guy who seems to be very interested into SVG. :+1:

In addition I played around with SVGZ. That is the gzipped format of SVG. SVG is highly compressible, because it contains a lot of redundant data (like HTML). I was very curious about the filesizes of SVG, SVGZ and PNG in comparison. Therefore I generated some files:

File size in bytes, filename

1141, git.svg 782, git-opt.svg 437, git-opt.svgz 1699, git-opt-128px.png 868, git-opt-48px.png

56431, mixxx.svg 16839, mixxx-opt.svg 2357, mixxx-opt.svgz 5278, mixxx-opt-128px.png 1674, mixxx-opt-48px.png

28718, pyhoca-gui.svg 12009, pyhoca-gui-opt.svg 3190, pyhoca-gui-opt.svgz 16306, pyhoca-gui-opt-128px.png 4067, pyhoca-gui-opt-48px.png

Description of these files with the example of git:

As you can see, SVGZ is clearly smaller than the raster version with 128px, and in some cases even smaller than the 48px version. SVGZ is a very interesting format, perfectly suitable to use it as package icons on chocolatey.org.

However, SVGZ cannot be directly integrated in websites without an additional step. The web server must be configured to tell the browser “hey this is gzipped, you’ll need to decompress this”. This can be done in Apache by adding this to the .htaccess file:

# SVG
AddType image/svg+xml .svg .svgz
AddEncoding x-gzip .svgz

I don’t know how to configure IIS to handle SVGZ properly, but you certainly know it. It would be great if you could test it.

ferventcoder commented 10 years ago

I do know how to do it in IIS/ASP.NET MVC

Rob "Be passionate in all you do"

http://devlicio.us/blogs/rob_reynolds http://ferventcoder.com http://twitter.com/ferventcoder

On Thu, Aug 15, 2013 at 10:32 AM, TomOne notifications@github.com wrote:

Great. I have good news for you. We don’t even need SVGeezy. This plugin was designed for folks who don’t already have Mondernizr and jQuery integrated in their pages, but chocolatey.org has them integrated. So Modernizr can be used for feature detection and jQuery for DOM manupulation and the code becomes even simpler, without the need of SVGeezy:

if (!Modernizr.svg) { $('img[src$=".svg"]').each(function() { $(this).attr('src', $(this).attr('src').replace('.svg', '.png')); });}

I found this code on David Bushell’s bloghttp://dbushell.com/2013/02/04/a-primer-to-front-end-svg-hacking/, a guy who seems to be very interested into SVG. [image: :+1:]

In addition I played around with SVGZ. That is the gzipped format of SVG. SVG is highly compressible, because it contains a lot of redundant data (like HTML). I was very curious about the filesizes of SVG, SVGZ and PNG in comparison. Therefore I generated some files:

File size in bytes, filename

1141, git.svg http://walterbz.com/git.svg 782, git-opt.svg http://walterbz.com/git-opt.svg 437, git-opt.svgz http://walterbz.com/git-opt.svgz 1699, git-opt-128px.png http://walterbz.com/git-opt-128px.png 868, git-opt-48px.png http://walterbz.com/git-opt-48px.png

56431, mixxx.svg http://walterbz.com/mixxx.svg 16839, mixxx-opt.svg http://walterbz.com/mixxx-opt.svg 2357, mixxx-opt.svgz http://walterbz.com/mixxx-opt.svgz 5278, mixxx-opt-128px.png http://walterbz.com/mixxx-opt-128px.png 1674, mixxx-opt-48px.png http://walterbz.com/mixxx-opt-48px.png

28718, pyhoca-gui.svg http://walterbz.com/pyhoca-gui.svg 12009, pyhoca-gui-opt.svg http://walterbz.com/pyhoca-gui-opt.svg 3190, pyhoca-gui-opt.svgz http://walterbz.com/pyhoca-gui-opt.svgz 16306, pyhoca-gui-opt-128px.pnghttp://walterbz.com/pyhoca-gui-opt-128px.png 4067, pyhoca-gui-opt-48px.pnghttp://walterbz.com/pyhoca-gui-opt-48px.png

Description of these files with the example of git:

  • git.svg = original SVG file
  • git-opt-svg = optimized SVG file with SVGOhttps://github.com/svg/svgo, a Node.js tool
  • git-opt.svgz = gzip compressed optimized SVG file
  • git-opt-128px.png = equivalent raster image with 128px, optimized with optipng -o7
  • git-opt-48px.png = equivalent raster image with 48px, optimized with optipng -o7

As you can see, SVGZ is clearly smaller than the raster version with 128px, and in some cases even smaller than the 48px version. SVGZ is a very interesting format, perfectly suitable to use it as package icons on chocolatey.org.

However, SVGZ cannot be directly integrated in websites without an additional step. The web server must be configured to tell the browser “hey this is gzipped, you’ll need to decompress this”. This can be done in Apache by adding this to the .htaccess file:

SVG

AddType image/svg+xml .svg .svgz AddEncoding x-gzip .svgz

I don’t know how to configure IIS to handle SVGZ properly, but you certainly know it. It would be great if you could test it.

— Reply to this email directly or view it on GitHubhttps://github.com/chocolatey/chocolatey/issues/324#issuecomment-22710733 .