Как и куда положить svg объект в JS, чтобы потом его где не попадя вставлять?

[Was-Ja]

Добрый день,

имею веб интервейс на JS, в котором используется около сотни svg картинок. Каждая весит всреднем 1кб (есть и 300 байт, есть и 5кб). Хочу все воткнуть в внутрь самой страницы, чтоб все вместе грузилось кучей (суммарно JS, html, cs и все картинки весят около 200кб, фреймворки удалось не пользовать).

В каждый конкретный момент на экране у меня не более 10 картинок, которые я планировал включать или размещать из JS.

Вижу два решения.

1. Написать эти все картинки со своим уникальным id в <div>, этому div сделать hide, а потом зачитать каждую картинку в JS переменные через document.all('svgNr99').innerHTML а потом втыкать их туда, где мне надо.

2. Еще вариант запарсить их как-то, чтобы можно было в JS в виде присвоений это сделать (но тут читаемость упадет).

Скажите, пожалуйста, а есть ли какой-то более красивый способ, чтобы и картинки не грузить и все вместе внутрь одной страницы засунуть, и, если нет, скажите, пожалуйста, то какой из мной написанных вариантов правильнее с точки зрения минимальности ресурсов и полной совместимости со всеми браузерами?

Спасибо!

И еще вопрос. Часто у меня есть 4-5 svg картинок одного размера, которые я планировал поместить в одно и то же место и хотел их переключать по всяким внешним евентам. Пока планировал присвоением в innerHTML делать, но может есть какой-то правильный селектор, посоветуйте, пожалуйста!

Спасибо!

[laimas]

JSON, а затем выбирайте из него либо по индексу в случае массива, либо по связям в случае объекта.

[Was-Ja]

Спасибо большое, laimas,

да, похоже это и читаемость сохранится, и удобно пользовать будет.

[voraa]

и полной совместимости со всеми браузерами?

Хороший вопрос. ИЕ8- тоже берем?

[voraa]

Часто у меня есть 4-5 svg картинок одного размера, которые я планировал поместить в одно и то же место и хотел их переключать по всяким внешним евентам. Пока планировал присвоением в innerHTML делать, но может есть какой-то правильный селектор, посоветуйте, пожалуйста!

Не совсем понятен вопрос.
Элементы SVG, когда они вставленны в DOM ведут себя как обычные элементы
document.getElementById('elem') вернет любой элемент, что HTML, что SVG, лишь бы id был подходящим.
Тоже и про querySelector.
Их так же можно вставлять appendChild и удалять removeChild или remove. Все операции с узлами и элементами к ним применимы.
Есть конечно особенности.
document.createElement - не создаст элемент SVG
Нужно
document.createElementNS( 'http://www.w3.org/2000/svg', tag ) // tag - тэг элемента 'line', например

И многие свойства не удастся поменять как свойства. Нужно через атрибуты
Например есть свойство x у line, но line.x = 100 - не пройдет. нужно line.setAttribute('x', 100)
Названия атрибутов - регистрозависимы. Нужно писать так, как указано в документации/