您可以在svg文件中的<foreignObject>标记中添加一些HTML（实际上是XHTML）和CSS，然后将其嵌入GitHub README中的<img>标记中。
这是一个简单的CSS动画，它改变了h1文本的颜色：

h1 {
  color: red;
  animation: myanimation 2s infinite;
}
@keyframes myanimation {
  from {
    color: red;
  }
  to {
    color: yellow;
  }
}

个字符
您可以将样式和HTML嵌入到svg内部的<foreignObject>标记中，如下所示：

example.svg

<svg fill="none" viewBox="0 0 400 400" width="400" height="400" xmlns="http://www.w3.org/2000/svg">
    <foreignObject width="100%" height="100%">
        <div xmlns="http://www.w3.org/1999/xhtml">
            <style>
            h1 {
                color: red;
                animation: mymove 2s infinite;
            }
            @keyframes mymove {
                from {
                    color: red;
                }
                to {
                    color: yellow;
                }
            }
            </style>
            <h1>HELLO WORLD!</h1>
        </div>
    </foreignObject>
</svg>

型
然后，最后你可以使用<img>标签将svg嵌入到你的README中，它应该使用应用的CSS样式呈现你的HTML：

README.md

# My GitHub README
Welcome to my README!
<div align="center">
    <img src="example.svg" width="400" height="400" alt="css-in-readme">
</div>

型
another example & source的

出于安全原因，GitHub不允许CSS通过CSS影响README.md文件（就好像你可以将CSS注入ReadMe，你可以很容易地发起钓鱼攻击）。这包括通过<link rel>引用的样式表和<style>使用的内联样式。
自述文件采用markdown语法，因此可以进行一些样式化，例如通过占位符图像添加颜色，就像StackOverflow上的这里一样。例如，您可以使用以下内容添加红色方块

：

- ![#f03c15](https://placehold.it/15/f03c15/000000?text=+) `#f03c15`

字符串
您还可以使用diff，json，html，js和css来影响文本着色。

对于Readme.md文件的简单甚至复杂的样式。您也可以以这种最简单的方式使用SVG，以及其他方式。
这是我的Readme.md与一个例子的风格。Readme.md：

# Using CSS in Readme.md file
Readme.md files do not allow direct CSS classes injection.
Though, there are several ways you can inject a CSS file or link into your README.md file, I prefer using the SVG files for simple styling or even complex charts and tables. [see my simple `Readme.md` example with SVG styling][1]
## ![plot](./title.svg)
This is a title that can be manipulated.
## ![plot](./subTitle.svg)
This is a sub-title with cyan color but can be manipulated

字符串
title.svg:

<svg xmlns="http://www.w3.org/2000/svg" height="80">
    <style src="./style.css" >
        .title {
          transition: fill .3s ease;
          <!-- cursor: works in github not in preview mode -->
          cursor: pointer;
          font-family: Helvetica, sans-serif;
          border-radius: 5px 5px 5px 5px;
          fill:#2c1300;
          text-anchor: middle;
          dominant-baseline: middle;
          font-size: 24px;
        }
    </style>
    <g class="title">
        <rect rx="5" width="100%" height="80"></rect>
        <text x="50%" y="50%" width="" font-weight="bold" fill="yellow" >TypeScript Course</text>
    </g>
</svg>

型
subTitle.svg:

<svg xmlns="http://www.w3.org/2000/svg" height="40">
    <style src="./style.css" >
        .subTitle {
            fill: #00FFFF;
            transition: fill .3s ease;
        }
    </style>
 <g class="subTitle">
        <text x="30%" y="10" dy=".35em">
            TypeScript Jobs
        </text>
    </g>
</svg>

型

将图像 Package 在标签中，如下所示

<div>
<img  src="/images/count.png" width="250" >  &nbsp; 
<img  src="/images/home.png" width="250">  &nbsp;
<img  src="/images/profile.png" width="250">  &nbsp;
</div>

字符串
注意：images文件夹和自述文件在项目的根目录下