{"id":3454,"date":"2009-10-06T12:32:00","date_gmt":"2009-10-06T12:32:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/webdev\/2009\/10\/06\/working-with-svg-files-in-visual-studio-and-visual-web-developer\/"},"modified":"2009-10-06T12:32:00","modified_gmt":"2009-10-06T12:32:00","slug":"working-with-svg-files-in-visual-studio-and-visual-web-developer","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/working-with-svg-files-in-visual-studio-and-visual-web-developer\/","title":{"rendered":"Working with SVG files in Visual Studio and Visual Web Developer"},"content":{"rendered":"

Scalable Vector Graphics<\/A> (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<\/A> (although support was discontinued this year) as well as few pulg-ins listed in Wikipedia article on SVG<\/A>. <\/P>\n

SVG element is part of upcoming HTML 5<\/A> standard which allows inline SVG<\/A> 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:<\/P>\n

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

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<\/A>. For your convenience we converted modular DTD to a single XSD file using handy Dtd2Xs<\/A> converter from Syntext<\/A> and then manually edited it to fix a few minor issues. SVG schema is attached to this post – see below or click here<\/A> to download the file.<\/P>\n

In order to enable SVG intellisense in VS and VWD follow these steps:<\/P>\n

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

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

      \n
    1. Add new HTML file (say, svg-test.htm<\/STRONG>) in the root folder and add<\/LI><\/OL>\n
      \n

      <<\/FONT>object<\/FONT><\/FONT><\/FONT> <\/FONT><\/FONT>data<\/FONT><\/FONT><\/FONT>=”svg-test.svg”<\/FONT><\/FONT><\/FONT> <\/FONT><\/FONT>type<\/FONT><\/FONT><\/FONT>=”image\/svg+xml”<\/FONT><\/FONT><\/FONT> <\/FONT><\/FONT>width<\/FONT><\/FONT><\/FONT>=”500″<\/FONT><\/FONT><\/FONT> <\/FONT><\/FONT>height<\/FONT><\/FONT><\/FONT>=”500″<\/FONT><\/FONT><\/FONT> <\/FONT><\/FONT>\/><\/FONT><\/FONT><\/FONT><\/FONT> <\/P><\/BLOCKQUOTE>\n

      \n

      to the <body> element. You can also use existing HTML or ASPX page.<\/P><\/BLOCKQUOTE>\n

        \n
      1. Right-click on the svg-test.htm file in Solution Explorer and choose Browse With….<\/EM> <\/LI>\n
      2. Pick SVG-enabled browser and click OK. You should see SVG content rendered like<\/LI><\/OL>\n

        <\/P>\n

        Now try typing <<\/STRONG> in the SVG file. XML editor should now provide you wil intellisense for SVG elements and atributes:<\/P>\n

         <\/P>\n

        <\/P>\n

        Similar steps should work in VS 2010 as well. Enjoy!<\/P>\n

        — Mikhail Arkhipov<\/P>\n

          
        <\/P><\/FONT><\/FONT><\/FONT><\/p>\n

        svg.xsd<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

        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 […]<\/p>\n","protected":false},"author":404,"featured_media":58792,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[197],"tags":[7261,7276,7272,147,7302,7316,7323,7319,7292],"class_list":["post-3454","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aspnet","tag-css-and-html","tag-intellisense","tag-tips-and-tricks","tag-visual-studio","tag-visual-studio-2008","tag-visual-studio-2008-sp1","tag-visual-studio-2010","tag-visual-web-developer","tag-vs2008"],"acf":[],"blog_post_summary":"

        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 […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/3454","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/users\/404"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/comments?post=3454"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/3454\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media\/58792"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media?parent=3454"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/categories?post=3454"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/tags?post=3454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}