网站制作如何使用SVG

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