Home > Net >  Firefox fails to render SVG in IMG tag
Firefox fails to render SVG in IMG tag

Time:11-21

I am attempting to add an SVG image to an HTML file. I have index.html and star.svg together in a directory. Firefox 96 on Ubuntu fails to render the image, only shows alternate text. I also tried with an OBJECT tag, but just prints source of star.svg.

star.svg displays properly everywhere else.

Any assistance greatly appreciated.

The HTML and SVG I am using:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>SVG Test</title>
  </head>
  <body>
    <img src="star.svg" alt="star" height="210px" width="500px">
    <object data="star.svg" type="image/svg xml"></object>
  </body>
</html>

and

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>
</svg>

CodePudding user response:

You are supposed to include the xmlns:

 <svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">

According to the docs:

The xmlns attribute is (…) required on the outermost svg element of SVG documents. (…)

  • Related