Export an SVG with grain texture

New Here ,
Jan 13, 2021

Copy link to clipboard

Copied

Hello ! I have learned recently a new method to add grain texture on my illustration. I want my output file was an SVG to use such as a design for a website. The method is to add a mask on a copie of the form, and to add gradient and grain fx on this mask. The problem is, when I export the file in SVG the layer with the mask have totally disappeared. If I try to export in SVG the layer with mask lonely is not working.

The goal:

baseMoulin-1.jpg

The result when I export in svg :

svg.png 

If you take time to read this, thank you very much !

TOPICS
Draw and design, How to, Import and export

Views

25

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

Export an SVG with grain texture

New Here ,
Jan 13, 2021

Copy link to clipboard

Copied

Hello ! I have learned recently a new method to add grain texture on my illustration. I want my output file was an SVG to use such as a design for a website. The method is to add a mask on a copie of the form, and to add gradient and grain fx on this mask. The problem is, when I export the file in SVG the layer with the mask have totally disappeared. If I try to export in SVG the layer with mask lonely is not working.

The goal:

baseMoulin-1.jpg

The result when I export in svg :

svg.png 

If you take time to read this, thank you very much !

TOPICS
Draw and design, How to, Import and export

Views

26

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
Jan 13, 2021 0
Adobe Community Professional ,
Jan 13, 2021

Copy link to clipboard

Copied

When making an SVG, you are exporting code. So you can only create in Illustrator what the SVG specifications support. SVG supports alpha masking, but it looks like Illustrator cannot export it correctly.

So your only options seems tobe tocreate this by coding it, or to convert the whole thing into pixels and then of course make a feature request on Uservoice.

Please post feature requests to http://illustrator.uservoice.com

 

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...
Jan 13, 2021 0
New Here ,
Jan 13, 2021

Copy link to clipboard

Copied

Ok, I found a solution ! Illustrator export the mask, we can see the mask in the SVG code, but I think SVG not supports Superposition (in French, maybe layering in English) transparence mode. To counter that, we can adjust the opacity and color of the layer mask (image 2). 

The mask code in SVG :

mask.png

Image 2, modify the fill color and add opacity: %; :

useMask.png

the result:

result.png

 

Thank you for your reply !

 

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...
Jan 13, 2021 1
Adobe Community Professional ,
Jan 13, 2021

Copy link to clipboard

Copied

Glad you could solve it and thank you for the added information.

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...
Jan 13, 2021 0
Resources