Using an .SVG image background doesn't display? - css

i have tried using an svg image as a background image in css on windows, but the image doesent appear and when i open the image in a separate tab it downloads the file instead of displaying it. Is there some other code needed to display svg files, or will they not display on a local site?
Any feedback welcome..

You are not serving the image with the right mime-type. How you set that depends on what web server you're using, look up setting mime types in the help for it. You want the svg image to be served as image/svg+xml

Related

What are the allowed (supported) background image extensions in CSS3?

I'm making a module using Php for generating image transforms for background images from an uploaded image in a CMS.
First step is checking the extension to see if the image is even allowed to be used for a background image. However I couldn't find information about this online.
background: url('image.extension');
Does anyone know if there are any?

How to find out the image source used in a background image data?

I found out on a website an image which I like very much but when I inspected the source code with firebug i found out that it was not an image, but a div with the following CSS condition:
background-image: url("data:image/gif;base64,R0lGODlhJQAFAJECAMwAM7C2uP///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3Lnc...");
Is there any way to find out the path to that image?
That IS the path (sort of). Just copy the "data:image/gif..... "-part and paste into your browser, and the browser will render it for you.
The image is embedded so if you want that image the better option is, directly save that image through that website.

Using svg background images in Trigger.io and android 4.4

svg background images are not displayed in android 4.4.
This is only a problem when trying to load them from as local recourse. svgs are displayed when loaded from a remote url.
check out your css file and make sure you are calling backgound-size AFTER background.
More information is found here: http://developer.android.com/guide/webapps/migrating.html#BackgroundSize

css issue while downloading png image from svg in nvd3

I have one line chart using nvd3.js . I want to download this chart in .png format.
I am using canvas and sending the canvas.toDataURL("image/png") to server and downloading the image, but the image is not in proper shape .it seems the css(nvd3.css) is not getting applied.
Any help will be really heplfull.
Thanks,
chandan
i have the same requirement and "example of how to export a png directly from an svg" solved my problem (internally it adopted svg-crowbar code. basically, you need to "explicitly set css style" for all svg element.

CSS background image from network path

I am working on a custom solution in SharePoint.
I have a requirement to display images from a shared network path because these images are also shared with multiple MS applications i.e Dynamics AX
I am setting background image for my div as: background-image:url(file://{server-name}/{shared-location}/filename.ext
It works in IE. But not in Chrome! How can I make it work in other browsers as well?
file://{server-name}/{shared-location}/filename.ext renders the image when put to chrome url bar. But the same line dont works when set as background image for a div
I could create a virtual path for it, but I fear i might not able to do that in production. Please suggest! Thank you
Try with:
background: url("file://{server-name}/{shared-location}/filename.ext");
Be sure that {server-name} and {shared-location} haven't spaces and if they include slashes use forward slashes.

Resources