CODEWITHSUNDEEP
imagesvg
INeedYourHelp
INeedYourHelp

Reputation: 171

How to use svg in image src attribute?

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?

Upvotes: 6

Views: 10075

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101946

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>

Upvotes: 3

Robert Longson
Robert Longson

Reputation: 124249

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>'>

Upvotes: 4

Related Questions