好多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. 打印机C++

    m_prnDC.SetMapMode(MM_LOMETRIC);  m_iPrnX = m_prnDC.GetDeviceCaps(HORZRES);m_iPrnY = m_prnDC.GetDevi ...

  2. Jenkins+Maven+SVN搭建自动部署、自动测试环境

    .打开http://10.3.15.78:8080/jenkins/,第一次进入里面没有数据,我们需要创建job,我们这有2个项目,需要创建2个job.http://10.3.34.163:9890/ ...

  3. 学会简单使用poi进行excel有关操作

    直接上代码: 官网上的抄的api例子: package com.test; import java.io.File; import java.io.FileInputStream; import ja ...

  4. IOS中导航控制器的代理及隐藏控制器刚出现时的滚动条

    一.导航控制器的代理 1.UINavigationController的delegate属性 2.代理方法 1> 即将显示新控制器时调用 /* navigationController : 导航 ...

  5. 长期演进技术(LTE,Long Term Evolution)

    /********************************************************************************* * 长期演进技术(LTE,Long ...

  6. 纵观minecraft 游戏作者的世界观

    minecraft 这款游戏 独特的游戏背景 与 模式 深受我爱 ,游戏的音乐制作方面也是独具一格 但是 整个游戏的风气 充满孤独的色彩 抑郁惆怅的音乐 每当在日出时 响起 ,当你进入生存模式之后 开 ...

  7. [转载] ubuntu Authentication failure

    ubuntu的root用户默认是禁止的,需要手动打开才行.事实上ubuntu下的所有操作都用不到root用户,由于sudo的合理使用,避免了root用户下误操作而产生的毁灭性问题.root账号启用方法 ...

  8. Heritrix源码分析(十一) Heritrix中的URL--CandidateURI和CrawlURI以及如何增加自己的属性(转)

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

  9. Nginx - Windows下Nginx基本安装和配置

    Nginx 是一个轻量级的高性能 Http WebServer,以事件驱动方式编写,因此相比 Apache 而言,Nginx 更加稳定.性能更好,而且配置简单,资源占用较低. 1. 安装 Nginx ...

  10. Linux基本命令(10)其他命令

    其他命令 命令 功能 命令 功能 echo 显示一字串 passwd 修改密码 clear 清除显示器 lpr 打印 lpq 查看在打印队列中等待的作业 lprm 取消打印队列中的作业 10.1 ec ...