好多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. How to: Modify a Project System So That Projects Load in Multiple Versions of Visual Studio

    http://msdn.microsoft.com/en-us/library/hh266706(v=VS.110).aspx

  2. 【JavaScript学习笔记】鼠标样式

    style="cursor:hand"   手形 style="cursor:crosshair"   十字形       style="cursor ...

  3. HDU 5001 Walk

    解题思路:这是一道简单的概率dp,只要处理好相关的细节就可以了. dp[d][i]表示走d步时走到i的改概率,具体参考代码: #include<cstdio> #include<cs ...

  4. taobao

    taobao */--> UP | HOME taobao Table of Contents 1 taobao 1 taobao 欣然小铺 Date: 2013-09-25 Wen Autho ...

  5. 用Jquery Widgets Factory写自己的表格控件——AFGrid（支持增、删、改）

    一,Jquery Widget Factory介绍 官网地址 Demo:http://jqueryui.com/widget/ API:http://api.jqueryui.com/jQuery.w ...

  6. JBPM4之decision节点：2、好学生|坏学生|超级学生

    JBPM入门系列文章: JBPM4入门——1.jbpm简要介绍 JBPM4入门——2.在eclipse中安装绘制jbpm流程图的插件 JBPM4入门——3.JBPM4开发环境的搭建 JBPM4入门—— ...

  7. IOS OC声明变量在@interface括号中与使用@property的区别（转载）

    刚开始接触OC再看别人写的代码的时候,常常困惑于人家在声明属性时的写法,总结出来有三中方式,不知道哪一种比较规范化,现在我把三种方式贴出来,然后再一一探讨每个方式声明属性的区别. 方式一:直接在@in ...

  8. 3500常用汉字与标点符号（已排除不支持GB2312的）

    .?!,.::“”‘’…()<>〈〉[].,:;!?-'_"'()[]<>|&~;+-*/=<>0123456789ABCEFGHIJKLMNOP ...

  9. C# 阳历转农历

    你妹的sb 原文 C#(ASP.NET)公历转农历的简单方法 Dot Net 平台,对全球化的支持做的非常好,不得不称赞一个 通常,将公历转为农历,是个非常烦的事情,需要整理闰年.闰月等的对照表. 在 ...

  10. OE7设置菜单为什么这么少？

    默认安装的OE7设置菜单只有很少的功能: 如果需要更多的OE定制,必须开启“技术特性”选项: