: Svg transparencies don't work as CSS background I made a translucent svg. It was a 50% opacity round metal texture. When I put it above any other color it makes it look like real metal. It

@Caterina889

Please review this two part article at alistapart.com. Part two is more specific regarding background images.

In order to use SVG images as a background you may need to simply include the svg code directly in your page, utilize javascript to load the svg, or other methods. SVG as a background image isn't well supported by some browsers.

Vote Up Vote Down

@Vandalay110

It may in fact be "loading" but you have a very large image and perhaps you haven't waited long enough for it to be processed.

SVG is a plain text format, so if you open it with a text editor, you will see that the SVG file has a few (2-3) geometry definitions (note that I am completely unfamiliar with the syntax), and then there is an embedded PNG image 1689px square stored with base-64 encoding. This defeats the purpose of using a vector format, and it is the reason why your file is 4MB in size (If I remove the image definition, the SVG is 1KB). In addition, the definitions seem to define a 200px square which may give you the impression that scaling it up has no adverse effects because you are using a 1689px square image to begin with.

You say you can't or don't want to use a PNG, but this file is really just a stealth PNG. Note that PNG supports transparency on its own, and this particular image looks like it could be saved as an indexed image with alpha to reduce the storage size.

Vote Up Vote Down

@Reiling762

I'm not sure if moving the question to Stackoverflow would help (we could try), because I'm almost certain your problem comes from the Illustrator file.

I've seen this happen a lot in Photoshop too: You create a background layer, and on top of that another layer with some effects. If you are using Blending modes or anything that depends on the first layer, and then delete the first one, you 'lose' the styles. This is because these effects (say, for example, "Multiply") are nothing by themselves, they need a back layer to act on.

To make sure your file is being saved like you want, you need to save everything you are seeing on the screen. If the export preview looks good, then there shouldn't be a problem. In this case, you might need to save the illustration as a different format, probably a flat JPG that saves everything you are seeing as it is (no transparencies). You might not be seeing anything, because the effect is there but there is no color to be applied to. You can't save just the effect, you have to save the effect and a background in the same svg

Hope it helps!

Vote Up Vote Down