0

I am new to web development. What I was trying to do was build an adaptive web site. I decided to use .svg for many of my images. My question is - Is there any way to use .svg as a background image using the css style sheet and keep it adaptive and scale. I wanted to be able to use media queries to keep the mobile portion of the web site smaller with less images. The olny problem is, is that I want my .svg to be able to scale (grow bigger and smaller with the web page). I have found a way to do this as an inline image but that will always require me to load all the images from the start of loading. I don't want the mobile users to have to download all the images because it will slow things down and cost money from there data accounts. I wanted the media queries to pull images in and out of the page via css depending on the screen size of the user. Sorry for the long winded question. Thanks for your time.

PS trying to do this with out using java script if its possible? Are there draw backs to using java script on a web site?

user3384747
  • 19
  • 1
  • 4

1 Answers1

2

CSS rule

background-image: url('file.svg');

To make your SVG scale you should use percentages for your measurements where possible. For instance if you want to make a gradient that fills the whole background:

file.svg

<?xml version="1.0" encoding="utf-8"?>
<svg width="100%" height="100%">
    <defs>
        <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(192,192,192);stop-opacity:1" />
        </linearGradient>
    </defs>
    <rect x="0" y="0" width="100%" height="100%" fill="url(#grad)" />
</svg>

You may also want to look into responsive CSS with media queries if this doesn't provide enough control. You can use it to change it to different SVGs. This CSS section targets screens that are 800px wide at most:

@media screen and (max-width: 800px) {
    body {
        background-image: url('file800.svg');
    }
}

Another tool at your disposal is the background-size rule. It's a CSS 3 rule so you might want to look at the level of support for different browsers.

Dissident Rage
  • 2,610
  • 1
  • 27
  • 33
  • ahh ic in the actual svg code it self. Some of my svg's are very complicated so I dont know if that would be worth it, but ill check it out. Thanks for the quick reply. – user3384747 Mar 05 '14 at 20:37
  • Yea i just checked out one of my .svg's and there really complex with alot of values. I would not even know where to begin with the percentages. – user3384747 Mar 05 '14 at 20:39
  • This is an article with more of what I am referring to. This article was written in 2010. Is there a way to solve this problem yet. Like I said Im very new to web development. I really love responsive design though its awsome and I want it to be the best site it can be for mobile and desktop users. – user3384747 Mar 05 '14 at 21:06
  • This is article is what I am referring to. http://blog.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ Like I said Im very new to web development, but I love responsive design. I want my site and future sites to be the best they can be for mobile and desktop users. This article was written in 2010, is there a reasonable way to solve this yet with straight css. Thanks for your help. – user3384747 Mar 05 '14 at 21:12
  • The article is right. Responsive design really depends on the load your site puts on the client. For complex websites you may want to instead deliver different site designs for mobile browsers using server-side code (such as PHP) to detect the client in order to determine what the client receives. This will also do favors for your vistiors' bandwidth as mobile browsers tend to have tight limits. Web design has a lot of nuances like this, but you'll pick them up in time. – Dissident Rage Mar 05 '14 at 23:57
  • yea its funny because after I posted a reply I found this [cloud four](http://blog.cloudfour.com/responsive-web-design-is-solid-gold/) but Im trying to figure out how to do this with .svg with out using php or java script and for now I don't think I can do it. I just don't know enough yet. For the sake or learning I found this http://www.youtube.com/watch?v=pN_ubhx41SY – user3384747 Mar 06 '14 at 02:51