SVG files look good locally, but the middle becomes blurry when uploaded to wikipedia

[Aeda]

Preview of the problem, left is what the file looks like in a browser when I open it locally, right is after I upload it to wikipedia

What I wanted to happen: Make SVG icons I can use on wikipedia that look good

What happened instead: Even though the SVG files look good when I open them locally in a browser, after uploaded to wikipedia the middle graphics become blurry but the outline stays sharp.

Steps to create to problem: I was just supposed to change the frame colour of an existing SVG image. So the outline that has stayed sharped is a shape I created in Affinity Designer, but the middle portion which has become blurry is imported from a previous artist's work. I exported the image as SVG (digital) using Affinity Designer.

Steps to fix the problem: ???

[BofG]

7 hours ago, Aeda said:

Steps to create to problem

Those weren't really the steps to create the problem

It looks like you've somehow ended up having the middle part as a raster, at a low resolution.

If you can post the original and your reworked SVG it would be easy to see for certain. Posting your Affinity file would be best if you want to know what steps caused the rasterisation.

[Wosven]

HI @Aeda and welcome!

You shouldn't use effects or adjustement mask that'll be rasterized.

Another point: since icon can be used at small size, use colors with enough contrast to be visible (the grey is too dark, for example).

Drama_Masks_5.svg

[v_kyr]

12 hours ago, Aeda said:

Steps to create to problem: I was just supposed to change the frame colour of an existing SVG image. So the outline that has stayed sharped is a shape I created in Affinity Designer, but the middle portion which has become blurry is imported from a previous artist's work. I exported the image as SVG (digital) using Affinity Designer.

Well in order to see what happened to/with the inner image part in your SVG, a look into the generated SVG code (which you didn't provided) would probably tell here. Actually it looks to me as some blur effect was set to the middle part.

However, look at what @Wosven already showed and said above, that's all SVG vector (also the inner parts) and thus will overall scale up/down fine and sharp here. Also the contrast grey-level change he applied gives the whole a much better general look.

[Aeda]

Quick update: Thank you for the responses! It seems like it wasn't my files so much as how wikipedia handles the images, after clearing my cache they looked good.