0

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 was made using Illustrator and had 2 of its effects: Pixelate>Mezzotint>GrainyDots and Blur>RadialBlur. Then I made a Clipping Mask. You can see it here.

When I normally open it, it views correctly, but when I use it as a background in CSS3 for my HTML5 page, it doesn't open. I am sure it's not my CSS coding's fault because when I use another very simple svg as my background, it opens.

I think it could be the Illustrator effects, maybe they don't view when you use it as a background. Also these effects make it of 4.46mb. Please suggest a solution. Making it a png wouldn't work because sometimes it needs to cover extremely long pages.

Improve this question
5
  • Please tell me if there is an alternative which look perfectly like this.
    – Ishpreet
    Commented Apr 5, 2013 at 14:44
  • 1
    Welcome to GD.SE! I'm voting to close because such a question would be more suited to another Stack Exchange site (Webmasters or Stack Overflow, I'd imagine). A moderator can probably transfer the question if he or she feels it appropriate to do so!
    – Brendan
    Commented Apr 5, 2013 at 18:06
  • 1
    @Brendan I'd like to see our Illustration Guru's opinion (Scott), because I'm guessing it could just be the effects fron the file. If that's the case, then SO might not have a different solution. Shall we wait a little longer just in case? If it gets 1 more vote (it currently has 4) I'll move it.
    – Yisela
    Commented Apr 5, 2013 at 19:40
  • @yisela Sure! I should have read more closely.
    – Brendan
    Commented Apr 5, 2013 at 20:43
  • 1
    Voting to close. This is a code issue, not a design or image issue: alistapart.com/article/…
    – Scott
    Commented May 5, 2013 at 21:17

3 Answers 3

Reset to default
1

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.

Improve this answer
2
  • Does this mean it ain't vector and using a png would do the same work? I would try to find an alternative for brushed metal texture.
    – Ishpreet
    Commented Apr 7, 2013 at 4:00
  • Is this the kind of thing you're trying to achieve? jsfiddle.net/Q7pJ2
    – KryptoniteDove
    Commented Sep 2, 2013 at 23:37
0

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!

Improve this answer
1
0

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.

Improve this answer

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.