svg base64
好多h5页面有出现data:image/png;base64,后面跟了一串类似乱码的字母
查了下原来这也是svg或者是图片
<img src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg==”/>
这种写法是把图像文件的内容直接写在了HTML 文件中,
好处是,
节省了一个HTTP 请求。
坏处呢,
就是浏览器不会缓存这种图像。
大家可以根据实际情况进行自由取舍。
转换工具:
http://tool.oschina.net/encrypt?type=4
直接使用装换出来的img即可
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='0' x2='200' y2='200' style='stroke:rgb(255,0,0);stroke-width:2' /> </svg>" />
这样就可以显示一个svg图片使用base64编码。
在线base64 加密 link:
http://base64encode.net/
在线base64 解密 link:
http://base64decode.net/
svg base64的更多相关文章
- image src base64 svg
1.显示img: 大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如:data:image/png;base64, iVBORw0KGgoAAAANSUhEUgA ...
- SVG & Blob & Base64
SVG & Blob https://developer.mozilla.org/en-US/docs/Web/API/Blob SVG & Base64 https://develo ...
- 8个实用的SVG工具,20 个有用的 SVG 工具,五款超实用的开源SVG工具
8个实用的SVG工具 [导读] 你还在为没有好用的SVG工具而发愁吗?开发人员的福音来啦!小编为大家收集罗列了8款实用的SVG工具,让我们一起来看看吧! SVG可缩放矢量图形(Scalable Vec ...
- SVG开发包, 20 个有用的 SVG 工具,提供更好的图像处理
20 个有用的 SVG 工具,提供更好的图像处理 SVG 现正在 Web 设计领域变得越发流行, 你可以使用 Illustrator 或者 Inkscape 来创建 SVG 图像. 但当进行 Web ...
- 使用 font-spider 对 webfont 网页字体进行压缩
原文链接:使用 font-spider 对 webfont 网页字体进行压缩 随着当前 Web 技术的日新月异,网页界面内容越来越丰富,让人眼花缭乱,其中就包括了网页中的各种自定义字体. 例如,个人博 ...
- svg转化成canvas以便生成base64位的图片
很久前写了关于把html转成图片的一个例子,最近有出了新的问题.利用html2canvas.js文件把html转成base64位的图片是没什么问题的,但也不是绝对的,比如这时候不能碰见svg这个鬼,h ...
- SVG:textPath深入理解
SVG的文本可以沿着一条自定义的Path来排布,比如曲线.圆形等等,使用方式如下所示(来源MDN): <svg viewBox="0 0 1000 300" xmlns=&q ...
- 用svg制作loading动画
首先说明:由于各浏览器对svg动画事件支持不统一,此loading动画在Firefox,Opera,Chrome中均没有问题,IE和Safari中有问题,可能是不支持SIML写动画的语法, 但是用Ca ...
- 绘制SVG内容到Canvas的HTML5应用
SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术,两种绘制图形方式各有优缺点,但两者并非水火不容,尤其是SVG内容可直接绘制在Canvas上的功能,使得两者可以完美的融合在一起, ...
随机推荐
- POJ 1458 最长公共子序列
子序列就是子序列中的元素是母序列的子集,且子序列中元素的相对顺序和母序列相同. 题目要求便是寻找两个字符串的最长公共子序列. dp[i][j]表示字符串s1左i个字符和s2左j个字符的公共子序列的最大 ...
- MVC+Ef项目(4) 抽象业务逻辑层BLL层
接下来,我们就要到业务逻辑层了,简单的说,业务逻辑层就是调用Repository(可以看做是DAL数据库访问层) 先来看看项目的架构 我们现在就开始来做BLL层. 同样,先编写 UserInfoS ...
- o4.数组指针和指针数组的区别
------- android培训.iOS培训.期待与您交流! ---------- 我们看一下数组指针和指针数组: 数组指针(也称行指针)定义 int (*p)[n];()优先级高,首先说明p是一个 ...
- RPi 2B Android telnet ssh
/*********************************************************************** * RPi 2B Android telnet ssh ...
- Java 动态太极图 DynamicTaiChi (整理)
package demo; import java.awt.Color; import java.awt.Graphics; import javax.swing.JFrame; import jav ...
- Matlab中plot函数参数解析
功能 二维曲线绘图 语法 plot(Y) plot(X1,Y1,...) plot(X1,Y1,LineSpec,...) plot(...,'PropertyName',PropertyValue, ...
- SQLServer的最大连接数 超时时间已到 但是尚未从池中获取连接
很多做架构设计.程序开发.运维.技术管理的朋友可能或多或少有这样的困惑: SQLServer到底支持多少连接数的并发? SQLServer是否可以满足现有的应用吗? 现有的技术架构支持多少连接数的并发 ...
- 对 HTTP 304 的理解
最近和同事一起看Web的Cache问题,又进一步理解了 HTTP 中的 304 又有了一些了解. 304 的标准解释是: Not Modified 客户端有缓冲的文档并发出了一个条件性的请求(一般是提 ...
- 【leetcode】Find Minimum in Rotated Sorted Array II JAVA实现
一.题目描述 Follow up for "Find Minimum in Rotated Sorted Array":What if duplicates are allowed ...
- X86调用约定
cdecl C语言默认的调用约定,从右往左压栈,由调用者负责清栈,所以参数个数可以不固定: stdcall windows默认调用方式,从右往左压栈,由被调用者负责栈操作. pasca ...