Как сделать шрифт для svg?

Question

[Breeze1]

На сайте будет много svg иконок, хочу сделать из них шрифт, и внедрять на сайт. Использую iconmoon сервис для этой цели, собственно проблема в том, что все иконки разных размеров, где-то 15px, где-то 35px. Iconmoon делает все иконки одинаковые по ширине, можно как-то сделать чтобы иконки были оригинальных размеров ? либо посоветуйте какой-нибудь другой способ как это можно реализовать ?

Answer 1

[Максим]

Для начала надо понять что такое SVG спрайт
Это обычный svg документ .. со списком иконок и со стилем : display:none; который вставлен в любое место в html документе и имеет список нужных иконок или же верно сказать path и всё далее как сказал SmthTo в html документе мы делаем мягкую ссылку и вставляем куда требуется.

Что бы иконка везде отображалась одинаково и была одинаковых размером то как правило их рисуют
большого размера 1000px x 1000px и центре находится экспозиция т.е сама иконка

После всех манипуляций берём полностью <path id="" d="" /> и сохраняем столбиком в html например в самом верху страницы что обычно и делают сборщики и примерно так это выглядит :

<svg width="" height="" viewbox="" style="display:none;">
 <symbol id="ico1" viewbox="0 0 1000 1000">  <path  d="M..............z" /></symbol>
 <symbol id="ico2" viewbox="0 0 1000 1000">  <path  d="M..............z" /></symbol>
 <symbol id="ico3" viewbox="0 0 1000 1000">  <path  d="M..............z" /></symbol>
 <symbol id="ico4" viewbox="0 0 1000 1000">  <path  d="M..............z" /></symbol>
</svg>

В html мы ссылкаем на любой path точно как сказано выше т.е таким образом :

<svg>
	<use xlink:href='#ico1' />
</svg>

Если без кучи слов то вот так :