Leon Atherton Leon is a developer at IDRsolutions and product manager for BuildVu. He oversees the BuildVu product strategy and roadmap in addition to spending lots of time writing code.

SVG shapes not working in Firefox but fine in Chrome, Safari, IE & Opera?

1 min read

After taking a sneak peak at upcoming PDF to SVG functionality for our Online Converter, I was disappointed to see that shapes were not appearing at all in Firefox, but appeared correctly in all other browsers. As I have not been working on PDF to SVG, I made a case for the issue and then forgot about it.

That is until recently when I had cause to play with shapes in SVG for an issue in PDF to HTML5 conversion that you will find out about in a post next week (so stay tuned). As Firefox is my preferred browser, I was interested in getting SVG shapes working correctly.

Here is an example SVG page that does not work in Firefox.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="
M100,100,
L200,100,
L200,200,
L100,200,
L100,100" />
</svg>

And here is that same page, now working correctly in Firefox.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="
M100,100
L200,100
L200,200
L100,200
L100,100" />
</svg>

As you can see, the cause of the issue is simply that we included a comma between each shape command. Remove this, and everything works perfectly!

This highlights the importance of cross browser testing. Unfortunately just because something works correctly in the majority of browsers, that doesn’t mean that it will work in all.

This post is part of our “SVG Article Index” in these articles, we aim to help you build knowledge and understand SVG.



Our software libraries allow you to

Convert PDF files to HTML
Use PDF Forms in a web browser
Convert PDF Documents to an image
Work with PDF Documents in Java
Read and write HEIC and other Image formats in Java
Leon Atherton Leon is a developer at IDRsolutions and product manager for BuildVu. He oversees the BuildVu product strategy and roadmap in addition to spending lots of time writing code.

3 Replies to “SVG shapes not working in Firefox but fine in…”

  1. what comma in between shape command ? i dont see anything i too am having problems with firefox with icons. it does not show properly on firefox but it does in chrome need help badly. I dont understand the difference between the 2 image you posted

    1. Hi Marvin,

      My article seems to have been a victim of an update issue that has caused my SVG to be removed.

      I do remember the issue however.
      You should find that example 1 works in Chrome but not Firefox, and example 2 works in both Chrome and Firefox.

      Hope this helps

      Example 1:
      <?xml version="1.0" encoding="UTF-8" standalone="no"?>
      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
      "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
      <svg width="300" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <path d="
      M100,100,
      L200,100,
      L200,200,
      L100,200,
      L100,100" />
      </svg>

      Example 2:
      <?xml version="1.0" encoding="UTF-8" standalone="no"?>
      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
      "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
      <svg width="300" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <path d="
      M100,100
      L200,100
      L200,200
      L100,200
      L100,100" />
      </svg>

Comments are closed.