<%@ page language="C#" masterpagefile="~/templates/Documentation.master"  
			inherits="Page" 
			pagetitle="Generating Scalable Vector Graphics "
			keywords="Generating Scalable Vector Graphics "%>
<asp:content id="DocToc" contentplaceholderid="DocToc" runat="Server" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:asp="http://www.w3.org/1999/XSL/Transform">
  
  <li class="NavMenuListItem">
    <div>
      <a href="d_start2.html">Chapter 1: Getting Started with Stylus Studio</a>
    </div>
  </li>
  
  <li class="NavMenuListItem">
    <div>
      <a href="d_edit.html">Chapter 2: Editing and Querying XML</a>
    </div>
  </li>
  
  <li class="NavMenuListItem">
    <div>
      <a href="d_flatfileconversion.html">Chapter 3: Converting Non-XML Files to XML</a>
    </div>
  </li>
  
  <li class="NavMenuListItemActive">
    <div>
      <a href="d_xslt.html">Chapter 4: Working with XSLT</a>
    </div>
    <ul>
      <li>
        <a href="d_xslt2.html#wp795365">Getting Started with XSLT</a>
      </li>
      <li>
        <a href="d_xslt3.html#wp445144">Tutorial: Understanding How Templates Work</a>
      </li>
      <li>
        <a href="d_xslt4.html#wp615501">Working with Stylesheets</a>
      </li>
      <li>
        <a href="d_xslt5.html#wp498120">Creating Stylesheets That Generate HTML</a>
      </li>
      <li>
        <a href="d_xslt6.html#wp251728">Specifying Extension Functions in Stylesheets</a>
      </li>
      <li>
        <a href="d_xslt7.html#wp254359">Working with Templates</a>
      </li>
      <li>
        <a href="d_xslt8.html#wp452667">Using an External XSLT Processor</a>
      </li>
      <li>
        <a href="d_xslt9.html#wp455179">Postprocessing Result Documents</a>
      </li>
      <li>
        <a href="d_xslt10.html#wp494921">Generating Formatting Objects</a>
      </li>
      <li class="NavMenuLinkActive">
        <a href="d_xslt11.html#wp495041">Generating Scalable Vector Graphics</a>
        <ul>
          <li>
            <a href="d_xslt11.html#wp499304">About SVG Viewers</a>
          </li>
          <li>
            <a href="d_xslt11.html#wp737942">Running the SVG Example</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="d_xslt12.html#wp257629">XSLT Instructions Quick Reference</a>
      </li>
    </ul>
  </li>
  
  <li class="NavMenuListItem">
    <div>
      <a href="d_xslt_xmlxml.html">Chapter 5: Creating XSLT Using the XSLT Mapper</a>
    </div>
  </li>
  
  <li class="NavMenuListItem">
    <div>
      <a href="d_java.html">Chapter 6: Debugging Stylesheets</a>
    </div>
  </li>
  
  <li class="NavMenuListItem">
    <div>
      <a href="d_schema.html">Chapter 7: Defining XML Schemas</a>
    </div>
  </li>
  
  <li class="NavMenuListItem">
    <div>
      <a href="d_dtd.html">Chapter 8: Defining Document Type Definitions</a>
    </div>
  </li>
  
  <li class="NavMenuListItem">
    <div>
      <a href="d_xpath.html">Chapter 9: Writing XPath Expressions</a>
    </div>
  </li>
  
  <li class="NavMenuListItem">
    <div>
      <a href="d_xquery.html">Chapter 10: Working with XQuery in Stylus Studio</a>
    </div>
  </li>
  
  <li class="NavMenuListItem">
    <div>
      <a href="d_webservices.html">Chapter 11: Composing Web Service Calls</a>
    </div>
  </li>
  
  <li class="NavMenuListItem">
    <div>
      <a href="d_rdb.html">Chapter 12: Accessing Relational Data as XML</a>
    </div>
  </li>
  
  <li class="NavMenuListItem">
    <div>
      <a href="d_adv.html">Chapter 13: Extending Stylus Studio</a>
    </div>
  </li>
  
  <li class="NavMenuListItem">
    <div>
      <a href="d_help.html">Chapter 14: Stylus Studio GUI Reference</a>
    </div>
  </li>

</asp:content>
<asp:content id="DocPage" contentplaceholderid="DocPage" runat="Server">
  <a name="wp495041"/>
  <p class="BreadCrumbs">
    <span>
      <a href="/" title="Stylus Studio Home">Home</a>&#160;&gt;
    </span>
    <span>
      <a href="/docs/" title="Online Product Documentation">Online Product Documentation</a>&#160;&gt;
    </span>
    <span>
      <a href="." title="Table of Contents">Table of Contents</a>&#160;&gt;
    </span>
    <span class="BreadCrumbsThisPage">Generating Scalable Vector Graphics </span>
  </p>
  <div style="float:right;margin-bottom:1em;" class="navHelp">
    <a class="navHelp" href="d_xslt10.html">&lt;
			Previous
    </a>|
		
    <a class="navHelp" href="d_xslt12.html">Next
			&gt;
    </a>
  </div>
  <a shape="rect" name="wp495041"> </a>
  <h1 class="pHeading1">
Generating Scalable Vector Graphics 

  </h1>
  <a shape="rect" name="wp499263"> </a>
  <p class="pBody">
The procedure for defining a stylesheet that generates an XML document that containts Scalable Vector Graphics (SVG)  is the same as for any other stylesheet. Simply create a stylesheet that specifically creates SVG elements. You can then use Stylus Studio to display the rendered SVG. 

  </p>
  <a shape="rect" name="wp738012"> </a>
  <p class="pAnchor">
	
  </p>
  <div align="left">

    <table border="1">

  
      <tr bgcolor="#E8E8E8" align="left">    
        <td rowspan="1" colspan="1">
          <a shape="rect" name="wp738005"> </a>
          <div style="color: #cc0000; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: bold; margin-bottom: 0pt; margin-left: 0pt; margin-right: 0pt; margin-top: 3pt; text-align: right; text-decoration: none; text-indent: 0pt; text-transform: none">
Note

          </div>

        </td>
    
        <td rowspan="1" colspan="1">
          <a shape="rect" name="wp738007"> </a>
          <p class="pBody">
&#160;

          </p>

        </td>
    
        <td rowspan="1" colspan="1">
          <a shape="rect" name="wp738009"> </a>
          <p class="pBody">
SVG is a W3C recommendation for an XML vocabulary that describes two-dimensional graphics. It is assumed that you are familiar with SVG. For additional information about SVG, see
            <span style="font-weight: normal"> </span>
            <span style="font-weight: bold">
              <a shape="rect" href="http://www.w3.org/Graphics/SVG">http://www.w3.org/Graphics/SVG</a>
            </span>
            <code class="cCode">.</code>

          </p>

        </td>

      </tr>
  
      <caption align="bottom"/>

    </table>

  </div>
  <p class="pAnchor">


  </p>
  <a shape="rect" name="wp499304"> </a>
  <h1 class="pHeading2">
About SVG Viewers

  </h1>
  <a shape="rect" name="wp737922"> </a>
  <p class="pBody">
If you have an installed SVG viewer, Stylus Studio automatically displays the rendered SVG when you apply the stylesheet. 

  </p>
  <a shape="rect" name="wp499299"> </a>
  <p class="pBody">
If you do not have an installed SVG viewer, you can still define a styelesheet that generates SVG. However, when you try to preview the result of the stylesheet, Stylus Studio displays the generated XML. You can download an SVG viewer from Adobe Systems Incorporated at 
    <span style="font-weight: bold">
      <a shape="rect" href="http://www.adobe.com/support/downloads/main.html">http://www.adobe.com/support/downloads/main.html</a>
    </span>. Under 
    <b class="cBold">Readers</b>, select the SVG Viewer for 
    <b class="cBold">Windows</b>. After you install an SVG viewer, you must restart Stylus Studio and Internet Explorer to be able to view the rendered graphics. 

  </p>
  <a shape="rect" name="wp737942"> </a>
  <h1 class="pHeading2">
Running the SVG Example

  </h1>
  <a shape="rect" name="wp915659"> </a>
  <h5 class="pStepStart">
To run the SVG example that is included in Stylus Studio:

  </h5>
  <a shape="rect" name="wp499739"> </a>
  <div style="color: #000000; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; margin-bottom: 0pt; margin-left: 18pt; margin-right: 0pt; margin-top: 6pt; text-align: left; text-decoration: none; text-indent: -18pt; text-transform: none">
	1.	In Stylus Studio, open the 
    <code class="cCode">examples\SVG\chart.xsl</code> file in your Stylus Studio installation directory. 

  </div>
  <a shape="rect" name="wp499740"> </a>
  <p class="pBodyRelative">
Alternative: If the Stylus Studio 
    <code class="cCode">examples</code> project is open, you can access this file from the 
    <b class="cBold">Project</b> window. To open the 
    <code class="cCode">examples</code> project, open 
    <code class="cCode">examples.prj</code> in the Stylus Studio 
    <code class="cCode">examples</code> directory. 

  </p>
  <a shape="rect" name="wp499741"> </a>
  <p class="pBodyRelative">
The 
    <code class="cCode">SalesFigures</code> scenario has already been defined. In this scenario, the stylesheet operates on elements in the 
    <code class="cCode">chart.xml</code> source document. This file is also in the 
    <code class="cCode">examples</code> project, and in the 
    <code class="cCode">examples\SVG</code> directory. 

  </p>
  <a shape="rect" name="wp499749"> </a>
  <div style="color: #000000; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; margin-bottom: 0pt; margin-left: 18pt; margin-right: 0pt; margin-top: 6pt; text-align: left; text-decoration: none; text-indent: -18pt; text-transform: none">
	2.	Click 
    <b class="cBold">Preview XSLT Result</b> 
    <img src="images/PreviewXSLTResult.gif" height="21" width="24" border="0" hspace="0" vspace="0"/>
 . Stylus Studio automatically uses your installed SVG viewer to render the resulting XML and display the SVG.

  </div>
  <a shape="rect" name="wp501139"> </a>
  <p class="pBodyRelative">
If you do not have an SVG viewer installed, Stylus Studio displays the resulting XML.

  </p>
  <div style="float:right;margin-top:1em;" class="navHelp">
    <a class="navHelp" href="d_xslt10.html">&lt;
			Previous
    </a>|
		
    <a class="navHelp" href="d_xslt12.html">Next
			&gt;
    </a>
  </div>
</asp:content>