CODEWITHSUNDEEP
htmlcssasp.netsvg
noobmaster007
noobmaster007

Reputation: 163

Load SVG contained within a HTML page to an .aspx page

I have a svg.html file where the svg content are defined within a element. I've been combing the Internet for 3 days now, have not found a solution as to why the icons I use don't show up on the rendered .aspx web pages. svg.html looks like this:

<div class="svg-icons">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icons">
<symbol id="icon-menu" viewBox="0 0 18 18">
<path d="##path value##"></path>
</symbol>
</svg>
</div>

I have tried the following:

  1. using the <object></object> tags referring to svg.html.
  2. <use> tags.
  3. In web.config <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />

What am I doing wrong?

Please note that I cannot change the svg.html file, and this is an ASP.Net web forms project.

Upvotes: 0

Views: 2689

Answers (1)

Tetsuya Yamamoto
Tetsuya Yamamoto

Reputation: 24957

If you have complete markup inside html file containing SVG image, you can place a literal control & assign the HTML page contents from code behind by stripping unnecessary markups with regex:

ASPX

<asp:Literal ID="placeholder" runat="server" />

Code-behind

protected void Page_Load(object sender, EventArgs e)
{
    string html;
    using (StreamReader sr = File.OpenText(Server.MapPath("~/path_to_html_file.html"))
    {
        html = sr.ReadToEnd();
        sr.Close();
    }

    Regex start = new Regex(@"[\s\S]*<body[^<]*>", RegexOptions.IgnoreCase);
    html = start.Replace(html, "");
    Regex end = new Regex(@"</body[\s\S]*", RegexOptions.IgnoreCase);
    html = end.Replace(html, "");

    placeholder.Text = html;

}

If you have raw SVG file and want to use it in literal tag element, you can simply use <iframe src="/path_to_SVG_file.svg" />/<embed src="/path_to_SVG_file.svg" /> inside user control, or a div assigned with InnerHtml attribute:

ASPX

<div id="placeholder" runat="server"></div>

Code-behind

placeholder.InnerHtml = File.ReadAllText(Server.MapPath("~/path_to_SVG_file.svg"));

References:

Include contents of an html page in an aspx page

Interactive Mapping Using SVG & ASP.NET

Upvotes: 1

Related Questions