
Show HN: Vector Logo Zone – SVG logos for your readme or credits page - Fileformat
https://www.vectorlogo.zone/
======
Fileformat
Want to give a shout out to the tech you are using? Or brag about your awesome
skillz? Or show just how many dependencies you can juggle before your project
implodes? Well, your dream has come true!

VectorLogoZone is a huge collection of consistently formatted SVG logos that
will look perfect on your snazzy new 5K display. And they're free! Including
hotlinking! With instant search! OMG! XML! WTF! TLA!

Seriously though, I created this site because I use a ton of different open
source tech, both personally and professionally. I figured that the least I
can do in return is give them a little link love and pay it forward. It really
is quick and painless to add a credits section to your README: the site is
open source, so you can see the credits section of its README
([https://github.com/VectorLogoZone/vectorlogozone#credits](https://github.com/VectorLogoZone/vectorlogozone#credits))
as an example.

And feel free to use if for something besides credits: lists of customers or
integrations or sponsors or whatever, it's all good.

One thing to note: while the site is responsive and all, it isn't really
bandwidth optimized (and there are a _lot_ of logos), so probably best to make
sure your phone is on WiFi. There is no "view all" page because it will take
down your browser, even fancy-pants Google Chrome.

~~~
tylerl
What's your workflow for generating these images?

I think the images are cool, but I think what's even more cool is having a a
set of tools/techniques for "tracing" a given image out as paths.

~~~
sjwright
Tracing raster copies should be avoided at all costs; it's rarely necessary.
If you're ever looking for vector copies of logos, the trick I've used in the
past is to search for PDF brochures or corporate documents and extract them
from there. Nowadays just check Wikipedia, or failing that there's an
increasing chance that their own website has its logo as SVG artwork.

The real challenge for a logo collation site like this is getting each logo to
be aesthetically consistent—a landscape oriented lock-up[1] and roughly equal
visual weight. Ultimately it's an impossible tension between consistency and
correctness.

For example Apple has almost never allowed their logo to be displayed next to
the text "Apple". Yet most logo sites (this one included) invent a lock-up
with some arbitrary font in presumed contravention of Apple's brand design
rules. Consistency wins over correctness. Whereas look at a search for "Stack"
([https://www.vectorlogo.zone/?q=stack](https://www.vectorlogo.zone/?q=stack))
and notice that for the StackExchange logo, correctness won over consistency.

The point is, it's basically impossible to do this perfectly, but damn if they
haven't done an excellent job. I also like that they have linked to their
sources, have started adding more versions for some logos, and in some cases
attached the original artwork. If they can keep the quality up, this could
become a great resource.

[1] The defined spatial relationship between all elements of a logo or brand.

~~~
m-p-3
I had access to many vectorized logos from press release packs, and I replaced
many non-vector ones for vectorized logos on Wikipedia in the past. It's so
much easier to get it from there, and it makes sense to use them on Wikipedia.

------
DamnInteresting
I very recently rebuilt my website so that the entire UI is vector-based,
mostly with SVGs (a few places with HTML entities). I also set it up to slurp
the minimized SVGs into the top of the html, then I render each SVG on the
page with the format:

    
    
        <svg><use xlink:href="#svg-name" /></svg>
    

...rather than making a new HTTP connection for each image.

This dramatically reduced the number of HTTP connections to load the site.
There's one initial connection for the html, one for the css, one for js, and
one for fonts (Google Fonts). I do use JPEG for photos, but those are lazy-
loaded, so the initial page paint is very snappy despite our wimpy server. And
it looks crispy on all screen sizes (even in milk!).

Some have said that SVG on the web is dying, but it can work so beautifully
that I hope the nay-sayers are mistaken.

~~~
styfle
It looks like that xlink syntax was deprecated in SVG 2 but it still works in
most browsers.

[https://css-tricks.com/on-xlinkhref-being-deprecated-in-svg/](https://css-
tricks.com/on-xlinkhref-being-deprecated-in-svg/)

~~~
DamnInteresting
I hadn't seen that, thanks. I hope that the browser makers wisely disregard
this silly deprecation, but if they do not, I suppose I can modify my import
function to use the altered syntax.

------
Datenstrom
Very nice! I've been using SVG Porn[1] (sfw) for the same purpose but I will
definitely use this too now.

[1]: [https://svgporn.com/](https://svgporn.com/)

~~~
Fileformat
Yes, SVGPorn is great, and I've used a bunch of his icons. I even made a
report ([https://www.vectorlogo.zone/report/icon-vs-
svgporn.html](https://www.vectorlogo.zone/report/icon-vs-svgporn.html)) that
compares them!

But I wanted images that included the company name, so the credits section can
be 100% images, not icon image + text.

------
dankohn1
You might also enjoy the 610 projects and products CNCF is tracking in our
interactive landscape, each with a high-res SVG:
[https://landscape.cncf.io/grouping=no](https://landscape.cncf.io/grouping=no)

And here's the same organized by categories as a single page map:
[https://landscape.cncf.io/format=landscape](https://landscape.cncf.io/format=landscape)

~~~
samstave
Well hot damn - I wasnt previously aware of cncf.io -- thanks

------
tlb
The Y Combinator logo color is off. It's #f26625 [0], but should be #f0652f
[1].

[0]
[https://www.vectorlogo.zone/logos/ycombinator/index.html](https://www.vectorlogo.zone/logos/ycombinator/index.html)
[1] [https://www.ycombinator.com/](https://www.ycombinator.com/) upper left
corner

~~~
Fileformat
Are you sure? I just double-checked, and the image on the www site has my
color (#f26522). And the hacker news header has ff6600, which is what I used
for the -tile version.

Time for those lazy slackers to make some logo guidelines!

~~~
tlb
Sorry, you're right. I was using the MacOS Pixel Tool to get colors, but
apparently MacOS fiddles with the colors slightly when rendering to the
screen.

------
subfay
Great idea! I'd love to see easy config options (version for bright, dark
background, monochcrome versions, again for bright and dark backgrounds).

Just finding a SVG logo is not that hard. Wikimedia has them all and you find
them with Google when searching for '<something> logo svg'.

~~~
mtnGoat
Fwiw, changing ther colors of many logos violates various rules. I think both
apple and Ms don't allow their logos to be altered, not even ther colors.

Displaying logos can be tricky, and it's scary when wealthy companies send
legal complaints about their logos.

Edit; phone added odd words.

~~~
Fileformat
I've tried to link to the official guidelines (and have an "-official"
version).

I prefer not to mess with the logos other than to make them fit.

Hopefully companies that care enough to send legal threats will care enough to
have a nice looking version to begin with, and I won't need to mess with it at
all.

And I'm happy to take submissions from official sources!

------
pablo1
Please add the vim logo!

Also maybe neovim whilew you're at it.

~~~
Fileformat
Added to the queue (which is now over 800 long!)

------
philw_
If you're only interested in monochrome versions then
[https://simpleicons.org](https://simpleicons.org) is a very good source of
SVG icons too.

------
andrewl
This is great! I'm glad to see FreeBSD on the To Do list. If you're taking
requests, do one for Vim.

And I was surprised to see SEPTA on the home page. Are you in Philadelphia?

~~~
Fileformat
Yes, we're in Philly! Go Eagles!

~~~
samstave
Are you doing logos for sports teams? (you should if its legal)

------
slovette
This is awesome. I often spend more time formatting images than I do building
the dang sites. Thank you for this. :)

------
JoshTriplett
Awesome! I love having scalable images for everything.

I see that you have QEMU on the todo list, but could you add KVM, please?

~~~
Fileformat
Added to the queue!

------
spaginal
Quick fix.

Using Brave Browser on mobile, search bar is losing focus on each letter
entry.

Great resource, thank you for your work.

~~~
Fileformat
Hmm... Seems to be working properly for me (Android 9, freshly downloaded
Brave). What are you using?

I don't really play with the focus (other than the autofocus attribute on the
<input>), so I'm not sure what could be going on.

