WOLFRAM

Wolfram Language & System » Documentation Center »
Wolfram Language
WEBMATHEMATICA TUTORIAL

SVG

SVG is a language for describing two-dimensional graphics in XML. Like MathML it is an official recommendation of the W3C, http://www.w3.org/Graphics/SVG/. It provides a number of benefits for users of webMathematica. First, since it is a vector-based format the results often have a higher quality than is typically the case with image formats. This is very much the case when considering print output. Secondly, for many types of image, the actual file size is often quite small especially compared with image formats. Thirdly, it supports a number of dynamic and interactive features. Mathematica can generate SVG from graphics and this section will give some examples of web usage involving SVG. One thing to be noted is that any examples will require that your browser supports SVG. Ways to do this include the use of the Amaya browser, http://www.w3.org/Amaya/, which provides native support, or the Adobe plug-in, http://www.adobe.com/svg.

A utility package is provided with webMathematica that supports adding the necessary tags to hook into the Adobe plug-in. This section will give some simple examples of the use of this package with webMathematica.

Plotting with SVG

The source for this example is in webMathematica/Examples/SVG/Plot.jsp. It is closely related to the basic example, Plot.jsp. If you installed webMathematica as described above, you should be able to connect to this JSP via http://localhost:8080/webMathematica/Examples/SVG/Plot.jsp. (You may have some other URL for accessing your server.)

An extract of the source follows.

<form action="Plot.jsp" method="post">
Enter a function: 
<input type="text" name="fun"   size="24" value="<msp:evaluate>MSPValue[ $$fun,  "Sin[x]^2"]</msp:evaluate>"/> <br/>
Enter a number: 
<input type="text" name="x1"   size="24" value="<msp:evaluate>MSPValue[ $$x1,  "10"]</msp:evaluate>"/> <br/>
<input type="image" name="button" src="../../Resources/Images/Buttons/evaluate.gif"/> 
</form>
</div>

<div class="section">

<msp:evaluate>
  Needs["MSP`SVG`"]
</msp:evaluate>

<msp:evaluate> 
  MSPBlock[{$$fun, $$x1},
    SVGShow[Plot[$$fun, {x, 0, $$x1}]]
  ] 
</msp:evaluate>

This is very similar to the basic example Plot.jsp. The differences between the two are the loading of the SVG support package and the use of the SVG plotting function SVGShow. If this works correctly, you may wish to use some of the features that the Adobe plug-in provides.

SVG Animations

SVG supports a number of animation and interaction features. This example will demonstrate the use of SVG animations.

The source for this example is in webMathematica/Examples/SVG/NDSolvePlot.jsp. If you installed webMathematica as described above, you should be able to connect to this JSP via http://localhost:8080/webMathematica/Examples/SVG/NDSolvePlot.jsp. (You may have some other URL for accessing your server.)

The source contains an HTML form that sets up a number of input fields to collect the equation, starting and ending points, as well as initial conditions. These are then fed to a function that solves the differential equation and returns a plot of the result formatted as SVG. The SVG is then displayed with the function SVGDisplay, which is defined in the package MSP`SVG`. The code, which inserts the plot, is shown below.

<msp:evaluate>
    MSPBlock[ {$$eqn, $$t0, $$init1, $$init2, $$t1},
        svg = NDSolveToSVG[ $$eqn, {$$init1, $$init2}, {$$t0,$$t1}] ;
        SVGDisplay[ svg, {400, 300}]]
</msp:evaluate>

The actual definition of the function that creates the SVG is shown below. This solves the differential equation and generates a plot of the result. It then generates Symbolic XML, which represents the SVG of the result, using the function XML`SVG`GraphicsToSymbolicSVG. Next, it finds the points that represent the plot of the result and uses these to form an SVG animation of a red ball, which moves along these points. This animation is inserted into the SVG to form a new result, which is returned to be plotted.

NDSolveToSVG[ eqn_, init_, lims_List]:=
    Module[ {sol, dep, t, int, t0, t1},
        {o,dep,t} = EquationToVariables[ eqn] ;
        {t0, t1} = lims ;
        sol=NDSolve[Append[init,eqn],dep,{t,t0,t1}];
        {int0, int1} = Part[dep /. First[ sol],1,1];
        If[ t0 < int0, t0 = int0];
        If[ t1 > int1, t1 = int1];
        p=ParametricPlot[ {dep[t],dep'[t]} /. sol,{t,t0,t1}, ImageSize -> 400];
        xml = XML`SVG`GraphicsToSymbolicSVG[p];
        pts="M"<>
                First[Cases[ xml,
                        XMLElement["polyline",{"fill" -> _,"points" -> x_},_]->x, Infinity]];
        newElem=XMLElement["circle",
                {"cx"->"0","cy"->"0","r"->".1","fill"->"red", "stroke"->"blue",
                      "stroke-width"->"0.01"},
                 {XMLElement[
                    "animateMotion",{"dur"->"6s","repeatCount"->"indefinite",
                      "rotate"->"auto", "path" -> pts},{}]}];
        newXML=xml/.x:XMLElement["polyline",___] -> Sequence[x,newElem] ;
        ExportString[newXML,"XML"] 
    ]

There are a number of other ways of obtaining interactive results with SVG. For example, JavaScript can interact with and manipulate the SVG tree, thereby supporting interactive features such as popups when the mouse is moved over a graphic.

Send Feedback