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) 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.
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) 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.
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.
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.
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!
> Don’t modify the "f" logo in any way, such as by changing the design, scale or color. If you can’t use the correct color due to technical limitations, use black and white
Yes they have the stuff in their terms but chill. They have never sued anybody for putting a monochrome logo in their client list, except they had others teason to sue.
Aligning all logos on eg a client list re color and hue is normal and tolerated.
What you should not do is to mod learned GUI elements like sign-in buttons, eg FB Connect.
Yes, this is exactly what I was doing before I started VLZ. But they weren't necessarily available as SVG, and they always needed tweaking to look nice together.
Plus it is nice to be able to hotlink them from a central location.
I'm planning to make the -wordmark version take the parent css color, but otherwise dark or mono versions will have to come from the community.
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
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!
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.
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.
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.
47 comments
[ 2.7 ms ] story [ 104 ms ] threadVectorLogoZone 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) 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.
;)
https://imgur.com/a/H0JbebC
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.
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) 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.
[1]: https://svgporn.com/
But I wanted images that included the company name, so the credits section can be 100% images, not icon image + text.
Using Brave Browser on mobile, search bar is losing focus on each letter entry.
Great resource, thank you for your work.
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.
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'.
Displaying logos can be tricky, and it's scary when wealthy companies send legal complaints about their logos.
Edit; phone added odd words.
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!
> Don’t modify the "f" logo in any way, such as by changing the design, scale or color. If you can’t use the correct color due to technical limitations, use black and white
— https://en.facebookbrand.com/assets/f-logo/?audience=landing
Aligning all logos on eg a client list re color and hue is normal and tolerated.
What you should not do is to mod learned GUI elements like sign-in buttons, eg FB Connect.
Plus it is nice to be able to hotlink them from a central location.
I'm planning to make the -wordmark version take the parent css color, but otherwise dark or mono versions will have to come from the community.
And here's the same organized by categories as a single page map: https://landscape.cncf.io/format=landscape
And I was surprised to see SEPTA on the home page. Are you in Philadelphia?
Also maybe neovim whilew you're at it.
I see that you have QEMU on the todo list, but could you add KVM, please?
[0] https://www.vectorlogo.zone/logos/ycombinator/index.html [1] https://www.ycombinator.com/ upper left corner
Time for those lazy slackers to make some logo guidelines!
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.
https://css-tricks.com/on-xlinkhref-being-deprecated-in-svg/