none
Background image in svg

    Question

  • Hi all,

    This look simple. But not working :(.  I have an svg image to use as a background.

      I am using background-image and background-size:100% 100% etc., in <body> tag.  It appears small and doesn't cover the whole background, even if width and height are specified in css.

    Should I use media queries? And for each different occurance should I specify size etc.,

    ( I read, there is no need to do extra stuff if we use svg. I don't want to use 100% 140% 180% images,instead I need to use svg (for fill view, snapped view, landscape, portrait, and to match all resolutions).  There is no quickstart doc related to that. The "guidelines for scaling to different screens  and resolutions" does not talk about how to implement it.)

    Thanks so much


    karthika

    Tuesday, January 29, 2013 12:40 AM

Answers

  • Hi ArunKarthika,

    Based on my local test, the following CSS style works well for normal images (such as a .png image).


    body {
     background: url( [image url] ) no-repeat ;
     background-size:100% 100%; /*generic*/
    }

     


    when using .svg image as background, it seems the behavior is depending on the .svg image itself. I've tried a simple test with a .svg image downloaded from web. By default it will not scacle with the above css style. After I open the .svg file and manually specify a fixed width and height (see below), it works well (be streteched to the container element) with the above css style:


    <svg xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"  width="400px" height="400px" >
    
    ....
    ..
    
    </svg>
    



    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by ArunKarthika Thursday, January 31, 2013 6:29 PM
    Wednesday, January 30, 2013 4:07 AM

All replies

  • Hi,

    Could you post some related code?

    So I may reproduce on my side.


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Tuesday, January 29, 2013 8:34 AM
  • I am using single page navigation method. In default.html I have home.html fragment loaded or page2.html loaded. In home.html I do the following:

    </head> <body style="background-image: url('/images/background.svg'); background-repeat: no-repeat;">

    ....

    My svg image is  around 990 * 550. I get the svg image loaded but only as a small portion.Is there a property to mention "stretch" to screen?Is this the right way to do svg  for background image. Should I have to use css  to specify width and height of background image? If so, how should I specify it for filled view,snapped view etc?

    karthika

    Tuesday, January 29, 2013 4:27 PM
  • Hi,

    Do you try to set the style width and height? And you can debug with VS2012 DOM Explorer.

    #Quickstart: Debugging apps (JavaScript)

    http://msdn.microsoft.com/en-us/library/windows/apps/hh441474.aspx


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Wednesday, January 30, 2013 2:09 AM
  • Hi ArunKarthika,

    Based on my local test, the following CSS style works well for normal images (such as a .png image).


    body {
     background: url( [image url] ) no-repeat ;
     background-size:100% 100%; /*generic*/
    }

     


    when using .svg image as background, it seems the behavior is depending on the .svg image itself. I've tried a simple test with a .svg image downloaded from web. By default it will not scacle with the above css style. After I open the .svg file and manually specify a fixed width and height (see below), it works well (be streteched to the container element) with the above css style:


    <svg xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"  width="400px" height="400px" >
    
    ....
    ..
    
    </svg>
    



    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by ArunKarthika Thursday, January 31, 2013 6:29 PM
    Wednesday, January 30, 2013 4:07 AM
  •  Hi Steven,

    Thanks again :). I did edit in the xml file, but I think my image might have an issue. When I tried it on my logo.svg, it looks like it works so far,when I test in simulator.

    For my tile,storelogo,small logo & splash screen: I have read I can use just one svg file instead of 3 versions of different scale images. (1) Pls confirm if I can use storelogo.svg,smalllogo.svg etc and refer them in my code with the same name, for all resolution devices. (2) For different orientations(snapped,filled,portrait) should I scale the title,logo and button or can it remain the same size? If I should scale, should I use media query or I donot need to do anything if its an svg image?

    Thanks so much,

    Karthika.


    karthika

    Wednesday, January 30, 2013 9:26 PM

  • Hi ArunKarthika,

    Well, so your new question is somewhat related to the image resource used in various kind of screen resolutions and orientation scenario, correct?

    According to the windows store programming reference, the screen orientation (view state) doesn't matter. What really matter for your image resources is the screen resolution. And it seems this is mainly for those bitmap based images like .png images. Scalable vector graphic images should be auto scalable by windows (see the following reference).

    #Guidelines for scaling to pixel density (Windows Store apps) (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/hh465362

    So if you use png images, you can consider provide multi-versions (for different scale) for each image file (or you can provide one with higher dpi and so that system will help scale down it for lower screen resolution devices, but the effect is not guaranteed). For SVG image, you can provide a single version. Based on my test (the css background-image test), when I specify different size for the container to stretch the SVG image, it displays well. But you'd better perform a thorough test under different resolution with your image resources to ensure it works.


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Thursday, January 31, 2013 7:38 AM
  • Hi Steven,

    Thanks. But I think svg images are options only for images inside the app. When I tested for logo.svg,storelogo.svg,smalllogo.svg & splashscreen.svg, the application manifest file says it expects only png , jpeg or jpg format. :(. I have to create all scale imges for all these? Not sure. Thanks Anyway.


    karthika

    Friday, February 01, 2013 1:30 AM
  • Thanks for your followup ArunKarthika,

    I haven't tried using .svg images as logo files directly. So the message you've got has confirmed that .svg is not working for the logo file and we have to prepare the separate logo images (png or other format) respectively. But using .svg images as windows store app UI resources is ok. Anyway, thanks for sharing the information with us.


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Friday, February 01, 2013 4:02 AM
  • Yes, I tried and the error message is "app manifest accepts only raster image formats like png,jpg,jpeg"... I have quoted a message from Justin Cooper in another thread.

    "  For Metro style apps, only .jpg, .jpeg, or .png files may be specified in the app's manifest. While supported within the app itself, SVG images are not currently supported for things like tiles, splash screen, logos, etc... "

    Thanks


    karthika

    Friday, February 01, 2013 3:03 PM