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).