SVG Image Generation Demo

This demo shows how to generate an SVG image based on user input and how to embed such an image in an HTML page. Note that you must have an SVG plugin installed in order to be able to view the SVG graphic. Also note that once you install the SVG graphic you may need to close and reopen your browser for the change to take effect...


Source Code for svgRender.asp 
<form method="get" action="svgRender.asp" id=form1 name=form1>
	<input type="text" name="txtTitle" value="<%=Request("txtTitle")%>">
	<br>
	<input type="submit" value="Generate SVG Graphic" id=submit1 name=submit1>
</form>
<p>
<embed src="svg.asp?title=<%=Request("txtTitle")%>" width="625.5" height="293" type="image/svg+xml">

Source Code for svg.asp 
<%Response.AddHeader "Content-Type","image/svg-xml"%>
<svg width="12cm" height="3.6cm" viewBox="0 0 1000 300"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="MyPath"
          d="M 100 200 
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
  </defs>
  <desc>Example toap01 - simple text on a path</desc>

  <use xlink:href="#MyPath" fill="none" stroke="red"  />
  <text font-family="Verdana" font-size="42.5" fill="blue" >
    <textPath xlink:href="#MyPath">
	<%
	Dim title
	title = "We go up, then we go down, then up again."
	If Request("title") <> "" Then
	   title = Request("title")
	End If
	Response.Write title
	%>
    </textPath>
  </text>

  <!-- Show outline of canvas using 'rect' element -->
  <rect x="1" y="1" width="998" height="298"
        fill="none" stroke="blue" stroke-width="2" />
</svg>

[Return to the article]