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 PDF to HTML5 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="12cm" height="4cm" viewBox="0 0 1200 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 
  <g fill-rule="evenodd" fill="red" stroke="black" stroke-width="3">
    <path d="
	M 250,75,
	L 323,301,
	L 131,161,
	L 369,161,
	L 177,301,
	L 250,75
	"/>
  </g>
</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="12cm" height="4cm" viewBox="0 0 1200 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 
  <g fill-rule="evenodd" fill="red" stroke="black" stroke-width="3">
    <path d="
	M 250,75
	L 323,301
	L 131,161
	L 369,161
	L 177,301
	L 250,75
	"/>
  </g>
</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.

My Twitter profileMy Google+ profile

Leon Atherton

Developer at IDRsolutions
Leon is a Developer at IDRsolutions, focusing mainly on development of the PDF to HTML5/SVG converter. He was a speaker at JavaOne 2012, co-presenting a session titled 'Lessons Learned in Writing a PDF-to-JavaFX Converter for NetBeans'.

Related Posts: