好多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的更多相关文章

  1. image src base64 svg

    1.显示img: 大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如:data:image/png;base64, iVBORw0KGgoAAAANSUhEUgA ...

  2. SVG & Blob & Base64

    SVG & Blob https://developer.mozilla.org/en-US/docs/Web/API/Blob SVG & Base64 https://develo ...

  3. 8个实用的SVG工具，20 个有用的 SVG 工具，五款超实用的开源SVG工具

    8个实用的SVG工具 [导读] 你还在为没有好用的SVG工具而发愁吗?开发人员的福音来啦!小编为大家收集罗列了8款实用的SVG工具,让我们一起来看看吧! SVG可缩放矢量图形(Scalable Vec ...

  4. SVG开发包, 20 个有用的 SVG 工具，提供更好的图像处理

    20 个有用的 SVG 工具,提供更好的图像处理 SVG 现正在 Web 设计领域变得越发流行, 你可以使用 Illustrator 或者 Inkscape 来创建 SVG 图像. 但当进行 Web ...

  5. 使用 font-spider 对 webfont 网页字体进行压缩

    原文链接:使用 font-spider 对 webfont 网页字体进行压缩 随着当前 Web 技术的日新月异,网页界面内容越来越丰富,让人眼花缭乱,其中就包括了网页中的各种自定义字体. 例如,个人博 ...

  6. svg转化成canvas以便生成base64位的图片

    很久前写了关于把html转成图片的一个例子,最近有出了新的问题.利用html2canvas.js文件把html转成base64位的图片是没什么问题的,但也不是绝对的,比如这时候不能碰见svg这个鬼,h ...

  7. SVG:textPath深入理解

    SVG的文本可以沿着一条自定义的Path来排布,比如曲线.圆形等等,使用方式如下所示(来源MDN): <svg viewBox="0 0 1000 300" xmlns=&q ...

  8. 用svg制作loading动画

    首先说明:由于各浏览器对svg动画事件支持不统一,此loading动画在Firefox,Opera,Chrome中均没有问题,IE和Safari中有问题,可能是不支持SIML写动画的语法, 但是用Ca ...

  9. 绘制SVG内容到Canvas的HTML5应用

    SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术,两种绘制图形方式各有优缺点,但两者并非水火不容,尤其是SVG内容可直接绘制在Canvas上的功能,使得两者可以完美的融合在一起, ...

随机推荐

  1. POJ 3468 (线段树 区间增减) A Simple Problem with Integers

    这题WA了好久,一直以为是lld和I64d的问题,后来发现是自己的pushdown函数写错了,说到底还是因为自己对线段树理解得不好. 因为是懒惰标记,所以只有在区间分开的时候才会将标记往下传递.更新和 ...

  2. 多个MapReduce作业相互依赖时，使用JobControl进行管理

    要处理复杂关系的数据,一个工程里面绝对不止一个MapReduce作业,当有多个MapReduce作业时,       并且每个作业之间有依赖关系,所谓的依赖就是一个作业得到的结果是另外一个作业的输入, ...

  3. Git之 基本常用命令

    Git基本常用命令如下: mkdir:         XX (创建一个空目录 XX指目录名) pwd:          显示当前目录的路径. git init          把当前的目录变成可 ...

  4. python练习程序（c100经典例19）

    题目: 一个数如果恰好等于它的因子之和,这个数就称为“完数”.例如6=1+2+3.编程找出1000以内的所有完数. def foo(a): sra=a; lis=[1]; while 1: for i ...

  5. 【网络】js调试F12控制台学习

    http://www.cnblogs.com/52cik/p/js-console-acquaintance.html console.log 输出信息 http://javascript.ruany ...

  6. C# 创建系统服务并定时执行【转载】

    [转载]http://www.cnblogs.com/hfzsjz/archive/2011/01/07/1929898.html C# 创建系统服务并定时执行 1.新建项目 --> Windo ...

  7. RegEx正则表达式学习笔记

    一.实用的例子 public static void main(String[] args) { // 简单练习 System.out.println("-123".matches ...

  8. bzoj1833 digit

    这道题其实挺水,只是写的时候需要想清楚.我的方法是: 1.将[a,b]转化为[0,b+1)-[0,a) 2.预处理出非0的v在区间[0,10^p)出现次数以及0在区间[0,10^p)出现数 3.将一个 ...

  9. UI控件入门

    其实整个学习过程.确实有点儿混乱,因为不懂的东西太多,一会儿看这,一会儿看那,马上就乱了. 还是先做点儿简单的事儿,说控件,但不会说完全,只是入个门,知道怎么学控件,具体要学好每一个控件需要项目中磨练 ...

  10. ps教程-三分钟画齿轮