web

Html中的图片使用字符串(base64,svg)代替

Posted by Codeboy on October 3, 2014

最近看了一个网页,里面有图片,但是却没有引用外部的图片资源,很好奇.查看代码后发现,里面的图片是使用base64编码后的字符串代替了,这个叫做Data URI scheme.

Data URI scheme支持的类型有:
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

除了使用base64外,图片还可以使用svg进行标识。

用以下图片做为基准: img

1. base64

① base64编码图片

linux下直接可以使用base64+图片路径就可以产生base64编码后的字符串

使用命令:

base64 android.jpg

产生的字符串为:

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

② 嵌入网页

直接使用

<image src="data:image/png;base64,上述字符">

就可以了.

2. svg

svg是另一种网页中使用字符串表示图片的方式,可以使用 sketch, photoshop 之类的软件打开图片后,导出为svg即可,导出后的文件使用文本编辑器打开如下:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 3.6.1 (26313) - http://www.bohemiancoding.com/sketch -->
    <title>Untitled</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <image id="android" x="0" y="0" width="32" height="32" xlink:href="data:image/png;base64,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"></image>
    </g>
</svg>

去除第一行xml标签后,直接将svg当做img使用即可。

如有任何知识产权、版权问题或理论错误,还请指正。

转载请注明原作者及以上信息。