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

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.

Related Posts:

The following two tabs change content below.
Leon is a developer at IDRsolutions and product manager for JPDF2HTML5. He is responsible for managing the JPDF2HTML5 product strategy and roadmap, and also spends a lot of his time writing code to build new features, improve functionality, fix bugs, and improve the testing for JPDF2HTML5.
Leon Atherton

About Leon Atherton

Leon is a developer at IDRsolutions and product manager for JPDF2HTML5. He is responsible for managing the JPDF2HTML5 product strategy and roadmap, and also spends a lot of his time writing code to build new features, improve functionality, fix bugs, and improve the testing for JPDF2HTML5.

3 thoughts on “SVG shapes not working in Firefox but fine in Chrome, Safari, IE & Opera?

  1. Marvin

    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

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

      • manoz

        thanks ,

        Example 1:

        working

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>