好多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. Jqgrid入门-Jqgrid格式化数据(九)

    上一章已经说明了在Jqgrid中如何对数据分组,这一章主要探讨如何格式化Jqgrid中的数据.何谓格式化呢?举个例子,比如对时间格式化处理,去掉后面的时分秒:对数字进行处理,加上千分位分隔符,小数的保 ...

  2. Linux C double linked for any data type

    /************************************************************************** * Linux C double linked ...

  3. 20160128.CCPP体系详解(0007天)

    以下内容有所摘取,进行了某些整理和补充 论浮点数的存储原理:float浮点数与double浮点数的二进制存储原理–>阶码 浮点数转二进制 1.整数int类型和浮点数float类型都是占用4个字节 ...

  4. Heritrix源码分析(十三) Heritrix的控制中心(大脑)CrawlController(二)

    本博客属原创文章,欢迎转载!转载请务必注明出处:http://guoyunsky.iteye.com/blog/650744      本博客已迁移到本人独立博客: http://www.yun5u. ...

  5. 【转】使用Python的IDE:Eclipse+PyDev

    原文网址:http://www.crifan.com/try_with_python_ide_eclipse_pydev/ 之前已经介绍过了一些基本知识: [整理][多图详解]如何在Windows下开 ...

  6. MySQL与Oracle 差异比较之六触发器

    触发器 编号 类别 ORACLE MYSQL 注释 1 创建触发器语句不同 create or replace trigger TG_ES_FAC_UNIT  before insert or upd ...

  7. html:唤起手机qq开始对话 & 自动拨号

    <a href="mqqwpa://im/chat?chat_type=wpa&uin=[qq号]&version=1">XXX</a> 另 ...

  8. RDoc

    RDoc - Ruby Documentation System home github.com/rdoc/rdoc rdoc docs.seattlerb.org/rdoc bugs github. ...

  9. centos ssh 乱码

    vim /etc/sysconfig/i18n 然后把里面的LANG="zh_CN.UTF-8"改成LANG="zh_CN.GB18030"

  10. eclipse 工程加入ant以支持自动打war包

    先在工程的根目录下建一个一builder.xml内容如下 <project basedir="." default="war" name="hb ...