Добрый день уважаемые, задался вопросом поключения 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, хоть и отрабатывает
*Буду благодарен если подскажете как решить.
И теперь главный вопрос, как же все таки наиболее грамотно добавлять SVG в фаил?