We've expanded our XML news coverage and improved our search! Search for all things XML across O'Reilly!

SVG: Where Are We Now?

On September 4th 2001, the W3C published the Scalable Vector Graphics 1.0 specification. For some people, including a large number of early adopters who followed the specification's evolution since the early drafts, SVG 1.0 was a long time coming -- it had been two and half years since the first public draft of February 1999. However, SVG was a much needed leap forward for web graphics. If you look at the specification, you'll notice it is exhaustive (600+ pages), detailed, and complex (in places, filters and animation, for example).

SVG's long gestation resulted in a specification that had some solid and diverse support from the moment it was released. This article aims at providing an overview of available SVG tools, including highlights of what's cooking in the short term in the SVG world. This article focuses on the most interesting, advanced, and tested active projects.

How can I view SVG Today?

Probably the first thing you'll want to know about SVG is how you or anyone else can view SVG contents. Today, there are two main kinds of SVG viewing tool: standalone SVG viewers and SVG-enabled browsers.

Viewers

The most advanced and widely-deployed SVG implementation today is the Adobe SVG Viewer. Adobe has put a lot of effort into SVG, ranging from co-writing the specification to providing SVG tools to the community from the early days. Currently in version 3, the plug-in is available on Windows and Macintosh platforms and works in all major browsers. The new version supports almost all of the SVG specification and includes advanced SVG DOM support, great scripting capabilities with the inclusion of an ECMAScript engine, and complete animation support.

Adobe also included a Real Player plug-in, allowing SVG content to be displayed alongside multimedia content, and it's worth noticing that RealONE's SMIL 2.0 support and Adobe's Viewer SVG support allow for some quite advanced compositions (e.g., semi-transparent SVG shapes over a video clip). This new version also comes with a Microsoft binary behavior enabling SVG inline content in Microsoft Internet Explorer version 5 and above. Performance-wise, it is comparable to the Macromedia Flash Player for animations and interactivity.

The other main standalone SVG viewer available is the Java-based and open source Batik project. Part of the Apache XML project, Batik 1.1 supports all static features of the SVG 1.0 specification and is committed to adding support for the dynamic features of SVG in the near future. Batik is actually more than a viewer: it really is a toolkit, providing an SVG-to-raster converter, server-side generation through DOM and APIs, a font converter, and a pretty printer. Because of those very features, it is very convenient to use Batik in a Java-based web publication framework. Batik is available on any Java platform and has been incorporated most noticeably in Apache FOP and ILOG JViews.

Browsers

Since SVG is XML, you might well be after a browser that will support SVG natively and inline with namespaces. If this is the case, then you are in luck, since three open source implementations are around. First off, Alex Fritze has been working on adding SVG support to Mozilla. This special build (not yet part of the Mozilla tree) is built on top of existing Mozilla XML, CSS, and DOM capabilities, and the project has been progressing at a rather fast pace. Today, the SVG-enabled Mozilla supports a good deal of the SVG specification, allows for a useful scripting facility, and is available for Windows, Macintosh, and Linux. Alex is working towards supporting a larger part of the specification -- hopefully this SVG support will be included in the Mozilla codebase by version 1.0.

W3C's Amaya offers an interesting subset implementation of SVG as part of its XML support (XHTML, MathML, RDF, and so on). While current SVG support may seem a little lightweight as is, Amaya is not just a browser, as its other main design goal is to provide an authoring tool that complies with and provides proof-of-concept for W3C standards. Using Amaya you can edit multi-XML-namespaced documents in a WYSIWYG manner. In fact, Amaya is the only tool out there that allows for SVG content generation as part of an XML document, WYSIWYG-style. Amaya is likely to extend their SVG support to full specification support shortly and then follow next-generation SVG advances.

Another effort to include native SVG support in a browser is the X-Smiles project. A Java open source project, X-Smiles started off as a glue between several XML standalone applications (CSIRO SVG Viewer, Apache FOP, Xerces, Xalan) and is gradually growing to include implementations of additional XML functionality (XForms and SMIL).

While right now a standalone application like the Adobe SVG Viewer is most advanced in both specification compliance and user penetration, there seems to be a logical trend towards integrating SVG where it truly belongs. Having SVG implemented deep down in an XML browser is the way forward to achieving one of the goals of XML: document interoperability.

How Can I Create SVG Today?

Now that you have an overview of how to view SVG documents, you might want to create some. There are two main ways to do so: hand-coding or using an SVG-enabled graphics package. Both have their advantages and disadvantages.

SVG-enabled editors

Hand-coding SVG is not as crazy as it sounds. The SVG specification is readable, especially if you are XML-aware. Obviously the filters chapter is a little difficult, but editing a simple SVG graphic with gradients, opacity effects, and the like is pretty straightforward. Hand-coding SVG has its advantages in that you can have a very neat control of your graphic's structure. While any text editor will do the trick for editing SVG, the popular XML-Spy 4.1 package offers excellent native support for SVG. Its syntax highlighting is very clear, elements and attributes completion is very handy, and XML-Spy also offers validation of SVG content against the SVG DTD (or a schema, when it becomes available). Another neat feature is that you can create SVG from any XML file with an XSLT transformation and display the result in browser view right in the editor. Popular editors like TextPad and vim offer SVG syntax highlighting. Adobe also offers SVG support in their GoLive product, which can be advantageous if you are already using this tool.

SVG-enabled graphics packages

One exciting feature of SVG is that it finally allows design artists to deliver rich graphics content on the Web (and in a language that also manages to suit programmers). As one cannot expect graphic designers to read through the SVG specification and start hacking around SVG by hand, most big names of the graphics industry are offering SVG support in their products, some even placing SVG at the very core.

Historically, Corel was probably the first large vendor to support SVG, offering an export plug-in to its Draw! program. They have since sustained these efforts, up to current version 10 which also supports partial import of SVG documents.

Jasc has also been following SVG developments closely. Its WebDraw product (formerly Trajectory Pro), now in Preview Release 5, has been built around SVG and uses it as its sole native format. WebDraw is close to the classic Illustrator-like vector graphics package, except it offers a three-view interface. The first is the WYSIWYG view where you can directly draw graphics objects with the drawing toolbar, change their properties, import raster images etc. This view does not yet support any way to add DOM scripting functionalities and has rather limited support for animation but robust support for static SVG features. The second view is a text-editor view, with nice syntax highlighting, where you can edit changes by hand if you wish. It is extremely useful when adding DOM scripting to your SVG graphics as well as animation elements. The third view is the browser view (usually using Adobe's SVG Viewer) where the content you have been editing in the first two views is rendered as a final document and where scripting and animations are applied. The true beauty of it is that all three views are synchronized at all times, allowing transparent editing and viewing in hand-coding and WYSIWYG modes. The 1.0 release of WebDraw should offer complete support for the SVG specification, including filters and animation. Preview releases have been available for free public testing on Jasc's site.

As with its viewer, Adobe is supporting SVG throughout its graphics product line. The first outcome of this commitment was the Illustrator 8 SVG export plug-in. Until now Illustrator has always been the major Adobe SVG-enabled tool, quite naturally since it was the best place to match SVG's static features. Illustrator 10 is a very advanced SVG tool. Illustrator supports SVG as a native format, seamlessly reading and writing SVG and SVGZ (gzipped SVG), symbols functionality saving to SVG <symbol> and <use> output, an interactivity panel to add event listeners and corresponding actions to objects, and most impressively the application of filters as native SVG filters. In fact, one can even import a custom filter from an external SVG file and apply it to an Illustrator document straight away. There is one drawback in Illustrator 10; it does not know anything about basic shapes: rectangles, circles, polygons are exported as SVG <path> elements, losing an interesting part of the semantics of an SVG document. Adobe also recently released version 2.0 of its InDesign product, a Quark XPress competitor, which seems to offer extensive SVG and XML capabilities both in import and export, probably worth checking out. We can also look forward to the birth of LiveMotion 2.0, Adobe's vector animation tool soon. The new version promises to offer support for SVG's dynamic features equivalent to Illustrator's support of static features.

It is also noting the existence of SVG export in popular software for the print (Quark XPress 5) and the 3D (Swift3D) industries.

While most of these products are Windows-only or Windows/MacOS-only, several SVG-related packages are available for Linux. Firstly, Amaya supports a subset of SVG in its WYSIWYG edition mode. In the vector graphics editing tool area, Sodipodi is an interesting project, using SVG as its native format. While Linux SVG-enabled products will no doubt increase in maturity over time, designers will have to concentrate on Windows and Mac these days for robust SVG use.

Conclusion

I hope this overview of SVG tools currently available gives you a good idea of what tool you need and what you can expect of SVG in today's products. I think the state of SVG's support in the industry is astonishing since its still in its early stages. It is also interesting to take into account the speed at which progress has been and is still being made. At this pace, this article will need a complete overhaul in six months.

---

Got any news on other SVG tools to add the ones listed in this article? Share it with readers in our forum.
(* You must be a member of XML.com to use this feature.)
Comment on this Article

---

Titles Only

Titles Only

Newest First

• SVG Text Editor
  2007-06-15 09:34:16 BoxerSoftware [Reply]
  
  I just wanted to alert the forum members to the Boxer Text Editor, which includes built-in color syntax highlighting for SVG. It's a full-featured editor, and there should be many other features that will be of interest. The implementation of Perl Regular Expressions for Search/Replace is particularly powerful. The evaluation version is fully functional.

  
  http://www.boxersoftware.com

  
  http://www.boxersoftware.com (http://www.boxersoftware.com)

  
  
  Best,

  
  David Hamel
  Boxer Software
  
  
  

• SVG Charts (Agileblox Vs. Flash)
  2003-06-15 18:56:41 Kate Novac [Reply]
  
  Cost: Agileblox cost US$1,350 verses just US$99 for FusionCharts.

  
  Agileblox needs ASV3 (Adobe SVG Viewer 3.0). However, if you call Adobe for any help, they tell you that it is not a supported product. Also, they refuse to comment about any future plans for ASV, which led many to speculate that ASV would be discontinued. It is installed on about 7% of the computers. On the other hand FusionCharts needs Macromedia’s Flash-player, which is installed on well over 99% computers.

  
  If you try the products, you would notice FusionCharts are far simpler than Agileblox. Agileblox requires custom-installations and supports only limited server-platforms. FusionCharts doesn’t require any installation and runs on all web-server platforms. If you know how to create XML-files on your favorite platform, creating Charts using FusionCharts is a snap. To further simplify this task FusionCharts provide sample XML-files as templates. All you need to do is just update the data and style in the sample template. No complicated Java API to learn.

  
  Both support rich set of charts and features. However, FusionCharts has large installed base of customers, their valuable inputs help them to learn and improve the product. This led them to implement popular charts (Ex: Bar-and-line combo-chart etc.) and features (Ex: TrendLine, TrendZones etc.), which are not supported by Agileblox. It has been 18 months since the release of Agileblox 1.0 and still at version 1.0. It is yet to announce any plans for future upgrades. During the same period FusionCharts released many upgrades with many additional useful features based on feedbacks from large installed base of customers.

  
  P.S: Would Elansoft care to comment on the fraud-charges at: http://www.manero.org/weblog/archives/000083.html ?
  
  
  

  • SVG Chart (Elansoft Agileblox Vs. Flash)
    2004-02-05 23:42:32 Mike Hill [Reply]
    
    Elansoft care to answer the FRAUD charges at:
    http://www.manero.org/weblog/archives/000083.html

    
    The caption on the main page of the Elansoft’s web site supports using Flash based FusionCharts and makes strong case against using Agileblox. Thanks for the following caption!

    
    The Caption Reads: There is a need for components, which could use combined prowess of the existing technologies, to rendering the data dynamically on to the web, in independent across all Operating systems, programming platforms and rendering browsers.

    
    Does Agileblox 2.0 support web technologies such as, Xforms, X3D, SMIL, Flash, Webservices, HTML, DHTML, XST, XSLT etc.? Also, web technologies such as Flash and Applets support very powerful application features such as live Socket connection with the server, for real-time updates.

    
    The Agileblox uses only a subset of the SVG (Ex: it does not use latest powerful component features of the SVG, such as RCC) and does not run on any other viewers (Ex: BitFlash., Mozilla-nativeSVG, Corel or Batik). Does it? Does it have any clue about Web services?

    
    This caption says, look for a product that runs on all browsers and uses all the web technologies. We should wait until Agileblox runs on all the browsers and supports all the technologies. Elansoft should announce the release date for such Agileblox. It may be long wait, science SVG is installed on only 9% of the computers and according to Adobe even that viewer is not yet supported.

    
    Meanwhile better explore cheap alternatives such as Flash based FusionCharts, which runs on all Operating systems, programming platforms (Ex: J2EE, .NET/ASP & CGI etc.) and installed on over 99% of the browsers. Doesn’t it make sense?
    
    
    

  • SVG Chart (Elansoft's Agileblox and XAML)
    2003-10-30 19:27:12 Mike Bee [Reply]
    
    One major difference between SVG and Avalon/XAML is, SVG is interpreted while executables for the Avalon/XAML is compiled binary. SVG viewer interprets SVG documents; while, Avalon/XAML document must be compiled in advance to create an exe file to run.

    
    Avalon/XAML is next generation vector-graphics technology announced by Microsoft and Adobe committed to support this technology in their products. This is a setback for Elansoft’s Agileblox to leverage future Avalon infrastructure and boon for FusionCharts.

    
    Java-classes in Agileblox need run-time data in advance before generating SVG-chart or file. To create SVG-file for each chart, the Java classes use the run-time data at server to calculate various display-elements, such as size of bars in a bar-chart, or size of each slice of a pie-chart etc.

    
    On the other hand, FusionCharts use external XML-data at client to create the Flash-chart. The FusionCharts are akin to binary-exe files, and they won’t change for each different chart. Only file that changes between two different charts is the external XML-data file.

    
    The server sends client, both static binary-swf file and dynamic XML-data created at run time. At the client, the binary-swf file reads the data and creates Flash-chart. This fits perfectly with Microsoft’s Avalon framework. Avalon platform needs compiled Avalon-EXE; which could be programmed to read external XML-data.

    
    You could easily replace the binary-swf file with a compiled Avalon-EXE file. Since, XAML is super set of SWF and far more powerful, the FusionCharts could easily be translated from SWF files to XAML files and compile the XAML-files to create binary-EXE files. Also XAML won’t support some SVG-features, such as CSS and JavaScript etc.
    
    

• create path from existing paths
  2002-11-15 06:31:44 Alice Aksoy [Reply]
  
  I work on a cartographic application.
  I would like to generate new path from differents path existing in my svg.
  For example, if a have 3 paths elemnts , I want to create one witch is the union oh the others.
  is it possible to do this? and how?

  
  thank you
  
  
  

• SVG? What about NMZ?
  2002-07-30 07:55:02 Milton Chaves de Almeida [Reply]
  
  Hi all.

  
  Can't understand. We have a free, fantastic vector animation tool available over the net and it's an abandoned project!

  
  I guess you should be interested in getting to know the Scream Editor, a free vector animation program that makes animes that are MORE dynamic and MUCH, MUCH smaller that those made with M. Flash and any SVG tool! Get it here:

  
  http://www.deelong.com/Scream/

  
  Best Regards,

  
  
  
  
  

• SVG / ECMAScript case study
  2002-04-17 09:54:59 Henning Follmann [Reply]
  
  I just wrote a small SVG online game case study.
  Any comments wellcome!

  
  http://www.itcfollmann.com/lotto.html

  
  Henning
  
  

• Dia (free Visio replacement for Linux and Windows) supports SVG
  2002-01-08 23:30:47 era eriksson [Reply]
  
  Dia, a diagram editor for Linux and other platforms, uses a format which vaguely resembles SVG internally. It has export to SVG and some other interesting SVG features, including the ability to define new diagram plugins in a language which is a subset of SVG.

  
  I'm not familiar enough with SVG to judge whether changing Dia to use SVG as its own native format would be hard. I do believe this is being considered. (And it's open source, so you can try to add SVG support yourself if it's important to you. :-)

  
  For more information, see e.g. http://freshmeat.net/projects/dia/
  
  

• other SVG tools
  2001-12-11 03:56:45 steve white [Reply]
  
  Please consider including our SVG editors in your future articles.

  
  IMS Web Dwarf is a freeware HTML/SVG editor.
  IMS Web Spinner is our professional WYSIWYG HTML/SVG editor for the creation of Web content. Version 2 is now in late beta and should be released soon with extensive
  IMS Web Engine is our professional DHTML/SVG animation editor. Version 2 with support for motion paths, morphing and articulated joints will be released early in the new year.

  
  We will also be release several specialized tool editors in the very near future. These include a Table Editor that will create HTML style Tables in both HTML and SVG and a Navigation Bar editor that will create drop menus in both HTML and SVG.

  
  Our Web Site is also fully mirrored in SVG at:
  http://www.virtualmechanics.com/home.svg

  
  Thank you

  
  Steve White
  
  

• Antoine
  2001-12-02 17:10:35 Keith Childs [Reply]
  
  I have just started a University project to read Geospatial map data, cartesian coordinates x and y, from an ORACLE database onto a web page as SVG. Hopefully I can then read data attributes and requery the database using them. Do you have any knowledge of the best method to translate data from ORACLE to SVG. I believe I can retrieve data from ORACLE(8i) into XML format. If this is true how would I then transform to SVG - any help appreciated(a lot)!!

  
  Regards
  
  

  • Antoine
    2001-12-03 05:49:22 Antoine Quint [Reply]
    
    If you manage to get an XML output from your Oracle database, then I suggest you have a look at XSLT. However, you might need some tricky computations in order to convert your coordinates to SVG data, then you can consider using "standard" XSLT extensions EXSLT or generate SVG from your XML file using a programming language (like Perl). There is a nice Perl, XML and SVG article on XML.com, have a look. Hope this helps,

    
    Antoine
    
    

• Adobe SVG Viewer 3.0 betas for Linux and Solaris
  2001-12-02 05:53:16 Antoine Quint [Reply]
  
  Hey,

  
  Big news since the article got published: Adobe have just released a beta version of their SVG Viewer v3.0. It is a plug-in to Mozilla 0.9.1 and up, and installs fine as long as you have glibc 2.2 installed on your system. Grab it on Adobe's website at http://www.adobe.com/svg/viewer/install/old.html and don't forget to send bug reports to encourage Adobe in their UNIX developments.
  
  

• Kontour
  2001-11-27 20:08:26 Fawad Halim [Reply]
  
  Kontour, A part of the excellent KOffice suite for KDE has support for both saving and reading SVG files.