svg的内联使用和外联引用，哪个好

Question

方式一

<div>
    <svg />
</div>

方式二

<div>
    <img src={'./demo.svg'} />
</div>

这两种方式，哪个好？

Answer 1

后者会多产生一个 HTTP 请求；前者会使得 HTML/JS 本身体积膨胀。

之所有两种都存在，就是没有最优解，这个要看实际项目的取舍。

比如你页面上有几十上百个 SVG、且体积都挺大的，那么外联 + 缓存 + HTTP/2 往往是比较好的选择。但如果你拢共俩 SVG、加一起都不到 1KB，那么内联就很不错。

Answer 2

以 react.js 为例
直接把一种图标当成一种组件的方式，既不会是 html 膨胀，也不会额外发一次图片请求
这种方式叫 svgr，是 create-react-app 内置的， vue 项目配置 webpack 相应的 loader 也能够支持
至于哪种更好，适合自己项目的才更好

import React, { Component } from 'react';
import logo from './logo.svg'
import { ReactComponent as Logo } from './logo.svg'
import './App.css'
class App extends Component {
  render() {
    return (
      <div className="App">
        <img src={logo} className="App-logo" alt="logo" />
        <Logo className="App-logo" alt="logo" stroke="#DB7290" strokeWidth="1rem"/>
      </div>
    );
  }
}
export default App;