Can't display SVG image

Asked Jun 01 '16 at 20:27

Active Jun 02 '16 at 00:47

Viewed 590 times

I'm trying to display an SVG; the below code works with inline SVG, but now I have an SVG file with lots of content, so I changed it to this:

   background:url("data:image/svg+xml;base64, dot-and-circle.svg")  no-repeat;

But it's not working. Can anyone help?

 body,html,#map_canvas{height:100%;margin:0;}
 #map_canvas .centerMarker{
 position:absolute;
  /*url of the marker*/
 background: url("data:image/svg+xml;utf8,<svg     xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15'   cy='15' r='10' /></svg>")  no-repeat;
 /*background:url('dot-and-circle.svg') no-repeat;
 /*center the marker*/
 top:50%;left:50%;
 z-index:1;
 /*fix offset when needed*/
 margin-left:-10px;
 margin-top:-34px;
 /*size of the image*/
 height:16px;
 width:16px;
 cursor:pointer;
}

edited Jun 02 '16 at 00:47

RamenChef

5,557
11
31
43

asked Jun 01 '16 at 20:27

Alfred Alfizo Mosima

Just do `background:url("dot-and-circle.svg");`? – Jacob G Jun 01 '16 at 20:29
Na that doesnt work tried to inspect it on the browser it says failed to load image – Alfred Alfizo Mosima Jun 01 '16 at 20:33
is `dot-and-circle.svg` the name of the file, and is it in the same directory? – Jacob G Jun 01 '16 at 20:35
yes thats correct. – Alfred Alfizo Mosima Jun 01 '16 at 20:39
does the SVG display if you just open the svg file in your browser? – Jacob G Jun 01 '16 at 20:40
Yes it does the only problem is when i reference it in the css file dont know why it breaks – Alfred Alfizo Mosima Jun 01 '16 at 20:42
Then there is some other problem, check your console. http://helephant.com/2009/08/12/svg-images-as-css-backgrounds/ – Jacob G Jun 01 '16 at 20:44
1

Possible duplicate of [Why would an image fail to load from CSS when the path is correct, but loads when URL entered directly?](http://stackoverflow.com/questions/26264006/why-would-an-image-fail-to-load-from-css-when-the-path-is-correct-but-loads-whe) – RamenChef Jun 02 '16 at 01:07

Can't display SVG image

0 Answers0