htmlcssfirefoxsvgissuu

Firefox issues when displaying SVG (Firefox 55.0.3)


Firefox won't display the SVG book covers properly ...

http://new.images.hindawi.org/kalimat/covers/svg/270x360/c/24972860.svg

Compare the link above in Firefox and Chrome. It used to be displayed just fine in Firefox, but I think something went wrong with the latest update.

If any one know a solution to this issue it would be great.

Thanks.


Solution

  • If you check your browser inspector, than you will see an error:

    There is an SVG reference chain which is too long in this document, which will prevent the document rendering correctly.

    Inside your SVG image there are many of them, looking like:

    <path clip-path="url(#SVGID_68_)" fill="#FFFFFF" d="..." />
    

    Either create less accurate SVG (less details), or create it some other way.

    Since it is rendered well in webkit browsers, than maybe you can use wkhtmltoimage to convert it server side to PNG or JPG.