Highlighted

How can you save a banner with a clipping mask to SVG and preserve the clipping mask?

New Here ,
Sep 23, 2020

Copy link to clipboard

Copied

I have designed a banner for a response website homepage and my developer wants me to provide it in SVG. There is a clipping mask over a map vector path which allows it to be featured around the edges.

 

When I save as SVG the clipping mask and feature effect is removed and I cannot work out how to save it in this file type and preserve the clipping mask.

 

Is there a way to save this file to SVG so it doesn't lose the clipping mask and feature effect?

 

Here are examples with the clipping mask on and what it looks like when it's saved to SVG (clipping mask feature effect removed)

 

CLIPPING MASK ON (saved as AI file):

Clipping mask ONClipping mask ON

SAVED AS SVG (clipping mask is removed):

 

Saved as SVG - clipping mask removedSaved as SVG - clipping mask removed

TOPICS
Draw and design, How to

Views

51

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

How can you save a banner with a clipping mask to SVG and preserve the clipping mask?

New Here ,
Sep 23, 2020

Copy link to clipboard

Copied

I have designed a banner for a response website homepage and my developer wants me to provide it in SVG. There is a clipping mask over a map vector path which allows it to be featured around the edges.

 

When I save as SVG the clipping mask and feature effect is removed and I cannot work out how to save it in this file type and preserve the clipping mask.

 

Is there a way to save this file to SVG so it doesn't lose the clipping mask and feature effect?

 

Here are examples with the clipping mask on and what it looks like when it's saved to SVG (clipping mask feature effect removed)

 

CLIPPING MASK ON (saved as AI file):

Clipping mask ONClipping mask ON

SAVED AS SVG (clipping mask is removed):

 

Saved as SVG - clipping mask removedSaved as SVG - clipping mask removed

TOPICS
Draw and design, How to

Views

52

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
Sep 23, 2020 0
Adobe Community Professional ,
Sep 23, 2020

Copy link to clipboard

Copied

Is that an object based or a laser based clipping mask?

Please show show the structue of the file.

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
Reply
Loading...
Sep 23, 2020 0
New Here ,
Sep 23, 2020

Copy link to clipboard

Copied

I think it's object-based, here is a screenshot showing the layer and then the clipping mask in the transparency window...

 

banner-clipping-mask-structure.jpg

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
Reply
Loading...
Sep 23, 2020 0
New Here ,
Sep 23, 2020

Copy link to clipboard

Copied

this is the clipping mask once released showing the path used as the clipping mask...banner-clipping-mask-released.jpg

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
Reply
Loading...
Sep 23, 2020 0
Adobe Community Professional ,
Sep 23, 2020

Copy link to clipboard

Copied

That one is not a clipping mask. It's an opacity mask. SVG developers won't have a lot of fun with it.

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
Reply
Loading...
Sep 23, 2020 0
New Here ,
Sep 23, 2020

Copy link to clipboard

Copied

Ok so is it best to provide this in PNG then? There's no way to use this for 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
Reply
Loading...
Sep 23, 2020 0
Adobe Community Professional ,
Sep 23, 2020

Copy link to clipboard

Copied

Well ususally developers have a reason when they want an SVG. If you give them a PNG instead they might not be very happy with that. Maybe you want to discuss the matter with your developer?

You might need to change the design.

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
Reply
Loading...
Sep 23, 2020 0
Resources