您的位置:首页 - 教程 - web前端 - 正文
svg base64图片代码

好多h5页面有出现data:image/png;base64,后面跟了一串类似乱码的字母

查了下原来这也是svg或者是图片

<img src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg==”/>

这种写法是把图像文件的内容直接写在了HTML 文件中,

好处是,

节省了一个HTTP 请求。

坏处呢,

就是浏览器不会缓存这种图像。

大家可以根据实际情况进行自由取舍。

 <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编码。


评论: