Retain Overlay effect in illustrator for SVG file

Community Beginner ,
Dec 04, 2020 Dec 04, 2020

Copy link to clipboard

Copied

Hi, I hope someone can help me out.

I have a design that is created in illustrator. It has an overlay effect on it, when I save the file as an SVG file, the overlay shows as white on my background whereas I need it to show as an overlay on any background that it is placed onto. How do I do this?

 

Thanks

Wanda

TOPICS
How to

Views

121

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 04, 2020 Dec 04, 2020

Copy link to clipboard

Copied

Please show.

Please do include the Appearance panel.

Please do also show the resulting SVG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 05, 2020 Dec 05, 2020

Copy link to clipboard

Copied

Hi Monika

Herewith a screenshot of what I need to achieve.

The other screenshot is of the ai file with the appearance panel as requested.

The flower pattern is white inside a clipping mask, that sits behind the blue lines.

When I save this as a SVG file the pattern comes in white and not overlay when I place it in photoshop as a test.

final result.png

Screenshot 2020-12-05 at 11.26.42.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 05, 2020 Dec 05, 2020

Copy link to clipboard

Copied

Not all blend modes are supported in SVG.

Also: whenimporting an SVG, the importing app might ditch things.

 

Do you need the SVG in Photoshop, or what will be the final use?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 05, 2020 Dec 05, 2020

Copy link to clipboard

Copied

Hi, the client wants it for their website, but they want it in an SVG format that is easily scalable, so I would imagine illustrator would be better for this application.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 05, 2020 Dec 05, 2020

Copy link to clipboard

Copied

Then why do you "test" it in Photoshop?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 05, 2020 Dec 05, 2020

Copy link to clipboard

Copied

So that I can see if it's creating the effect I need, where should I be testing this?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 05, 2020 Dec 05, 2020

Copy link to clipboard

Copied

Photoshop maybe interprets an SVG differently than a browser does. You cannot be sure of that.

So you need to set up a test case in HTML and also test it in different browsers.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Dec 05, 2020 Dec 05, 2020

Copy link to clipboard

Copied

I gather that you client does not have Illustrator but only Photoshop? their web master or who ever does their site should have both, I would think. Just curious as to the details of the transition of a file to a client. The old version of transition from one to another app use to be eps- have you tried that one?

 

Monika- you are the master here so please forgive my intrusion but curious as to the reasoning.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 05, 2020 Dec 05, 2020

Copy link to clipboard

Copied

Good luck with EPS. Since it doesn't support any transparency related thing.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 05, 2020 Dec 05, 2020

Copy link to clipboard

Copied

LATEST

Thanks very much I will try this.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines