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" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/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;"
     xml:space="preserve">
<g id="symbol1" ... >
   <path ... />
   <path ... />
   <path ... />
</g>
</svg>

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 ...

回答1:

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.

回答2:

According to https://groups.google.com/forum/#!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

来源：https://stackoverflow.com/questions/7835693/illustrator-svg-to-javascript-workflow-a-templating-library