GitHub渲染SVG时内嵌GIF因CSP限制加载失败求解决方案

问题描述 #

本地可正常显示的SVG，在GitHub上无法加载内嵌的GIF/APNG/WebP，报错信息如下：

Refused to load the image 'https://raw.githubusercontent.com/Yuvi-raj-P/Yuvi-raj-P/a7003f776781f2818d616069447ffed3e0b1f910/(moon-12.gif)' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

尝试在SVG内添加<meta>标签设置Content Security Policy无效。

解决办法 #

• 转换为原生SVG动画：将GIF的每一帧导出为静态图像，在SVG中使用<animate>或<animateTransform>标签实现动画，完全内嵌无需外部资源，彻底规避CSP限制。
• Base64编码内嵌：将动图文件转换为Base64编码，直接写入SVG的<image>标签的href属性（格式：data:image/gif;base64,【编码内容】），无需加载外部资源，符合GitHub的CSP规则。
• 修正文件名：当前动图文件名包含括号(moon-12.gif)，可能引发URL解析问题，重命名为不含特殊字符的名称（如moon-12.gif）后更新SVG内的引用路径。
• GitHub Pages托管：将SVG和动图上传到GitHub Pages，通过Pages域名访问，其CSP规则更宽松，支持加载同域资源。

用户提供的SVG代码 #

<svg id="Screen" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 800 400" width="800px" height="400px" direction="ltr">
    <meta http-equiv="Content-Security-Policy" content="default-src 'none'; connect-src 'self';font-src 'self'; img-src 'self' data: https:; style-src 'self' ; script-src 'self'"></meta><!--This Line Doenot Work Too-->


    <g style="isolation:isolate">

            

        </g>

    <style>
   
        @keyframes Float {
            50%{
                transform: translateY(-10px);
            }
        }
        @keyframes fadeout {
            100% { opacity: 1; }
            0% { opacity: 0; }
        }
        @keyframes fadein {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }
        #cursor {
            position: fixed;
            pointer-events: none;
            transform: none;
            transform-origin: center center;
            transition: all 300ms ease-out;
            padding: 2px;
        }
        .cursor-circle {
          stroke-dasharray: 500;
          stroke-dashoffset: 1000;
          transition: stroke-dashoffset 5s ease-out;
        }
        .cursor-circle.animate {
          stroke-dashoffset: 0;
          /* stroke: white; */
        }
        :root {
          --border: rgb(3, 169, 244);
          --g1: rgb(98, 0, 234);
          --g2: rgb(236, 64, 122);
          --g3: rgb(253, 216, 53);
        }
        .card {
            fill:black;
            stroke-width:3;
        }
        
        
    </style>

     


    <defs>


        <clipPath id="outer_rectangle">


            <rect width="800" height="400" rx="4.5"/>


        </clipPath>

        
            

        <linearGradient id="Gradi">

          <stop offset="5%" stop-color="#5a6a8a" />

          <stop offset="95%" stop-color="#4c4088" />

        </linearGradient>


    </defs>


    <g clip-path="url(#outer_rectangle)">

        <filter id="blur">

            <feGaussianBlur stdDeviation="15" />

        </filter>


        <rect class="card"  rx="4.5" x="0.5" y="0.5" width="790" height="390" />
        <!--The Boot Animation-->
        
        <image href="(moon-12.gif)" alt="Loading Moon" width="150" height="150" x="320" y="120"/>
        <text x="390" y="290" stroke-width="0" text-anchor="middle" style="font-family:Abhaya Libre, sans-serif;font-weight:700;font-size:20px;font-style:normal;fill:#fff; opacity: 0.3; animation: Float 2s ease infinite">

            Loading A Moon For You 

        </text>
        <!--<circle cx="700" cy="400" r="100"  fill="url(#Gradi)"  filter="url(#blur)"/> -->

        <g style="isolation:isolate">


            <!-- Total Contributions Big Number -->

            

            <g transform="translate(100,28)">

                

                
            </g>

        </g>
        
    </g>
    
     


</svg>

内容的提问来源于stack exchange，提问作者Yuvi Raj