Show HN: Vector Logo Zone – SVG logos for your readme or credits page | Hacker News Reader

Show HN: Vector Logo Zone – SVG logos for your readme or credits page

vectorlogo.zone

275 pointsFileformat47 comments

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.

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.

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.

I'm not sure about other browsers but on Firefox on mac, the controls get covered up when you zoom in on an image.

https://imgur.com/a/H0JbebC

Fixed, though it will take a little while for Travis to deploy the fix.

This is great. I always want to give credit and show off the technologies I use but never quite know what is appropriate. This makes it easier!

Awesome work! And lovely to see Nomad List on the to do :D

My son is my grunt worker: I just got him out of bed & he's working on it. Should be up shortly!

Please create parenting microsite explaining how you pulled that off.

;)

And then make Travis create a good logo for that parenting.io site!

https://game-icons.net/delapouite/originals/wood-club.html

Ha. Plus, it serves as an alarm clock!

Seconded with extreme interest

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.

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/

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.

mind linking your website? I’d like to see it, and there’s nothing suggestive in your bio.

I wanted to avoid the impropriety of shameless self-promotion; but the URL is my username plus dot com.

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/

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) that compares them!

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

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

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

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

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 [1] https://www.ycombinator.com/ upper left corner

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'm curious: Does SVG have the option to specify color space, in addition to the raw values?

I think news.ycombinator.com and ycombinator.com have different logo colours.

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'.

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.

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!

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.

Yep, here's an example from Facebook:

> 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

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.

Please add the vim logo!

Also maybe neovim whilew you're at it.

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

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

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?

And FreeBSD is done: https://www.vectorlogo.zone/logos/freebsd/index.html

Yes, we're in Philly! Go Eagles!

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

HTTR! Should be a good game today.

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

Awesome! I love having scalable images for everything.

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

Added to the queue!

Quick fix.

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

Great resource, thank you for your work.

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.

Reply on news.ycombinator.com