How do I convert my Indesign documents to SVG files without losing/affecting my drop shadows?

[allyo41691955]

I created documents in Indesign that have drop shadows applied to certain shapes.  I'm trying to convert these documents to SVG files.  Since there isn't a way to export from Indesign to SVG, I've been trying to utilize Illustrator.

When I select all and drag from my original Indesign document to Illustrator and then export as an SVG, I lose the drop shadow effect completely.  Instead of the shadow, I see a grey rectangle.

When I export the Indesign document as an EPS file, open it in Illustrator, and then export as an SVG, my shadows look like shadows, but they are broken up into pieces and have white spaces in between each piece.

I've tried other solutions such as releasing all clip masks and flattening the transparency, but nothing seems to be working. 

Is there a solution that will allow me to keep my original Indesign documents and convert to SVG without losing any elements such as these drop shadows?  Or will I need to opt for a more manual solution?  For example, replacing these drop shadows with a blurred rectangle instead?

[JonathanArias]

can we ask why are you doing this? can you explain more on what you want to do and why?

[allyo41691955]

Hi Jonathan,

I exported my Indesign documents as PNG files to be added to my web page.  The purpose of using images was to prevent users from being able to copy and paste our text from our website.  I was told that my PNG files are too large (some are greater than 1MB).  I am trying to convert them to SVG files to optimize the images and have them load quicker on web.

Any suggestions you have would be greatly appreciated!

[JonathanArias]

Now I understan, yes. I have actually done a course on Lynd.com on this subjec;

Check out the course 'Creating Optimized Web Graphics' on Lynda.com.

http://www.lynda.com/Sketch-tutorials/Creating-Optimized-Web-Graphics/480956-2.html

The the bottom line came to brining your images into photoshop and use the save for web dialog and watch the bottom left image size as you adjust the colors and quality. Same dialog exists in illustrator.

you could also work in illustrator, as in paste as vector outline text from indesign, and export to .svg from there I suppose.

Check out the course 'SVG Graphics for the Web with Illustrator' on Lynda.com.

http://www.lynda.com/course-tutorials/SVG-Graphics-Web-Illustrator/724814-2.htm

I have have also watched that course and its good

[JonathanArias]

Best practices for creating web graphics in Illustrator

[vinny38]

allyo41691955  wrote

The purpose of using images was to prevent users from being able to copy and paste our text from our website.

Hi

Imho, you might be thinking the wrong way...

There are Html/Css or JavaScript tricks to prevent user from selecting text from a website.

e.g. see here: css - How to disable text selection highlighting? - Stack Overflow

Saving text as images is - imho again - a nasty workaround that make you loose the benefits of live text on your website, like:

- a reasonable size

- search engine optimization

- better quality

- web accessibility

- cross-device

- and many more...

Of course, there are always ways to cheat and smart guys will always find a way around your text protection, but be aware that recognizing text from an image is also possible...

[Srishti Bali]

Hi Ally,

I would like to know if the steps suggested above worked for you, or the issue still persists.

Kindly update the discussion if you need further assistance with it.

Thanks,

Srishti

[JonathanArias]

Hi,

you don't need to provide you personal information to get help in the forums. please don't provide you personal info to dittofam.

[Dov Isaacs]

We've deleted the posting of dittofam who despite the claim of being Team Adobe is not associated with Adobe in any way. Scammer!

          - Dov

[JonathanArias]

Thanks Dov! that was quick.

[happie_97]

Hello,

Did either of the links JonathanArias suggested solve your issue? If so, please update to this forum to let us know.

[Laubender · Accepted solution]

Hi allyo41691955 ,

depending on your contents I can see another way.

Export to Publish Online.

Open the link with your browser, navigate to the page you want and save the tab with your browser. Do that page by page.

E.g with Firefox. The saved HTML plus folder should contain your page in a form where all live text from InDesign is converted to SVG outlines.

Don't know if this will help to reduce your file size that much.

But at least I would try this.

Later you can remove your publish online document.

Regards,
Uwe

[Ghost Agent]

Export to pdf and open in open source Inkscape. Save as a native . SVG. It does a good job of remaining faithful to the original – not outlining text unless convert to curves is ticked. Wheras opening the pdf in Illustrator, some text would randomly convert to outline "to preserve appearance". I was creating .SVG to import into MicroSoft Word and wanted to retain sharp vector graphics