I'm trying to create documentation that will use the same files for the online content as the PDF content. The biggest challenge has been getting the images a suitable size and quality for both. I found a solution that was working - get the photo elements of the images saved as JPG and compressed via ImageOptim. Then add the elements to lines and text in an Illustrator file and save as SVG. This was working fine for all of the images, but then suddenly went wrong. When I compared the code of the good SVGs vs the bad, the key difference was:

In the good, it has:

viewBox="0 0 516.9 246" style="enable-background:new 0 0 516.9 246;"     xml:space="preserve

In the bad, it has:

viewBox="0 0 516.9 246" enable-background="new 0 0 516.9 246" xml:space="preserve"

So it seems to be something to do with that style= part going wrong. Does anyone know why this happens? Is there a workaround? I've tried adding it in manually, but it doesn't seem to work.

I have reported it to Adobe and they are looking into it. They recommended I use export to SVG instead, but the file size is too big when i do that (4 times larger at least).

Any suggestions? (I'm not a graphic designer by the way).

  • enable-background is useless, you can just delete it from both. I suspect the real issue is something different. – Cai Feb 23 '17 at 19:05
  • 1
    Could you maybe post a complete working and non-working SVG? – Cai Feb 23 '17 at 19:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.