3

Have tried all the embedding approaches listed on W3 schools and then some more. Explorer will display it improperly sized even when width and height are provided, chrome and firefox just prompt to download. Using Visual Studio 2010 built in development server, likely need to add the mime type for support, don't where to though.

The SVG files are in my content folder and I am creating the html in the view as such, where ImageFileName is "filename.svg":

<object data="/Content/ExternalCats/@RootCat.ImageFileName" type="image/svg+xml"></object>

or 

<embed src="/Content/ExternalCats/@RootCat.ImageFileName" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
LaserBeak
  • 3,257
  • 10
  • 43
  • 73

3 Answers3

8

You could try embedding the <svg> directly into the HTML. Modern browsers support it:

@Html.Raw(File.ReadAllText(Server.MapPath("~/content/externalcats/" + RootCat.ImageFileName)))

or serve the SVG with the correct MIME type (image/svg+xml):

public ActionResult Svg()
{
    return File(Server.MapPath("~/content/test.svg"), "image/svg+xml");
}

and then:

<object data="@Url.Action("svg")" type="image/svg+xml">
    <embed src="@Url.Action("svg")" type="image/svg+xml"/>
</object>

or if you are using IIS 7.0+ you could define a static MIME mapping with the .svg extension:

<system.webServer>
    <validation validateIntegratedModeConfiguration="false"/>
    <modules runAllManagedModulesForAllRequests="true"/>
    <staticContent>
        <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
    </staticContent>
</system.webServer>
Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
0

SVG support has been added to Internet Explorer from IE9. You must be trying with an older version of IE. Have you tried the same page with Firefox and Google Chrome?

Edit:

You could also use this library called SVGWeb. Apparently, this library also enables IE 6, 7 and 8 to render SVG. They have some really nice demos too to try out. The quick-start guide is here.

gsbabil
  • 7,505
  • 3
  • 26
  • 28
  • Using IE9 and latest Chrome and FireFox. Internet explorer is the only one that displays the image, albeit improperly resized the others just prompt to download the svg file. – LaserBeak Mar 03 '12 at 10:28
0

Are you using a local server program (for example a small Python HTTP server) to load your page? If so, you need to make sure it recognizes the MIME-type. Even if the browser supports SVG, if the server doesn't return the correct MIME-type, the browser doesn't know what to do with it and asks you to save.

AndyG
  • 39,700
  • 8
  • 109
  • 143
Danny
  • 45
  • 10
  • Yeah, that's what I was thinking, the server's at fault for not returning the data with the correct headers. I am using Visual Studio 2010 with built in IIS7, not sure where to change these options. – LaserBeak Mar 03 '12 at 10:34
  • to be honest i didn't even know visual studio had it's own server so i don't know anything about it but a quick google search lead me to this: [link](http://blogs.msdn.com/b/scicoria/archive/2011/10/06/additional-mime-types-in-visual-studio-2010-development-web-server.aspx) maybe this can help you – Danny Mar 03 '12 at 10:48