0

I have an image that's an application icon for a webapp. It's a pretty simple layout. The background is a rounded rectangle with a light grey to grey gradient.

When I export this image as an .svg, everything looks right EXCEPT the gradient looks like it's rotated 180°. It also looks a little darker. Any ideas what's going on here?

In the image attached to this post, the one on the right is the real original one from the illustrator file. And the one on the right is what I get when I export is as an svg.

enter image description here

Improve this question
11
  • Hi. How are you viewing the SVG? Have you tried viewing it in your browser?
    – Billy Kerr
    Commented May 26, 2023 at 19:11
  • @BillyKerr Yes that screenshot image is the svg being viewer in the browser.
    – l008com
    Commented May 26, 2023 at 19:16
  • I can't really work out what's causing the problem. Sorry. It could potentially be a bug, but I'm not sure this can really be answered without access to the files. One thing to check is that you are not using any effects, as these don't always translate so well into SVG. Gradients can pose some problems, so too can layers with blending modes. Try to keep your design a simple as possible.
    – Billy Kerr
    Commented May 27, 2023 at 8:39
  • This is truly as simple as it looks. Some very simple objects atop a rounded rectangle which has a grey to grey color gradient for a fill color. Very simple. And yet somehow it fails every single time.
    – l008com
    Commented May 27, 2023 at 21:05
  • OK, I'll give this one more try. Instead of using 1 grey colour in a gradient, make the gradient between two solid colours of grey (with no transparency). The problem might be the way the browser is rendering the gradient if there is transparency in it. Also try it in different browsers - such as Chrome, Firefox, Edge, or Safari. If this doesn't work, I'm all out of ideas.
    – Billy Kerr
    Commented May 27, 2023 at 21:14

1 Answer 1

Reset to default
0

Are you sure these are the same file? The crosshairs are missing from the left image and the word pain is missing from the right. Some of the outline of North America is different too. Makes me think that these are different files, different versions of the same file, or that you're only exported some layers.

Improve this answer
3
  • Well it is not "the same file" at all. The right file is the original illustrator document. Then I exported as SVG and the left image is that svg document. That is why the guides are not there. I don't see any differences in north America. And the word "pain" is the worth "path" because the cursor happened to be on the path when I took the screen shot.
    – l008com
    Commented May 26, 2023 at 19:18
  • Ah that makes sense. The gradient colour at the bottom of each image appears to be the same, they just start with different colours at the top. Is the gradient a straightforward colour gradient, or a created by layering a partially transparent gradient on top of a block of colour?. I would think that the former would convert to SVG better. Ditto Billy Kerr's comments about effects / blending modes.
    – Chris
    Commented May 27, 2023 at 11:13
  • Just a regular old gradient. From one tone of gray to another.
    – l008com
    Commented May 27, 2023 at 21:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.