Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ASP.Net Development Server SVG File Serving for CSS background-image

I'm having some trouble getting an SVG file set as a background of an element in an MVC 3 Site (Razor View Engine) and wondering if the ASP.Net Development Server (Cassini?) is properly serving the SVG file.

My SVG file is located at /img/plus.svg and here is it's contents

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="25px" height="25px" viewBox="0 0 25 25" enable-background="new 0 0 25 25" xml:space="preserve">
<polygon fill="#231F20" points="25,8.621 16.38,8.621 16.38,0 8.621,0 8.621,8.621 0,8.621 0,16.379 8.621,16.379 8.621,25 
    16.38,25 16.38,16.379 25,16.379 "/>
</svg>

The css rule I'm using to set the background is this:

.plusIcon { background-image: url(@Url.Content("~/img/plus.svg")); }

I've also added this to my Web.Config <system.webServer><staticContent> section:

<!-- Proper svg serving. Required for svg webfonts on iPad -->
<remove fileExtension=".svg"/>
<remove fileExtension=".svgz"/>
<mimeMap fileExtension=".svg" mimeType="images/svg+xml" />
<mimeMap fileExtension=".svgz" mimeType="images/svg+xml" />

When I navigate to the url /img/plus.svg the file is downloaded properly.

Is this just a Dev Server problem, should I try in IIS?

like image 503
Jacob Avatar asked May 12 '11 16:05

Jacob


People also ask

Can I use SVG as background image CSS?

SVG images can be used as background-image in CSS as well, just like PNG, JPG, or GIF. All the same awesomeness of SVG comes along for the ride, like flexibility while retaining sharpness. Plus you can do anything a raster graphic can do, like repeat.

Can we add SVG in CSS?

We can use SVG in CSS via data URI, but without encoding it works only in Webkit based browsers. If encode SVG using encodeURIComponent() it will work everywhere. SVG must have attribute xmlns like this: xmlns='http: //www.w3.org/2000/svg' . If it doesn't exist, it will be added automagically.

Does SVG have background?

The SVG stands for Scalable Vector Graphics. The SVG background is used to draw any kind of shape, set any color you want by the set property.


1 Answers

It turns out this is just a Cassini, ASP.Net Development Server problem. When uploaded to a proper IIS Site the SVG files are served properly.

like image 172
Jacob Avatar answered Sep 20 '22 01:09

Jacob