Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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.

share|improve this question
    
Please tell me if there is an alternative which look perfectly like this. –  Ishpreet Apr 5 '13 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 Apr 5 '13 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 Apr 5 '13 at 19:40
    
@yisela Sure! I should have read more closely. –  Brendan Apr 5 '13 at 20:43
1  
Voting to close. This is a code issue, not a design or image issue: alistapart.com/article/… –  Scott May 5 '13 at 21:17

3 Answers 3

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.

share|improve this answer

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.

share|improve this answer
    
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 Apr 7 '13 at 4:00
    
Is this the kind of thing you're trying to achieve? jsfiddle.net/Q7pJ2 –  KryptoniteDove Sep 2 '13 at 23:37

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!

share|improve this answer
    
Problem is not the AI file. SVG as a background takes special code work: alistapart.com/article/… –  Scott May 5 '13 at 21:18

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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