据说有些网站全站使用了inline svg来展示icon, 遇到重复的岂不浪费流量？

Question

据说github,iconfont等网站采用inline svg，这个说法不全面吧，遇到重复的怎么办？

Answer 1

使用 inline SVG 展示 icon 确实可以减少网站的 HTTP 请求次数，加速页面加载速度和提高性能。即使多个元素使用相同的 SVG 内容，它们也只需要载入一次，而不是每个元素单独加载。

如果一个网站使用的是公共的副本，例如 GitHub 或者 Iconfont 网站，可能不会遇到重复加载的问题，因为这些图标集是公用的，通常通过 CDN 加载，而不是直接在网站服务器上加载。

但是，如果网站中使用的 SVG 文件不是公共的，而是由网站自己管理的，则可能会遇到重复加载的问题。为了解决这个问题，可以使用一些缓存技术，例如浏览器缓存或者内容分发网络（CDN）缓存。这些技术可以帮助减少重复加载同一 SVG 文件的次数，从而减少网络流量浪费。

此外，如果您使用的是某些前端框架，例如 React 或者 Vue，还可以使用组件化的方式来减少重复加载 SVG 文件的次数。这些框架通常支持将 SVG 内容封装成可复用的组件，在需要使用的地方引用该组件即可。

总之，使用 inline SVG 可以有效减少 HTTP 请求次数，提高页面性能，但需要注意重复加载的问题，并通过缓存技术和组件化的方式来减少网络流量浪费。