Illustrator/SVG to JavaScript workflow? (A templating library?)

When “Saving as SVG” in Illustrator, this is the typical result:

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "">
<svg version="1.1" id="Layer_1" xmlns="" xmlns:xlink="" x="0px" y="0px"
     width="841.89px" height="595.28px" viewBox="0 0 841.89 595.28" style="enable-background:new 0 0 841.89 595.28;"
<g id="symbol1" ... >
   <path ... />
   <path ... />
   <path ... />

I’d like to know if there’s any kind of JavaScript templating library (like mustache, handlebars etc.) that would allow me to use SVG in a similar fashion as HTML?
That would allow me to save a bunch of SVG element templates and set their style attributes and content dynamically …

  • Rotate an oval SVG object
  • illustrator map to imagemap automatically? or is there a better way?
  • Putting an .ai or .svg file on the web, without Flash
  • Javascript drag/drop - Illustrator style 'smart guides'
  • Long Shadow Effect in SVG for Web
  • Transitioning between shapes with javascript or d3.js
  • Rotate an oval SVG object
  • How to create Rectangle object required by add method of the artboards object in Illustrator CS5.1+?
  • Putting an .ai or .svg file on the web, without Flash
  • How to turn responsive design off when scripting an SVG export in Illustrator CC 17.1?
  • Save file in Illustrator with Javascript
  • Javascript drag/drop - Illustrator style 'smart guides'
  • 2 Solutions collect form web for “Illustrator/SVG to JavaScript workflow? (A templating library?)”

    I’m not sure if that answers your question since it’s not clear what do you mean by “[using] SVG in a similar fashion as HTML” but there is a JavaScript library called Raphaël that lets you manipulate SVG graphics in a way that is similar to using jQuery for manipulating HTML pages. This means that you can animate images, attach event handlers, change colors or shapes live on a page. (The bonus is that Raphaël uses VML for Internet Explorer without SVG support.) Another way is to use jQuery SVG plugin or some other libraries.

    Of course SVG is just XML which is a text format so any templating engine should work with it, but the difference of using Raphaël, jQuery SVG etc. is that they don’t manipulate the source text of the underlying XML format, but the resulting DOM tree which not only means that you can see the results live while you modify the tree but also that it’s much harder to create invalid documents which is quite common if you manipulate the XML source code with templating engines that don’t usually understand the XML but instead treat it like any text.

    I recommend reading Illustrator to Raphael JS: A Guide and see both Raphaël SVG Import plugin
    and Raphaël SVG Import Classic on GitHub.

    According to!topic/d3-js/qVZ7hacBGrE you can use underscore templates.

    The forum also discusses an alternative:

    1. create an svg “defs”
    2. insert svg object with “use”
    3. modify it using d3.js
    4. make it visible