TTfile
SVG File

2010-06-07

SVG File

Scalable Vector Graphics (SVG) is a family of specifications of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic (i.e. interactive or animated).

What is SVG file?

The SVG specification is an open standard that has been under development by the World Wide Web Consortium (W3C) since 1999.

SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted and, if required, compressed. Since they are XML files, SVG images can be created and edited with any text editor, but specialized SVG-based drawing programs are also available.

SVG drawings can be dynamic and interactive. Time-based modifications to the elements can be described in SMIL, or can be programmed in a scripting language (e.g., ECMAScript or JavaScript). SVG images, being XML, contain many repeated fragments of text and are thus particularly suited to compression by gzip, though other compression methods may be used effectively. Once an SVG image has been compressed by gzip it may be referred to as an "SVGZ" image, with the corresponding filename extension. The resulting file may be as small as 20% of the original size.

How to create SVG files?

The Document Object Model (DOM) is an API for XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated. This page shows how to create an SVG document using the DOM API.

Getting Started

The DOM API defines an interface called DOMImplementation, which represents the bootstrap of any DOM implementation. The role of this class is to bootstrap a particular implementation of the DOM by providing a method to create a Document. Then, the concrete Document represents an XML document and also acts like a factory for the various DOM objects such as Element, Attr and Text.

How to get an instance of the DOMImplementation interface depends on the DOM implementation you are using. In Batik, the DOM implementation is located in the package org.apache.batik.dom.svg and the class is named SVGDOMImplementation. The following example shows how to get a concrete DOMImplementation object.

Once you have an instance of a DOMImplementation, you are not relying on Batik-specific code any more and ready to use the DOM API.

Creating a Document

Using the DOMImplementation, you are now able to create a Document. The following example illustrates how to create an SVG document. Note that the Batik’s DOM implementation can be used to represent either an SVG document fragment or any kind of XML document. Note that by choosing the namespace URI and the local name of the root element of SVG, you are creating an SVG document.

As you have created an SVG Document, we can cast this document to an SVGDocument (defined in the org.w3c.dom.svg package) if needed.

Building an SVG Document

Finally, using the Document object, you are now able to construct SVG content. Note that the document created before supports both generic XML and SVG. Though the DOM implementation of Batik is an SVG DOM implementation, the SVG-specific methods that rely on the document having been rendered (particularly geometry related methods, such as SVGLocatable.getBBox) cannot be used at this point.

The document can be built using DOM Level 2 Core methods. The following example shows how to create a red rectangle located at (10, 20), with a size of (100, 50) placed in a (400, 450) SVG canvas:

The example given constructs a document equivalent to parsing the following SVG file:

Creating a Document from an SVG File

With Batik, you can also create an SVG DOM tree from a URI, an InputStream, or a Reader, using the SAXSVGDocumentFactory. The following example illustrates how to create an SVG document from a URI using the SAXSVGDocumentFactory class.

As you have created an SVG Document, you can cast this document to an SVGDocument (defined in the org.w3c.dom.svg package) if needed.

Rendering an SVG Document

Batik provides several ways to use an SVG DOM tree. Two modules can be immediately used to render your SVG document.

JSVGCanvas

The JSVGCanvas is a Swing component that can display SVG document. A SVG document can be specified using a URI or an SVG DOM tree (using the setSVGDocument method). For futher information about the JSVGCanvas, see the Swing components module documentation.

ImageTranscoder

The ImageTranscoder is a transcoder that can take a URI, an InputStream or an SVG DOM tree and produces a raster image (such JPEG, PNG or TIFF). By creating a TranscoderInput object with the SVG DOM tree, you will be able to transform your SVG content to a raster image. For futher information, see the transcoder module documentation.

How to convert SVG to XAML and use it in Silverlight or WPF applications?

How to convert SVG vector files to XAML so that you can use them for your Silverlight or WPF (Windows Presentation Foundation) applications? Furthermore, how to edit SVG files in Expression Design and use them in Expression Blend? The instructions below will show you all these.

SVG (Scalable Vector Graphics) files are graphical vector files that are quite popular on internet. Wikipedia, for example, uses SVG for most of its schemes, charts, maps and graphical elements like that.

Expression Design – Microsoft’s vector drawing tool currently does not support import for SVG files. But, fortunately, there is a good workaround. This guide will show you how you can convert SVG files to XAML. Of course, XAML then can be used in Expression Design or Expression Blend and, therefore, in your WPF or Silverlight applications.

Step 1

Get the InkScape vector drawing tool. InkScape is Open Source tool with support for reading and editing SVG files.

Step 2

Start InkScape. Go to File then Open…. Find your SVG file and click on Open.

Step 3

Your selected file will open in InkScape and you can see it on artboard.

Step 4

Go to File and click on Save As…. Dialog shows and there you can select new file name. But now it is important to save your file in PDF (via Cairo) file format. So, pick that file format and then click on Save.

Step 5

New dialog opens asking you about more PDF details. Just accept the defaults but pay attention that there is a check-mark near option Convert text to paths.

Step 6

Now you have your SVG file saved as PDF. PDF is also type of vector format. Find your newly created PDF file and change its extension from PDF to AI (Adobe Illustrator file). You can do that by right-clicking on our file and in drop down menu go for Rename. Change .pdf with .ai and you are almost ready to go.

Step 7

With your AI file ready you can now start Expression Design. Go to File then New Document. In dialog that shows you can pick preset you want. Click on OK button.

Step 8

Now, you can go and import your previously created AI file into Expression Design. Go to File then Import. New dialog shows and there you can select your AI file. When you are done, click on Open.

Step 9

There you go. You now have your file in Expression Design ready to be modified or just exported into XAML file for you WPF or Silverlight apps.

Step 10

Take a look at Layers pane in Expression Design. You can notice that each and every element has been broken into paths and that you can select them one by one and change their properties.

You are not going to that now – you will just go on and see how you can use this imported image in WPF or Silverlight.

Step 11

First, select all objects you want to export. You can go and press CTRL+A to select all paths and elements. Once again, go to File but now pick Export command. New dialog shows.

Under Export Properties section you can see Format drop down list. There you can pick desired export format. For example, you can go and pick XAML Silverlight Canvas.

Under Text section mark the Paths option so that any text element can be converted to paths.

Enter the name in File name and pick the location for your file with Browse… button.

When you are done, click on Export All.

Step 12

You have come a long way from SVG to PDF/AI and now to XAML file. Now, when it is saved as XAML, you can start Expression Blend and use that XAML file.

Step 13

Create a new project in Blend and then right click on project file in Project pane. Click on Add Existing Item….

Step 14

From dialog, pick your XAML file – in this case it is zune_logo.xaml and click on Open.

Step 15

You can now see that zune_logo.xaml is part of your project. Double click on it to open it.

Step 16

Now, with zune_logo.xaml added to your project, you can use functions like Copy and Paste and add it to your interface. Also note that all original SVG formating is in place and that you can actually select elements and change their properties even trough Expression Blend.

So, just to sum up. First you need to find SVG file, open it in InkScape and save it as PDF file. Then you change it’s extension from PDF to AI. Now, open new document in Expression Design and import your AI file. Select elements you want to export to XAML and go to File then Export. Set name, location and file format (Silverlight XAML…). And now you can start Expression Blend and add newly created XAML file to your project.

Go on and start converting SVG files to XAML files and have fun!

How to Open SVG Files?

The SVG format is an open standard file format developed under the W3C (World Wide Web Consortium), with Adobe playing a major role. SVG images can be created and exported from Adobe Creative Suite programs, such as Illustrator and GoLive. The following programs can help you ope SVG files on different operating systems.