【HTML5-基础-SVG实践】

关于svg

HTML页面常用加载svg图片方式：

• HTML元素

// data 和 type 至少指定一项
<object data = './public/icon.svg' width='20' height='20' name='svg' type='image/svg+xml' usemap="#nameOfMap" ></object>

• HTML元素(不推荐)
• iframe

    <iframe src="./location-1.svg" frameborder="0" style="background-color: #666;"></iframe>

• HTML元素
• CSS[background-image]属性

react-svg

在react项目中使用svg,建议使用react-svg.

react-svg即一个封装后的React组件。它的目的在于利用SVGinjector把SVG添加到DOM中。

import React from 'react';
import ReactDOM from 'react-dom';
import ReactSVG from 'react-svg';
ReactDOM.render(
  <ReactSVG
    path="atomic.svg"
    callback={svg => console.log(svg)}
    className="class-name"
    wrapperClassName="wrapper-class-name"
  />,
  document.querySelector('.Root')
);

在实际开发中，使用上面的方法插入svg同样繁琐。利用react-svg-loader插件可以简化上述过程：

// 不使用webpack
import Image1 from 'react-svg-loader!./image1.svg';
// 使用webpack配置了react-svg-loader
import Image2 from './image1.svg';
// 像普通react组件那样使用它， react-svg-loader会在自动将它替换为DOM
<Image1 width={50} height={50}/>
<Image2 width={50} height={50}/>

webpack中设置：

{
    test: /\.svg$/,
    use: [
        {loader: 'babel-loader'}
        {
         loader: 'react-svg-loader'
        }
    ]
}

react-svg-loader内部流程

输入svg -> 使用SVGO进行SVG优化 -> 编译转换

因此webpack中可以配置SVGO参数

{
    test: /\.svg$/,
    use: [
        {loader: 'babel-loader'}
        {
         loader: 'react-svg-loader',
         options:{
             svgo: [
                {
                    removeTitle: false
                }
             ]
         }
        }
    ]
}

其他