SVG image tag

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_Image_Tag

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="4cm" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image href="firefox.jpg" x="0" y="0" height="50px" width="50px"/>
</svg>

<svg width="5cm" height="4cm" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image href="firefox.jpg" x="0" y="0" height="50px" width="50px"/>
</svg>

OK

href + base64

<image overflow="visible" width="34" height="34" x="43" y="70" href="data:image/jpeg;base64,/9j/2wCEAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDIBCQkJDAsMGA0NGDIhHCEyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMv/AABEIACgAKAMBIgACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/APU/EniK803UEtrURqAgYllyTnP+FcB4m+LuraJKtrbR2892yhyHTCoueM+pPPFbXxM1D+y5bm9ChmitlKqehYkgfqRXgEs13qd/vkaS5u52wAoLMx7BVH8hXi4eNeti6kpTfJF2tcXU6az+Jniyz1ybV/7Q+0TzRmNop8mFAWB+RAQF+7jPoT1r07SfipLq8SeTdW8c54MEiAOD6Ad/qK8IS2uZIrmWO1ndLUbpyEP7sZx83pz61CCHw6NhlOVdTyp9QfWvQxOHlWjaE3F+X6jaPrLwvr13qtzPDdBDsQOrKMd8Yrp68u+EmrLq8LTmUPOtuEnwMEPkZ4/WvUayy51fYWrO8k2hI8n+LFsbyG8tkR3lltkSJY+rSFvkH/fWK878IGXw94fi8SQylZLm6+zqqab9qkYDCgAl1CDczA85OQO1ereOYUn1ZopBlGgUHBI7nuOn1rJ8LahbeGmmsbuUR2Ez+bFO4AWOQ4DKxAAAPBBPfdk5Iz59DFQhiKtF7uVy6TXNqdPHbQ2Xh+VLKC2t3MJmdEtOCxGSTECCSeeM/ia8F8Q2ENxob69DsQ/2hJHOrWJtny2c5+d1YBo26EYyeK9tj1G/F6bg6IUmkVY5CbpvLVASd2dmzA3E5HOPyrl/F/iHTNdurezSeVbCzYXLXKoQjychcEgjaBuO7pkgg8V2+2VFOUjrqQbiaHwW06KwsmZYgk80G+YkEHdu6H3GcfhXrVcD4AjSK9mjjGEWABRnPGRXfU8sqOrQ531b/M4UcxrXh5tavRcQzeUwQKyyL168ivMfHmmQ6fexWV1ciRbaL7XL5aA4zlUHzAg5w/HsK9vh+81eLfFT/kY9W/7B9v8A+hSV1UMuw7xPt+X3tzHEaQ0MDUdAaL4eafcpIZYjqzwNBHEAXjTzG2+h5TjjvjOOKhkvRd2hZFzEy+U02V2lHGF6E5bJHA/TNdVP/wAk30j/ALDs/wD6DPXBaN/yKcH/AF2tv/Q0rkzWjDmg/Nr8j2MprStOPkn+Z7v4B8OXei6RbS30n+kvbIrR7cGPjOD7jgfhXYUi/dH0pa7qVKFKPLBaHnH/2Q=="></image>

bug

src

<image overflow="visible" width="34" height="34" x="43" y="70" src="https://cdn.xgqfrms.xyz/logo/favicon.png"></image>

href

<image overflow="visible" width="34" height="34" x="43" y="70" href="https://cdn.xgqfrms.xyz/logo/favicon.png"></image>

xlink:href

<image overflow="visible" width="34" height="34" x="43" y="70" xlink:href="https://cdn.xgqfrms.xyz/logo/favicon.png"></image>


<image overflow="visible" width="34" height="34" x="43" y="70" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkNBREQ3N0Q1RjYzMTFFNzlBQkFDNDFGODFCRTBBOTkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkNBREQ3N0U1RjYzMTFFNzlBQkFDNDFGODFCRTBBOTkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCQ0FERDc3QjVGNjMxMUU3OUFCQUM0MUY4MUJFMEE5OSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCQ0FERDc3QzVGNjMxMUU3OUFCQUM0MUY4MUJFMEE5OSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrUnpHgAAA58SURBVHja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"></image>

PNG to Base64 in js

Base64 Image convert

Canvas

https://stackoverflow.com/questions/6150289/how-can-i-convert-an-image-into-base64-string-using-javascript

Base64 Image Encoder

https://www.base64-image.de/

refs

https://www.pluralsight.com/paths/python

https://cdn.xgqfrms.xyz/logo/favicon.png



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


SVG image tag的更多相关文章

  1. vconsole h5应用ajax请求抓包

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta co ...

  2. HTML5 Differences from HTML4

    Abstract "HTML5 Differences from HTML4" describes the differences of the HTML5 specificati ...

  3. Github App version released icons

    # Github App version released icons http://shields.io/ Build Travis: https://img.shields.io/travis/U ...

  4. SVG中image tag的高亮

    今天下午和晚上全部在实验室调试scs可视化,下午主要时间在调试字符云图的东西,不过感觉没有提升,还是不好看,囧~~ 把力道图中的线条给调整了,调细之后,好看了不少. 因为需要多个区域交互,也就是需要高 ...

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

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

  6. svg学习(二)

    svg嵌入html有以下3种方式: OBJECT < object data = " rect.svg "  width = " 300 "  heigh ...

  7. 原创 HTML5:JS操作SVG实践体会

    在工业信息化系统里,常常需要动态呈现系统的数据在一张示意图里,用于展现系统状态,分析结果等.这样用JavaScript操作svg 元素就有现实意义.本人近期做了一些实践,现分享一下. 需求: 你下面这 ...

  8. [SVG] Simple introduce for SVG

    Just like create html page, you can create a svg tag by: <?xml version="1.0" encoding=& ...

  9. 使用SVG基本操作API

    前面的话 本文将详细介绍SVG基本操作API,并使用这些API操作实例效果 基础API 在javascript中,可以使用一些基本的API来对SVG进行操作 [NS地址] 因为SVG定义在其自身的命令 ...

随机推荐

  1. 列出HBASE所有表的相关信息,如表名、创建时间等。

    import java.io.IOException; import java.util.Collection; import java.util.Iterator; import org.apach ...

  2. (Shell)Shell命令整理

    目录 常用命令 1. 上传.下载 2. 删除文件和文件夹 3. 目录操作 4. 文件的操作 4.vim 为新添加的文件后缀支持语法高亮 常用命令 1. 上传.下载 上传文件:rz,然后回车弹出上传文件 ...

  3. 线上nginx的一次“no live upstreams while connecting to upstream ”分析

    线上nginx的一次"no live upstreams while connecting to upstream "分析 线上nginx的一次"no live upst ...

  4. Python Data Structure and Algorithms Tutorial

    Python - Algorithm Design - Tutorialspoint https://www.tutorialspoint.com/python_data_structure/pyth ...

  5. https://www.cs.cmu.edu/~dga/papers/cuckoo-conext2014.pdf 检验hash冲突

    https://github.com/google/cityhash We like to test hash functions with SMHasher, among other things. ...

  6. XCTF-easydex

    前期工作 查壳,无.安装打开黑屏. 逆向分析 用jadx打开看看 什么都没有,但可以看一下AndroidManifest 可以看到这个是个纯C/C++写的,没有Java代码,是个NativeActiv ...

  7. SSH 登录警告:WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!

    1.使用Linux SSH登录其他Linux或者cisco交换机时有如下报错 WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! (远程主机标识已更改) ...

  8. Object类的常见方法总结

    ♧ Object类是比较特殊的类,它是所有类的父类.主要提供了11个方法(JDK 1.8为例): /** * native方法,用于返回当前运行时对象的Class对象,使用final关键字修饰,子类不 ...

  9. A - The Suspects (sars传染)

    题意:有m组,0为起点,有0的那一组全是嫌疑人,之后会不断传递到其它组去,问一共有多少人是嫌疑人. Severe acute respiratory syndrome (SARS), an atypi ...

  10. Codeforces Round #587 (Div. 3) F Wi-Fi(线段树+dp)

    题意:给定一个字符串s 现在让你用最小的花费 覆盖所有区间 思路:dp[i]表示前i个全覆盖以后的花费 如果是0 我们只能直接加上当前位置的权值 否则 我们可以区间询问一下最小值 然后更新 #incl ...