Working with SVG files in Visual Studio and Visual Web Developer

Web Development Tools Microsoft

Scalable Vector Graphics (SVG) is W3C standard language for describing two-dimensional vector and mixed vector/raster graphics in XML. Firefox 3+, Opera 9+ and Safari 3+ support SVG rendering. Unfortunately, Internet Explorer 8 does not support SVG natively and requires a plug-in. There a plug in from Adobe (although support was discontinued this year) as well as few pulg-ins listed in Wikipedia article on SVG.

SVG element is part of upcoming HTML 5 standard which allows inline SVG in HTML documents. Inline SVG is not yet fully supported in modern browsers so you probably still want to use <object> element for now. For example:

<html>
<
head>
<title>SVG test</title>
</
head>
<
body>
<
object data=”svg-test.svg” type=”image/svg+xml” width=”500″ height=”500″ />
</
body>
</
html>

Now you need to author SVG file. SVG is XML and fortunately, Visual Studio and Visual Web Developer come with XML editor that provides intellisense and validation provided you have appropriate XML schema. Although XML editor supports both DTD and XSD validation we decided to use XSD schema. W3C site provides only modularized DTD schema for SVG. For your convenience we converted modular DTD to a single XSD file using handy Dtd2Xs converter from Syntext and then manually edited it to fix a few minor issues. SVG schema is attached to this post – see below or click here to download the file.

In order to enable SVG intellisense in VS and VWD follow these steps:

  1. Create Schemas folder in your Web site or Web Application project root.
  2. Place downloaded SVG.XSD in the Schemas folder.
  3. Create a new XML file and save it with SVG extension, such as svg-test.svg.
  4. Add basic SVG content and save the file, for example

<?xml version=1.0 encoding=utf-8?>
<
svg xmlns=http://www.w3.org/2000/svg width=500 height=500 version=1.1>
    <
rect x=100 y=100 width=300 height=300 />
</
svg>

  1. Add new HTML file (say, svg-test.htm) in the root folder and add

<object data=”svg-test.svg” type=”image/svg+xml” width=”500″ height=”500″ /> 

to the <body> element. You can also use existing HTML or ASPX page.

  1. Right-click on the svg-test.htm file in Solution Explorer and choose Browse With….
  2. Pick SVG-enabled browser and click OK. You should see SVG content rendered like

Now try typing < in the SVG file. XML editor should now provide you wil intellisense for SVG elements and atributes:

 

Similar steps should work in VS 2010 as well. Enjoy!

— Mikhail Arkhipov

  

svg.xsd

0 comments

Discussion is closed.

Feedback usabilla icon