How to set Background-image with SVG hosted elsewhere

Asked

Viewed 864 times

2

I’m making a website that needs to pick up a svg from another site (www.teste.com.br/image.svg) and set it as the background. But I’m not getting it.

go on like I’m doing:

   <html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height     attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
       <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
       <link rel="stylesheet" type="text/css" href="css/index.css" />
    </head>
    <body>

        <div class="fullscreen">
            <iframe id="data"></iframe>
        </div>
        <script src="js/jquery-1.9.1.min.js"></script>


        <script type="text/javascript">
           var div = document.getElementById('data');
           var data = new Date();

           var d = new Date();
           var mes = d.getMonth()+1;
           var dia = d.getDate();

           /// alterando o src
           var imagem = 'http://www.teste.com.br/clientes/svg/' + '01' + '/' + '01' + '.svg';
           div.style = 'background-image:url('+imagem+')';
       </script>
    </body>
 </html>
html css3 svg

  • Lamppost html also.

  • follows my html:)

  • You want to set the background of div or of iframe?

  • Of a div.. I put wrong I will edit hehehe

4 answers

1

For this you can use div.style.backgroundImage='url('+imagem+')';, also remove the

';' after the 'image' variable' -> background-image:url('+imagem;+')';

var div = document.getElementById('data');
var data = new Date();

var d = new Date();
var mes = d.getMonth()+1;
var dia = d.getDate();

/// alterando o style
var imagem =         'http://www.teste.com.br/clientes/' + '01' + '/' + '01' + '.svg';
div.style.backgroundImage='url('+imagem+')';

Take an example:

JS Fiddle

  • Didn’t work out :/

  • Have you tested if the image you are trying to use this rendering correctly ? In the online example is working, see: http://jsfiddle.net/puKR3/1/

  • Check my source for you see http://www.karmo.com.br/clientes/arils/svg/01/svg. does not work! :/

1

I believe you want to set the background of div and not of iframe directly, because its variable guard the element is called div. If so you should change your seal to the following:

var div = document.getElementById('fullscreen');

And your html to:

<div id="fullscreen">
    <iframe id="data" allowtransparency="true"></iframe>
</div>

And set the image in the background of the div that way:

var imagem = 'http://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg';
div.style.backgroundImage = 'url('+imagem+')';

That worked here for me

  • It worked for you?

  • @karmex, as @Cahe said in his reply it seems that the problems are in the image header svg that you are using, tried to do the procedures that he cited?

  • Yes I tried and it didn’t work. :(

1

Apparently it is not working because the remote server from where you are trying to get the image is sending the file with incorrect headers, this causes the browser to ignore the improper image.

Headlines:

HTTP/1.1 200 OK
Date: Tue, 01 Apr 2014 00:03:18 GMT
Server: Apache/2.2.3 (CentOS)
Last-Modified: Sun, 30 Mar 2014 21:36:40 GMT
ETag: "29100b5-1f870-baf26a00"
Accept-Ranges: bytes
Content-Length: 129136
X-Powered-By: PleskLin
Connection: close
Content-Type: text/xml

See the last line "Content-Type: text/xml".

#Edit

Response from here: http://kaioa.com/node/45

Create a . htaccess file in the directory where the images are and put the following lines in it:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

  • What should I do? Ask the client to change on the server something?

  • I edited with a possible solution, see if it works for you.

  • I put it there and it didn’t roll :(

0

According to the Validator.W3.org there are two problems with the files your server is sending:

  1. The charset of the document is not specified;
  2. The Mime Type is incorrect (it is returning text/xml instead of image/xml+svg.

Direct link to the test result

I don’t know if both need to be corrected or not, but I can confirm that the second is the root cause of your problem. I made two copies of the file mentioned in the comments:

Chrome opened and displayed both without problem (in a single tab), but playing both in jsFiddle by Anderson B. Furlan the first worked correctly, but the second did not.

Solution

What you need to do then is configure the server to return the Mime Type correct. If the web server is Apache - and the solution of the Cahe did not work for you - so it is necessary to seek an alternative path. I do not know what are your restrictions (your client is using Shared hosting? or has full control of Apache? which platform? ), but I leave as an example the line in my apache/conf/mime.types who deals with this type:

image/svg+xml                   svg svgz

This file is being included by httpd.conf as follows (comments removed for brevity, examples of AddType maintained):

<IfModule mime_module>
    TypesConfig conf/mime.types

    AddType application/x-compress .Z
    AddType application/x-gzip .gz .tgz

    ...

(Note: I don’t know if it makes a difference, but here the extensions include the point, i.e. .svg instead of svg - is that if you do it in your .htaccess resolve? Second that post the point should be optional...)

However you try to solve, use the Validator to check if the settings applied on the server are enjoying effect.

Browser other questions tagged html css3 svg

You are not signed in. Login or sign up in order to post.