网站建设如何使用SVG
在网站建设中使用SVG是非常棒：它们很小，可以在任何规模上看起来都很清晰，并且可以自定义而无需创建单独的文件。但是，今天我感觉Web标准中缺少一些东西：一种将它们包含为外部文件的方法，该文件也保留了格式的自定义功能。
为了解决这个问题，我创建了一个名为svg-loader的库。简而言之，它通过XHR提取SVG文件并将其作为内联元素加载，从而使您可以自定义诸如fill和的属性stroke，就像内联SVG一样。例如，我在副项目SVGBox上有一个徽标。不用为每个变体创建一个不同的文件，我可以拥有一个文件并自定义填充颜色：
我曾经data-src设置SVG文件的URL。该fill属性将覆盖fill原始SVG文件。要使用该库，我唯一要确保的是提供的文件具有适当的CORS标头，以使XHR成功。该库还在本地缓存文件，从而使后续操作更快。即使是第一次加载，其性能也可以与使用<img>标签相媲美。
这个概念并不新鲜。svg-inject做类似的事情。但是，svg-loader更易于使用，因为我们只需要在代码中的某个地方（通过<script>标签或JavaScript包）包含库即可。不需要额外的代码。
为了解决这个问题，我创建了一个名为svg-loader的库。简而言之，它通过XHR提取SVG文件并将其作为内联元素加载，从而使您可以自定义诸如fill和的属性stroke，就像内联SVG一样。例如，我在副项目SVGBox上有一个徽标。不用为每个变体创建一个不同的文件，我可以拥有一个文件并自定义填充颜色：
我曾经data-src设置SVG文件的URL。该fill属性将覆盖fill原始SVG文件。要使用该库，我唯一要确保的是提供的文件具有适当的CORS标头，以使XHR成功。该库还在本地缓存文件，从而使后续操作更快。即使是第一次加载，其性能也可以与使用<img>标签相媲美。
这个概念并不新鲜。svg-inject做类似的事情。但是，svg-loader更易于使用，因为我们只需要在代码中的某个地方（通过<script>标签或JavaScript包）包含库即可。不需要额外的代码。
相关资讯
阿里云、腾讯云、华为云严选优质服务商
