使用 SVG 的更好方法

GenAI LIVE! | 2025年6月4日

2021 年了，我们仍然没有找到最佳的 SVG 使用方法。内联 SVG 具备所有优点——可以直接修改填充颜色、使用 CSS 变量以及修改内部 SVG 元素——但也有一个明显的缺点，那就是会让代码变得混乱。

将它们存储在外部是一个更好的选择，但使用它们的唯一可靠方法是 <img> 标签，但它具有严重的局限性。



<!-- Can't modify the fill color if you want -->
<img src="/path/to/img.svg" />

为了解决这个问题，我创建了一个库，它提供了内联 SVG 的所有优点，同时仍然将它们存储在外部。它叫做svg-loader。

例如，检查我的项目的SVG 徽标。



<img src="https://s2.svgbox.net/assets/logo-white.svg" />

预览

由于填充颜色未定义，它将默认为黑色，并且您无法对其进行太多更改。有一些使用 filter 属性的 hack 可以解决这个问题，但它们很复杂且不易修改。

svg-loader来了。你只需将脚本放入其中，外部 SVG 就会被获取并注入到元素内部。就像这样：



<script type="text/javascript" src="https://unpkg.com/external-svg-loader@1.0.0/svg-loader.min.js" async></script>

<div style="display:flex;">
    <div style="background:black;">
        <svg data-src="https://s2.svgbox.net/assets/logo-white.svg" fill="yellow"></svg>
    </div>
    <div style="background:purple;">
        <svg data-src="https://s2.svgbox.net/assets/logo-white.svg" fill="white"></svg>
    </div>
    <div style="background:green;">
        <svg data-src="https://s2.svgbox.net/assets/logo-white.svg" fill="white"></svg>
    </div>
</div>

预览

在 JS Fiddle 上查看

该库非常轻量，压缩后小于 2KB。加载速度极快，并且支持更长时间的缓存。因此，无需重复加载图片。而且几乎可以在任何地方使用。

兼容 React、Vue、Angular

svg-loader 与框架无关，可与大多数前端框架兼容。你只需要在某个地方引入该库，其他一切都会自行处理：



import React from 'react'
import ReactDOM from 'react-dom'

import 'external-svg-loader';

class App extends React.Component {
  render () {
    return (
      <svg
        data-src="https://s2.svgbox.net/materialui.svg?ic=mail"
        fill="currentColor"
        width="50px"
        height="50px"
        style={{
          color: 'red'
        }}
      />
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

在 Codesandbox 上查看

注意：由于使用 XHR 来获取资源，因此资源需要与CORS 策略兼容。

有想法？有问题？欢迎在这里回复。

鏂囩珷鏉ユ簮锛�https://dev.to/shubhamjain/a-better-way-to-use-svgs-1mg9

使用 SVG 的更好方法 GenAI LIVE！| 2025 年 6 月 4 日

使用 SVG 的更好方法

GenAI LIVE! | 2025年6月4日

兼容 React、Vue、Angular