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>
That would allow me to save a bunch of SVG element templates and set their style attributes and content dynamically …
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 https://groups.google.com/forum/#!topic/d3-js/qVZ7hacBGrE you can use underscore templates.
The forum also discusses an alternative:
- create an svg “defs”
- insert svg object with “use”
- modify it using d3.js
- make it visible