Search code examples
imagesvggraphicsvector-graphicsadobe-illustrator

SVG fine in browsers but broken (just shows a black box) in Illustrator or InkScape


I've got an issue with SVG files generated by a program. They validate fine, display fine in browsers and in OS X Preview, but display as a big black box in Illustrator or InkScape or various other programs.

I suspect there's something to do with transparency or a tag not being supported or something, but I don't really know what - and a cursory glance looks fine...

There are hundreds of these. I can write a script to correct them all but I don't know what to correct...!

Original SVG

How it looks in Illustrator or InkScape

Max


Solution

  • Using an rgba syntax for fill is not supported everywhere. Try using rgb values e.g. rgb(255, 255, 255), hex colours e.g. #ffffff or named colours e.g. white.

    You don't need the a anyway as your opacities are always 1 and if you did it would be more portable to specify a separate fill-opacity value.