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上的功能,使得两者可以完美的融合在一起, ...
随机推荐
- UVA 11354 Bond 邦德 (RMQ,最小瓶颈MST)
题意: n个城市,m条路,每条路有个危险值,要使得从s走到t的危险值最小.回答q个询问,每个询问有s和t,要求输出从s到t最小的危险值.(5万个点,10万条边) 思路: 其实要求的是任意点对之间的最小 ...
- erl0006 - erlang 查看进程状态,查看当前系统那些进程比较占资源
http://lfstar.blog.163.com/blog/static/56378987201341115037437/ 查看哪些进程占用内存最高? > spawn(fun() -> ...
- 【转】DB2 常用命令
1. 打开命令行窗口 #db2cmd 2. 打开控制中心 # db2cmd db2cc 3. 打开命令编辑器 db2cmd db2ce =====操作数据库命令===== 4. 启动数据库实例 ...
- Write operations are not allowed in read-only mode错误
(转+作者个人理解) 最近在配置 Structs, Spring 和Hibernate整合的问题: 开启OpenSessionInViewFilter来阻止延迟加载的错误的时候抛出了这个异常: org ...
- nodejs开发阶段利器supervisor
在开始学习nodejs时,往往一般写代码,一边看效果.先停止node,再重新运行.非常耗时. 这时supervisor派上了用场. 安装 推荐使用npm,本人一直使用局部安装,这样可以将全部文件安装在 ...
- 关于微信扫描二维码下载apk文件的细节设计
微信使用的人数越来越多,渐渐的用户形成了一种习惯,扫描二维码的时候,也会打开微信去扫描,但是微信不支持第三方的链接下载,有些厂商已经发现了这一特点,所以在使用二维码下载自家的app时,会做一个提示,引 ...
- 查看Linux下端口占用情况的命令
在使用Linux系统的过程中,有时候会遇到端口被占用而导致服务无法启动的情况.比如HTTP使用80端口,但当启动Apache时,却发现此端口正在使用. 这种情况大多数是由于软件冲突.或者默认端口设置不 ...
- ECSide标签属性说明之<ec:column>
<ec:column>标签 ◆ 属性: columnId描述: 单元格的id,相当于<td>的id属性 ◆ 属性: title描述: 列在列表表头里显示的名称. ◆ 属性: p ...
- OFBIZ+ECLIPSE
1. 首先要安装好OFBIZ,参考<OFBIZ安装>. 2. 安装ECLIPSE. 3. 安装FreeMarker插件,这是OFBIZ的模版引擎.在"Eclipse Market ...
- maven(一)初步搭建,项目结构
一.环境准备 java环境, jdk 1.5 以上 MyEclipse集成工具,我装的是8.5 版本 二.快速安装及配置 1.下载maven: http://maven.apache.org/docs ...