关于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插件可以简化上述过程：

// 不使用webpackimport Image1 from ‘react-svg-loader!./image1.svg‘;// 使用webpack配置了react-svg-loaderimport 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 ???????????????} ????????????] ??????????????????????????????????????} ???????} ???] ???}

其他

【HTML5-基础-SVG实践】

原文地址：https://www.cnblogs.com/wanxiong/p/html5-basic-svg-implement.html