Pm/patch/official autoprefixer logo

I went over to [Autoprefixer’s repo], checked the logo, and saw that it was an SVG. So brilliant, good to add here.

This pull request is pretty self explanatory, but there’s a few things to discuss.

I’ve included both a black version, a color version, and a white (knockout?) version. I tried playing around in Illustrator to get the viewbox the same as the other logos, but I couldn’t figure it out. Artboards don’t seem to be equivalent to the viewbox, which is what I had initially assumed. Maybe you can do that? Or tell me how/point me in the direction of some information and I’ll do it. Currently it’s just the logo with no extra whitespace/padding.

Like [you said][pr 1 comment], the other logos line up. This one doesn’t because it has no extra whitespace. I think the logos should probably all be stripped of the whitespace, but still line up nicely by default. (i.e. without having to set a height and width to make it line up) The biggest issue with that would be logos like Stylus’, because the Y and L reach higher and lower than the rest of the letters which would make the logo look too small in relation to the others, and it would also mean having to choose to either make them line up either horizontally or vertically. Perhaps the solution is to have a `*-no-whitespace.svg` option and keep the current format as the default one? This would essentially make each logo have a (current) maximum of 6 variations, assuming there’s a color version of the logo.

    name.svg
    name-no-whitespace.svg
    name-knockout.svg
    name-knockout-no-whitespace.svg
    name-color.svg
    name-color-no-whitespace.svg

The `id` on each logo would be `logo-filename`, or at least that’s the way I did it here for the color and knockout versions, which would actually be the `*-no-whitespace` versions if you decide to add that option in.

Finally, I think what I did with `autoprefixer-knockout` is what was meant by knockout, but I’m not sure. Also, it’s probably best not to have `img { background: white; }` on `text/index.html` because it makes seeing the white logos impossible. So that’s why I removed it.

So, the things that need answers are:

- What is a knockout exactly? Did I do it right?
- Can you point me in the direction of some information about how to resize the vector so that I control the dimension of the resulting viewbox? Or resize them yourself.
- Do you want a no-whitespace option?
- How do you want to name alternate versions of the logo?
- What should the svg `id` be for the non default logo?
- Do you want to include all the versions of the logos in the test page?

Sorry, I think I got a bit out of control with the writing here...

[pr 1 comment]: https://github.com/chloi/preprocessor-logos/pull/1#issuecomment-65503465
[Autoprefixer’s repo]: https://github.com/postcss/autoprefixer