好多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. 07_js走路小游戏

    <html> <head> <!-- 不做了,思路: 按enter键停止,将xs,ys替换为0,再次按,判断xs和ys是否为0,是的话,讲根据fx给xsys赋值. 实现鼠 ...

  2. theos的makefile写法

    theos的makefile写法与其他linux/unix环境下的makefile写法大同小异,但是对于makefile不熟悉的在导入一些dylib或者framework的时候就会变得很蛋疼. 对于f ...

  3. （六）6.8 Neurons Networks implements of PCA ZCA and whitening

    PCA 给定一组二维数据,每列十一组样本,共45个样本点 -6.7644914e-01  -6.3089308e-01  -4.8915202e-01 ... -4.4722050e-01  -7.4 ...

  4. Arduino报错

    avrdude: stk500_recv(): programmer is not respondingavrdude: stk500_getsync() attempt 1 of 10: not i ...

  5. C#中的局部类

    什么是局部类型? C# 2.0 引入了局部类型的概念.局部类型允许我们将一个类.结构或接口分成几个部分,分别实现在几个不同的.cs文件中. 局部类型适用于以下情况: (1) 类型特别大,不宜放在一个文 ...

  6. 什么是SPF？如何设置企业邮箱的SPF呢？（TXT记录）

    什么是SPF?   (Sender Policy Framework) 的缩写,一种以IP地址认证电子邮件发件人身份的技术,是非常高效的垃圾邮件解决方案. 接收邮件方会首先检查域名的SPF记录,来确定 ...

  7. Bat 循環執行範例

    @echo off @echo Please key in runcount num. Info:max=100 set /p a= for /l %%i in (1,1,%a%) do ( echo ...

  8. SORT UNIQUE|AGGREGATE|GROUP BY|ORDER BY|JOIN

    相信做oracle开发和管理的朋友对sort肯定不会陌生,大家通常都遇到这样那样的排序性能问题,所以我写这一系列关于sort的文章告诉大家在oracle里面sort是怎么一回事以及如果调整sort获得 ...

  9. loadrunner下检查点乱码情况处理

    对于很多用过LR的人来说,乱码一直是很纠结的事情,尤其是对新手来说.网上给的解决方法是在录制的时候勾选UTF-8选项,但是似乎并没有解决. 对于用户名为中文或者检查点为中文的情况,我们又该如何去处理呢 ...

  10. oracle 定时任务（DBMS_JOB）

    示例如下: -- 每隔一分钟执行存储过程p1 create or replace procedure p2 as job_num number; begin dbms_job.submit(job_n ...