SVG and ASP.net

If you're having trouble finding examples in ASP then maybe you could try something in XSLT. Then you'd have to get your query results as XML and transform them. It's less direct than just querying then outputting SVG, but you get the advantage of having many examples to start from.

Another alternative would be translating from other server side languages (like PHP or Python) to ASP.

What kinds of output do you currently do for Excel?

I can't speak for XSLT exactly, but for what I did on the Web Stats thing on my site, I took each datapoint (which was a y-point) and converted that into a two-coordinate point on a SVG path element using some JavaScript (you can see my code for that).

To make it into a series of stacked area graphs took a little more effort (basically accumulating higher series y-data points on top of others). I had to be careful to render the series in reverse order (i.e. the tallest series rendered first, then the next tallest series on top, etc). See the SVG painting model for a little more information on this.

If you're really interested, I recommend using Firefox 1.5 with either the DOM inspector or the Firebug extension. Then read the JavaScript alongside looking at the SVG path elements (click on each path element in the DOM inspector to see its "d" attribute).

Good luck, feel free to ask more questions...

My Blog

Hello !!!

SVG is an established yet emerging W3C standard for scalable vector graphics. It's an implementation of XML, a grammar for style-able graphics, and a no-nonsense, plain text vector format. Equipped with UTF-8 multilingual coding, scripting, and animation support, SVG holds huge potential for engineering, geographic mapping, drawing and animation, GPS information systems, and charting solutions.

This article explains step-by-step the server-side manipulation of SVG using Microsoft ASP.NET and C#. The example server-side application demonstrates how simple and complex maps can easily be represented using SVGs. This writing includes explanations of all source code and will show how SVG can be updated on the fly from a database. There is a complete case study and implementation with code. SVG mobile profiles are also briefly discussed. This article assumes you have an understanding of XML and server-side programming.

Today, displaying maps, either on the desktop or handheld devices, involves using static gifs or other raster formats. These formats lack the capability of real-time updates and interactivity. Using SVG makes maps smarter and simpler so they can reflect changes concurrently and enhance the user experience. Users can actually toggle the un-wanted material, for instance a particular landscape, water, rail or trees, from the display and concentrate on specific freeway directions. With live server updates, an SVG map can be a important asset, detailing on-the-fly travel changes, not just as text, but in the form of a picture, worthy of thousand words!

A quick refresher course: what is a vector in SVG, and why is it special? There are two types of graphics in principle, raster and vector. The difference between a bit-mapped (raster) versus vector graphic is in representation. Bit-map, as the name suggests, stores the information about each and every pixel. Major disadvantages of this approach are pixilation on resolution change and gigantic file sizes. When using complex compression algorithms, for instance, jpg, the chances of seeing bit-mapped images on devices with low CPU power and memory restrictions like cell phones are unlikely. Similarly when changing resolutions, altering dpi or zooming in, images gets pixilated (blurred, broken, chunky).

On the contrary vector images are created from a set of geometric instructions, so they can be resized and still keep the sharp edges. This is why SVG images can be resized without any loss in image quality. Unlike bit-map images, SVG graphics are not created using coloured pixel positions. In contrast to raster images, SVG is scaleable, i.e. when an SVG image is resized, the image actually is redrawn to the new proportion according to the new transformation. Postscript documents, Windows meta files and Corel draw are typical examples of vector image formats. An interesting paper comparing SVG and Flash formats exists in greater detail at http://www.carto.net/papers/svg/comparison_flash_svg.html and file format comparisons of SVG, Flash and CAD images can be seen at http://www.square1.nl/TGC-SITE/vector/vector-gallery.htm.

On 5 September 2001, Scalable Vector Graphics (SVG) 1.0 became a W3C Recommendation: (see http://www.w3.org/Graphics/SVG/Overview.htm8). SVG, as described by the W3C, is an XML-based protocol useful for displaying 2D vector graphics. This includes shapes, graphics, and text, allowing a number of effects, such as styling, clipping, filtering, alpha masks, etc.

An SVG image is, essentially, an XML-formatted text file. An SVG image viewing program, or plug-in, can translate this XML grammar into a graphical image. There is no built-in support in Web browsers for SVG files; therefore, in order to view an SVG image, you need to install an SVG image viewer plug-in. Several plug-ins are available, such as the Adobe SVG Viewer which is available at http://www.adobe.com/svg. Once this plug-in is installed, one can view SVG graphics, locally or remotely. Since SVG graphics are constructed from text, it is possible to easily generate these graphics on the fly using any server-side scripting model like ASP, Perl or JSP. This offers great possibilities for flexible graphical applications on the Web and desktop. Some of the possibilities will be explored in this article with code fragments and explanation.

Comparing a Flash file format (.swf) to SVG is also a common practice. Besides several similarities, there are fundamental differences too. The first and foremost difference is that SVG is an official W3C standard while SWF is not, one promoting open development and vice versa. SVG is an implementation of XML, while SWF provides functionality to manipulate DOM; it is not an XML grammar. A detailed comparison matrix can be found in the notes section of this article. SVG implicitly supports indexing because similar to other W3C standards, SVG is created using plain text. SVG text is fully searchable so the images generated by SVG can be indexed by search engines. SVG is an application of XML, period. It exploits the flexibility and power of XML and related technologies. Developers can utilize the potential of CSS, namespaces, XLink, XSLT, SMIL and DOM in SVG as an XML grammar. In this article, I'll be emphasising the server-side manipulation of SVG, specifically in maps. The "further readings" section is well equipped with loads of links that will surely help with other areas.

_______________________________________
Submit by : Descargar Libros