Search code examples
github-flavored-markdown

Is there a way to maintain SVG transparency in GFM

I have a GitHub repo for my profile "username/username" and on the README.MD I've got the following line.

<code><img width=32 src="res/github.svg"> Github</code>

This line of code corresponds to the following preview:

Example

For some reason, the portions of the SVG which are transparent are rendered as white as you can see around the outside of the black circle.

Is there anyway I can get the transparency to function as intended?

Solution

  • UPDATE: thanks for posting a link to your mentioned web page. Added solution below.

    It might be a simple issue with the white background defined as element near the top of the file. This is usually done by designers using Adobe Illustrator to retain the artboard dimensions when exporting image to SVG. So I suspect the cat logo has a white background enabled somewhere.

    There's also a possibility of the enable-background attribute but it's hard to tell before your exact image is checked.

    ADDED: the white background behind otherwise transparent SVG logos is because of the image style, defined in the images.scss (that I believe gets called by main CSS files linked in the page).

    enter image description here

    You cannot see I've removed the check for this style attribute in browser Developer Tools yet this removes the white background behind the logo images.

    I don't believe you can change that (GitHub should implement that) unless it's possible to override that style in your profile with a style like:

    .markdown-body img { background-color: none !important }

    to redefine the global style causing your aesthetic displeasure.