Even though GitHub Readme files (typically ./readme.md) are Markdown, and although Markdown supports HTML, you can’t put <style> or <script> tags init. (Well, you can, they just get stripped.) So you can’t apply custom styles there. Or can you?
- You can use SVG as an
<img src="./file.svg" alt="" />(anywhere). - When used that way, even stuff like animations within them play (wow).
- SVG has stuff like
<text>for textual content, but also<foreignObject>for regular ol’ HTML content. - SVG support
<style>tags. - Your
readme.mdfile does support<img>with SVG sources.
Sindre Sorhus combined all that into an example.
That same SVG source will work here:
If anyone is thinking “hey! I’ve seen something like that in CRA”, yes you have (PR#3816).
asciinema+svg-term-cli(orasciicast2gif) is a pretty slick way to make your READMEs pop especially if you are showcasing CLIsVery Usefull
Oh, seems like the tags have been stripped… So here we go again, with properly encoded brackets:
Can you elaborate on the role of <foreignObject> for animated SVGs? Except for maybe the text-shadow in this example, shouldn’t <style> itself be sufficient?
I even tried it out with another example of an animated SVG header image: https://raw.githubusercontent.com/pmndrs/valtio/master/logo.svg – and indeed it seems to work even when the <foreignObject> is removed and the <style> placed inside the SVG directly (except for obviously ruining the positioning of the elements which would have to be fixed).
Am I missing something?
Hi,
I used this trick to add support to
prefers-color-schemein images, so now you can use one image to dark theme an another to light theme. I think it is pretty usefull in READMEs.I implemented this approach in the
github-readme-activity-graphproject.You can read more in my readme that show how to do it.
I hope you find it useful
Thanks!
Good trick!
I just wondered, is it possible to change the style of the body element?
Thanks!