html实用图片代码

实用图片代码1

<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='45' fill='lightyellow'/><text x='50%' y='50%' font-size='50' text-anchor='middle' alignment-baseline='middle'>🌻</text></svg>" alt="向日葵图案">

说明
circle 元素用于绘制一个圆形背景，设置在 SVG 的中心位置。
cx='50' 和 cy='50' 表示圆心在 (50, 50) 的位置。
r='45' 表示圆的半径为 45。
fill='lightyellow' 设置圆形的填充色为浅黄色。
text 元素用于显示向日葵表情符号，并调整其位置和大小。
x='50%' 和 y='50%' 将表情符号放置在圆形的中心。
text-anchor='middle' 和 alignment-baseline='middle' 用于确保文本在中心对齐。
这样，图片将显示一个浅黄色背景的向日葵表情符号。

实用图片代码2

data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>💠</text></svg>