Как лучше подключать SVG объект
 

Добрый день уважаемые, задался вопросом поключения SVG элементов сгенерированных в векторных рисовалках к HTML. Надеюсь вы посоветуете, что-то хорошее по этому поводу.
1)Опущу прямое подключение, когда код из .svg копипастится в html. Метод хорош, но если надо вставлять множество однотипных объектов, то очень захламляет html разметку.
2)Ещё на форумах встречал вызов svg через свойство css

background: url('example.svg') no-repeate 50% 50%;

вроде как все объекты svg сводятся в один фаил, а там позиционированием выбирается нужный, если не ошибаюсь называется svg-span.
Вот даже образец с анимацией http://codepen.io/sdras/pen/azEBEZ
Я его пробовал, тоже с анимацией игрался, у меня почему-то не очень хорошо вышло.
3) Ещё один метод это обращение к элементу через html в сокращенном виде:

<div class="svg_circle">
	<object>
		<embed src="Circle.svg">
	</object>
</div>

а там уже в svg файле дописывать свойста

<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"
	 viewBox="0 0 283.3 285.6" style="enable-background:new 0 0 283.3 285.6;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#B049B4;stroke:#420447;stroke-width:4;}
</style>
<g>
	<circle id="elips" class="st0" cx="147.9" cy="147.2" r="125"/>
</g>
</svg>

Плюс в этом методе я вижу что элемент можно подгонять через CSS и JS.
Единственное что у меня почему-то выдает ошибку в браузер при множественных запросах и работе через JS, хоть и отрабатывает :write: :write:
*Буду благодарен если подскажете как решить.

И теперь главный вопрос, как же все таки наиболее грамотно добавлять SVG в фаил?