How do I make my custom SVGs for Badges?

[AbdullahAlhariri]

Hi, I'm a beginner and I am trying to make my custom badge with my SVG on my computer
Is there any way to have my local SVG on the online badge
thanks.

[calebcartwright]

hello 👋 it's not entirely clear what you're asking, but it sounds like you'd like to use a custom logo in your badge.

If that's indeed the case, would point you to our docs on working with custom logos. The gist though is that you first need to take your local SVG and convert it to base64, and there's a number of free tools available (including online converters). You'll then use that base64 output as the value for your query string parameter

[AbdullahAlhariri]

Thanks for responding.

I understand the goal of the base64 URLs.
I wanted to give people a customizable badge directly from the URL
like the previous URL that I have provided to you.
Are there some Shields docs available for this purpose? (uploading SVG's for reuse in URLs)

Thanks a lot

[calebcartwright]

If your goal is to make your logo available for other people, you could consider providing custom Endpoint badge depending on your desired degree of customization. The Endpoint can set attributes like the logo (no base64 encoding required), but like our other dynamic badges, it doesn't allow for the message text to be configured.

However, custom logo distribution/marketing is not a goal/objective of the Endpoint badge. More generally the Shields project isn't in the business of promoting/marketing any product or icon, so if your ultimate goal is indeed to get other people to use your custom logo then you'll want to promote your logo elsewhere (and can include the base64 string in your docs to make it easier for people to add to their badges)

[AbdullahAlhariri]

Thanks for your awesome help

[AbdullahAlhariri]

Your "short" url is not using a custom logo, it is using one of the Simple Icon logos. This is also documented on the same doc page sent previously, https://github.com/badges/shields/blob/master/doc/logos.md#using-logos. If the Simple Icon set contains a logo you want, then you just need to specify the corresponding icon slug as-defined by Simple Icons.

Hi, can you please provide me with the Simple Icon set.

btw, thank you very much for your awesome work ♥

[AbdullahAlhariri]

Your "short" url is not using a custom logo, it is using one of the Simple Icon logos. This is also documented on the same doc page sent previously, https://github.com/badges/shields/blob/master/doc/logos.md#using-logos. If the Simple Icon set contains a logo you want, then you just need to specify the corresponding icon slug as-defined by Simple Icons.

Hi, can you please provide me with the Simple Icon set.

btw, thank you very much for your awesome work ♥

I just found it, thanks