Symbol Pixelization

[Umar AR]

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

[Monika Gause]

What kind of gradient is that in those symbols?

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

[Umar AR]

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.

[Monika Gause]

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).

[Umar AR]

So my best option is to break the link with the symbol and expand the stroke with its contained gradient and then export it.

[Umar AR]

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.

[Monika Gause]

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

[Umar AR]

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.

[Umar AR]

Modified path