关于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
}
] }
}
] }

其他

【HTML5-基础-SVG实践】的更多相关文章

  1. html5 基础入门

    html5 基础入门 前言介绍 HTML5草案的前身名为 Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的 HTML工作团队. 如果从狭 ...

  2. HTML5 基础测试题

          HTML5 基础测试题 1.HTML5 之前的 HTML 版本是什么?() A.HTML 4.01 B.HTML 4 C.HTML 4.1 D.HTML 4.9 2.HTML5 的正确 d ...

  3. 突袭HTML5之SVG 2D入门1 - SVG综述////////////////zzzzzzzz

    以二次贝塞尔曲线的公式为例: js函数: //p0.p1.p2三个点,其中p0为起点,p2为终点,p1为控制点 //它们的坐标用数组表示[x,y] //t的范围是0-1 function qBerzi ...

  4. HTML5实战——svg学习

    百度百科: SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式.SVG是W3C制定的一种新的二维矢量图形格式,也 ...

  5. html5基础的常用的技巧

    html5基础的常用的技巧 1. 新的Doctype声明 XHTML的声明太长了,我相信很少会有前端开发人员能手写出这个Doctype声明. <!DOCTYPE html PUBLIC &quo ...

  6. HTML5基础知识及相关笔记

    HTML5基础 1.1HTML文件的基本结构和W3C标准 1.1.1HTML简介 HTML是一种描述网页的语言,一种超文本标记的语言! 1.1.2HTML文件的基本结构 头部(head) 头部是网页的 ...

  7. MSF基础攻击实践报告

    MSF基础攻击实践 MSF的六个模块:exploit,encoder,payload,aux,post,nops exploit——渗透攻击模块 测试者利用它来攻击一个系统,程序,或服务,以获得开发者 ...

  8. HTML5基础——笔记

    HTML5基础——笔记 近几年来,互联网+.大数据.云计算‘物联网‘虚拟现实‘人工智能.机器学习.移动互联网等IT相关新名词.新概念层出不穷,相关产业发展如火如荼.互联网+移动互联网已经深入到人民日常 ...

  9. 原创 HTML5:JS操作SVG实践体会

    在工业信息化系统里,常常需要动态呈现系统的数据在一张示意图里,用于展现系统状态,分析结果等.这样用JavaScript操作svg 元素就有现实意义.本人近期做了一些实践,现分享一下. 需求: 你下面这 ...

  10. HTML5学习--SVG全攻略(基础篇)

    明天高级篇 一.什么是SVG? SVG 指的是可伸缩矢量图形 (Scalable Vector Graphics),它用来定义用于网络的基于矢量的图形,使用 XML 格式定义图形.SVG 图像在放大或 ...

随机推荐

  1. git基础命令。

    创建一个新的本地仓库    git init 克隆远程服务器    git clone URL 打开一个文件夹   cd 添加文件   git add . 本地提交更改   git commit -m ...

  2. 在PHP中使用加密技术

    Gpg4win 是一款基于 GPG 的非对称加密软件.非对称加密方式,简单理解就是用公钥加密文件,用私钥解密文件.如果你需要发送加密信息,首先获取接收者的公钥,然后利用该公钥加密后传递,对方利用对应的 ...

  3. 学习ssm心得

    学习是一个探索的过程,在我编程能力提高的阶段中,我发现在编写代码之前,必须得弄清代码的逻辑,我到底要干什么,从哪一步做起.端与端之间该怎么衔接. 先把问题想清楚,再去编写.不要急着去乱敲一通,一点用处 ...

  4. Android中使用异步线程更新UI视图的几种方法

    在Android中子线程是不能更新ui的. 所以我们要通过其他方式来动态改变ui视图, 1.runOnUiThreadactivity提供的一个轻量级更新ui的方法,在Fragment需要使用的时候要 ...

  5. C#跨线程调用窗体控件(比如TextBox)引发的线程安全问题

    如何:对 Windows 窗体控件进行线程安全调用 访问 Windows 窗体控件本质上不是线程安全的. 如果有两个或多个线程操作某一控件的状态,则可能会迫使该控件进入一种不一致的状态. 还可能会出现 ...

  6. 哪个HTML5内建对象用于在画布上绘制?()

    哪个HTML5内建对象用于在画布上绘制?() getContent getContext getGraphics getCanvas 我的理解: A.C.D不存在HTML5,,js方法中 HTML 5 ...

  7. golang开发不错的参考资料

    https://golangbot.com/learn-golang-series/ https://gist.github.com/ivangabriele/1c552aadc247c0a2f256 ...

  8. Effective C++(9) 构造函数调用virtual函数会发生什么

    问题聚焦: 不要在构造函数和析构函数中调用virtual函数,因为这样的调用不会带来你预想的结果. 让我先来看一下在构造函数里调用一个virtual函数会发生什么结果 Demo class Trans ...

  9. Java学习---连接数据库操作

    Java连接Oracle数据库 package com.ftl.mysql; import java.sql.Connection; import java.sql.DriverManager; im ...

  10. 探寻IIS最大并发数

    原文链接,http://www.cnblogs.com/birdshover/archive/2009/08/16/1547025.html 原文评论值得一看!   测试系统Window 2003 S ...