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?
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With