Рабочий процесс Illustrator/SVG to JavaScript? (Библиотека шаблонов?)

Question

Когда "Сохранение как SVG" в Illustrator, это типичный результат:

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

Я хотел бы знать, есть ли какая-либо библиотека шаблонов JavaScript (например, усы, руль и т. Д.), Которая позволила бы мне использовать SVG аналогично HTML?
Это позволило бы мне сохранить кучу шаблонов элементов SVG и динамически устанавливать их атрибуты стиля и контент...

Answer 1

Согласно https://groups.google.com/forum/ вы можете использовать шаблоны подчеркивания.

На форуме также обсуждается альтернатива:

1. создать svg "defs"
2. вставить объект SVG с помощью "использования"
3. изменить его с помощью d3.js
4. сделать это видимым

Answer 2

Я не уверен, отвечает ли это на ваш вопрос, поскольку неясно, что вы подразумеваете под "[использованием] SVG аналогично HTML", но есть библиотека JavaScript под названием Raphaël, которая позволяет вам манипулировать графикой SVG таким образом, что похоже на использование jQuery для манипулирования HTML-страницами. Это означает, что вы можете анимировать изображения, прикреплять обработчики событий, изменять цвета или формы в реальном времени на странице. (Бонус в том, что Raphaël использует VML для Internet Explorer без поддержки SVG.) Другой способ - использовать плагин jQuery SVG или некоторые другие библиотеки.

Конечно, SVG - это просто XML, который является текстовым форматом, поэтому любой шаблонизатор должен с ним работать, но разница в использовании Raphaël, jQuery SVG и т. Д. Заключается в том, что они не манипулируют исходным текстом базового формата XML, а в результате Дерево DOM, которое не только означает, что вы можете видеть результаты в реальном времени, пока вы изменяете дерево, но также и то, что гораздо труднее создавать недействительные документы, что довольно часто, если вы манипулируете исходным кодом XML с помощью шаблонизаторов, которые обычно не понимают XML но вместо этого относитесь к нему как к любому тексту.

Я рекомендую прочитать Illustrator для Raphael JS: A Guide и увидеть оба плагина Raphaël SVG Import и Raphaël SVG Import Classic на GitHub.