How to use svg in image src attribute?-CodePudding

I would like to use this svg:

<svg height="30" width="200">
  <text x="0" y="15" fill="red">⚡</text>
</svg>

as a src attribute in image. How can I do it?

CodePudding user response：

Just convert it to a data url, remembering that it now needs valid namespaces.

<img src='data:image/svg xml,<svg xmlns="http://www.w3.org/2000/svg" height="30" width="200">
  <text x="0" y="15" fill="red">⚡</text>
</svg>'>

CodePudding user response：

External SVG files must have the correct SVG namespace declaration to be recognised by the browser.

<svg xmlns="http://www.w3.org/2000/svg" height="30" width="200">
  <text x="0" y="15" fill="red">⚡</text>
</svg>