Weird Blue Underline when incorporating badge using <Object> Tag

[DylanDevelops]

Are you experiencing an issue with...

My own instance of shields

🐞 Description

Reading the documentation, it said that I could add a link that the user can go to when clicking the badge by incorporating the image inside of an object tag. I did just that and the button is now clickable, however, it has a weird link underline that shows up.

Is there any way to get rid of this? Am I incorporating the object tag incorrectly? Let me know!

This is the code I have:

<object data="https://img.shields.io/website?url=https%3A%2F%2Fwww.dylanravel.com%2Fcontact&up_message=Contact&up_color=orange&style=for-the-badge&label=Send%20a%20Message&link=https%3A%2F%2Fwww.dylanravel.com%2Fcontact&link=https%3A%2F%2Fwww.dylanravel.com%2Fcontact">
    <a href="https://www.dylanravel.com/contact" style="text-decoration: none">
        <img alt="Website" src="https://img.shields.io/website?url=https%3A%2F%2Fwww.dylanravel.com%2Fcontact&up_message=Contact&up_color=orange&style=for-the-badge&label=Send%20a%20Message&link=https%3A%2F%2Fwww.dylanravel.com%2Fcontact&link=https%3A%2F%2Fwww.dylanravel.com%2Fcontact">
    </a>
</object>

🔗 Link to the badge

README File In Which this Occurs: https://github.com/DylanDevelops/DylanDevelops

💡 Possible Solution

I tried adding text-decoration: none to the link inside of the object tag but it is still there.

[chris48s]

I think you're mixing and matching 2 concepts.

There are some badges where the SVG itself includes one or two links, but that functionality (and lots of other SVG functionality) is disabled if you embed them with an <img> tag.

In environments where you're allowed to use the <object> tag (for example, your own website, but not in a GitHub README - that's not a place where you can use an object tag), you can embed those badges with an <object> tag. You don't put anything inside the object tag. You just embed it like this:

<object data="https://img.shields.io/badge/Send%20a%20Message-Contact-orange?style=for-the-badge&link=https%3A%2F%2Fwww.dylanravel.com%2Fcontact"></object>

and the links embedded in the SVG will work.

Separately from that, you can embed any badge using an <img> tag and wrap it with any link using an <a> tag (regardless of whether the SVG itself has any links embedded or not), which is allowed in a GitHub README.

<a href="https://www.dylanravel.com/contact">
    <img alt="Website" src="https://img.shields.io/badge/Send%20a%20Message-Contact-orange?style=for-the-badge">
</a>

---

tl;dr: replace your code with

<a href="https://www.dylanravel.com/contact">
    <img alt="Website" src="https://img.shields.io/badge/Send%20a%20Message-Contact-orange?style=for-the-badge">
</a>

and it will do what you want with no rendering issues.

[DylanDevelops]

@chris48s I incorporated your changes, and it still has rendering issues. Can you tell if it is something else causing it? Let me know! https://github.com/DylanDevelops/DylanDevelops/blob/main/README.md

[chris48s]

If you look at it in dev tools, that underline is indicating some whitespace is a link.

I suspect this is a quirk of the way you're mixing and matching html and markdown.

I'd try replacing it with either

<a href="https://www.dylanravel.com/contact"><img alt="Website" src="https://img.shields.io/badge/Send%20a%20Message-Contact-orange?style=for-the-badge"></a>

or

[![Website](https://img.shields.io/badge/Send%20a%20Message-Contact-orange?style=for-the-badge)](https://www.dylanravel.com/contact)

[DylanDevelops]

This fixed it! Thank you so much!