Empty pixels where colors meet in Svg

[yavonal]

Hi All. I created many icons in Adobe Animate CC before and exported them as SVG ( Because i don't know anything about Illustrator ). When i view or scale them in html canvas, i see empty pixels where different colors meet. Is there anyway to fill those pixels in another Adobe Softwares like Illustrator or something. Sample view is below. As you see, black background color can be seen between two colors. I've tried something in Illustrator like "making pixel perfect" etc.. But I couldn't fill those empty pixels. Thanks..

[John Mensinger]

It's difficult to recognize pitfalls in an unfamiliar workflow, so I tried to reproduce the problem.

• So now, I have 2 different-colored, overlapping objects native-drawn on the Animate CC canvas, exported to a single SVG file.
• In all my subsequent viewing and analysis, (SVG opened in Illustrator and imported back into Animate), I have vector objects which do not exhibit the problem.
  • I believe the difference is that your exported objects became rasterized at some point, and the "empty pixels where different colors meet" is the result of anti-aliasing

You could go about filling that gap with appropriately colored pixels, but the rasterization and doctoring the rasterized piece would defeat the purpose of the SVG (Scale-able Vector Graphic) format.

So, it's a matter of tracking down when/where your vector objects were unwittingly rasterized, because presumably, you wouldn't have this problem if the objects' original vector nature had been preserved.

The things in your post that are not immediately clear:

exported them as SVG

When i view or scale them in html canvas

What were your SVG export settings?

To what application are you referring when you say, "in html canvas," and how did the SVG get there?

Did you do anything else with them in between?