• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Community Beginner ,
Sep 23, 2020 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

Views

337

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 Expert ,
Sep 23, 2020 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.

Votes

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 ,
Sep 23, 2020 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

Votes

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 ,
Sep 23, 2020 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

Votes

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 Expert ,
Sep 23, 2020 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.

Votes

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 ,
Sep 23, 2020 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?

Votes

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 Expert ,
Sep 23, 2020 Sep 23, 2020

Copy link to clipboard

Copied

LATEST

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.

Votes

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