Symbol Pixelization

New Here ,
Sep 17, 2022 Sep 17, 2022

Copy link to clipboard

Copied

Hi there,

 

I am experience a pixelation effect with some symbols in my project and when exported to an .svg.

Please refer to screenshot of webpage capture of this particular arboard.

 

Thanks so much

Umar AR

TOPICS
Import and export

Views

83

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 Expert ,
Sep 17, 2022 Sep 17, 2022

Copy link to clipboard

Copied

What kind of gradient is that in those symbols?

And what else is there in those stars, how did you build them?

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
New Here ,
Sep 17, 2022 Sep 17, 2022

Copy link to clipboard

Copied

Hi

 

The star streak symbol gradients are a translation from completley transparent to semi transparent red through to solid yellow. The stars were created with standard illustrator vector building techniques and created as symbols.

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 Expert ,
Sep 17, 2022 Sep 17, 2022

Copy link to clipboard

Copied

That gradient is aligned along the stroke. And while SVG can contain gradients on a stroke, they cannot contain gradients that follow the stroke. They can only have gradients in the stroke (the first option).

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
New Here ,
Sep 17, 2022 Sep 17, 2022

Copy link to clipboard

Copied

So my best option is to break the link with the symbol and expand the stroke with its contained gradient and then export 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
community guidelines
New Here ,
Sep 17, 2022 Sep 17, 2022

Copy link to clipboard

Copied

I tried what you said to but to no avail. However this worked.

 

1. Break the symbol link and copy it.

2. Increase the width of the original path.

3. Change the color of the copy to solid then expand it.

4. Reposition it over the original and use as a clipping mask.

5. Export artboard to .svg

 

Now it displays correctly.

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 Expert ,
Sep 17, 2022 Sep 17, 2022

Copy link to clipboard

Copied

You will then have the pixels inside the clipping mask. If that is no problem, then your solution will of course work.

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
New Here ,
Sep 18, 2022 Sep 18, 2022

Copy link to clipboard

Copied

Hi Monika,

 

The clipping mask boundary is within the path below with its increased width which was 5.5px to 7px. Now the when svg is veiwed within a webpage for instance the path outline is smooth at all zoom levels.

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
New Here ,
Sep 18, 2022 Sep 18, 2022

Copy link to clipboard

Copied

LATEST

Modified path

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