SVG排版教程 | image元素与img元素有什么区别？

在SVG黑科技排版中，image元素和img元素都是用来显示图片，表面上来看他们好像没有什么区别，那到底是不是这样呢？懂点君来给大家演示一下。

演示案例

SVG排版演示案例中，分别使用image元素和img元素引入同一张图片，然后在手机上查看显示效果。

显示效果
浅色模式下显示的效果：两个元素引入的图片都正常显示；

深色模式下显示的效果：image元素引入的图片显示正常，能够适配深色模式；img元素引入的图片变暗，不能适配深色模式（第一张图片）；

点击交互
在手机上打开演示案例，分别去点击两张图片，查看哪张图片会有交互效果。

点击img元素引入的图片会弹出图片，点击image元素引入的图片没有任何反应。

分析总结