好多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. 8个实用的SVG工具,20 个有用的 SVG 工具,五款超实用的开源SVG工具

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

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

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

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

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

  4. 用SVG绕过浏览器XSS审计

    [Translated From]:http://insert-script.blogspot.com/2014/02/svg-fun-time-firefox-svg-vector.html === ...

  5. Firefox使用svg blur滤镜渲染图片

    很久没来更新博客了,今天正好比较闲,就写一篇手头项目上遇到的一个css问题: .mature .blur { -webkit-filter:blur(25px); -moz-filter:blur(2 ...

  6. Web 设计新趋势: 使用 SVG 代替 Web Icon Font

    如果你还在使用 Icon Font 作为网页中显示图标的实现方案,那么你可能有点 Out 了. 由于使用 Icon Font 显示图标存在一些缺陷,开发者们一直在致力于探索使用 SVG 作为替代的方法 ...

  7. SVG 参考手册

    1. SVG元素模块 Animation.Module animate animateColor animateTransform animateMotion set mpath 剪裁模块 clipP ...

  8. js实现svg图形转存为图片下载

    我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持.研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG代 ...

  9. UWP 手绘视频创作工具技术分享系列 - SVG 的解析和绘制

    本篇作为技术分享系列的第一篇,详细讲一下 SVG 的解析和绘制,这部分功能的研究和最终实现由团队的 @黄超超 同学负责,感谢提供技术文档和支持. 首先我们来看一下 SVG 的文件结构和组成 SVG ( ...

随机推荐

  1. linux 学习干货

    学习了第七章. 每一个键盘对应一个信号.主要的有: ^代表 Ctrl <Backspance> erase ,删除一个字符. ^W werase,删除一个单词 ^U / ^X kill , ...

  2. fabric批量操作远程操作主机的练习

    fabric是python的一个基于命令行的自动化部署框架,用docker开了两个容器来学习fabric. #!/usr/bin/env python #-*- coding=utf-8 -*- fr ...

  3. 在Eclipse中创建Maven多模块工程的例子

    .配置eclipse的maven .在Eclipse里面New -> Maven Project -> 选择“Create a simple project” Group Id: com. ...

  4. RobotFrameWork http/https oauth接口测试 (一)

    感觉自己最近销声匿迹快一个月了,应该总结下自己这个月学习的东西了~~~折腾完公司私有协议的接口测试(c++接口),开始折腾公司的http/https接口和webservice接口的测试,想着把所有的这 ...

  5. hibernate的懒加载问题

    产生原因: 当使用hibernate查询一个对象的时候,如果Session关闭,再调用该对象关联的集合或者对象的时候,会产生懒加载异常! 解决方案: 方案一: 在Session关闭之前,查询对象关联的 ...

  6. cf B. Fox Dividing Cheese

    http://codeforces.com/contest/371/problem/B #include <cstdio> #include <iostream> #inclu ...

  7. Android系统JNI的实现方式

     Android系统JNI的实现方式 All rights reserved JNI(Java Native Interface)定义了一种Java代码调用C或者C++代码等其它代码的方式. 在A ...

  8. python——爬虫&amp;问题解决&amp;思考(三)

    继续上一篇文章的内容,上一篇文章中,将爬虫调度器已经写好了,调度器是整个爬虫程序的"大脑",也可以称之为指挥中心.而现在,我们要做的就是去将调度器中用到的其他组件写好.首先是url ...

  9. How to preview html file in our browser at sublime text?

    sublime preview html.md open In Browser what should we do if we want to preview html file in our bro ...

  10. 证明与计算(1): Decision Problem, Formal Language L, P and NP

    0x01 从判定问题到形式语言 这篇讲知识证明的wiki([1]): https://en.wikipedia.org/wiki/Proof_of_knowledge 里面有一句话: Let x be ...