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.

Our software libraries allow you to