Как лучше всего верстать векторные иконки?

Question

[Настя]

Хочется верстать все иконки векторно, но столкнулась с проблемой.
Обычно конвертировала в шрифт на icomoon.io. Очень удобно, можно на лету менять цвет. Но вот незадача, в некоторых браузерах этот шрифт не отображается. Причем варианты неожиданные - не только в IE, но и в хроме бывает. В IE9 практически всегда с этим проблемы. Так и не поняла от чего зависит. Может от версии браузера.
Вставка чистым svg мне не очень нравится. Привыкла к дримвиверу, а там если вставлять через svg файл, то в панели файлов проекта каждый svg подтягивается как отдельный файл. В итоге имеем простыню файлов, среди которых до нужного style.css еще поди доберись.

Может быть есть другие непробиваемые и удобные способы?

Answer 1

[Григорий]

Я как раз пользуюсь svg, и такая проблема была. Если шрифт не отображается, значит в компьютере просто нет этого шрифта. Лучше взять за правило использовать только Arial и Times New Roman. Если нужно другой шрифт, то конвертировать его в кривые, тогда иконка будет шрифтонезависимой и откроется на любой машине.

Comments

[Настя]

Не совсем поняла вас. Icomoon конвертирует svg иконки в новый веб шрифт.

примерно так:
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?-zhlfnl');
src:url('fonts/icomoon.eot?#iefix-zhlfnl') format('embedded-opentype'),
url('fonts/icomoon.ttf?-zhlfnl') format('truetype'),
url('fonts/icomoon.woff?-zhlfnl') format('woff'),
url('fonts/icomoon.svg?-zhlfnl#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

При верстке иконки вставляются через span с помощью сгенерированных классов:

.icon-fb:before {
content: "\e600";
}

Т.е. по идее этот набор уже шрифтонезависим.

Что вы имеете в виду под "конвертировать его в кривые"? иконка и так же уже в кривых...

[Григорий]

Да, по логике вижу, что шрифт подгружается отдельно...
Конвертировать в кривые, значит в векторном редакторе оконтурить текст. То есть заместить набор шрифтовых символов векторными объектами, повторяющими контуры символов. Я так делаю, когда использую нестандартные символы Unicode, которые редко встречаются в шрифтах.

Answer 2

[Настя]

Пожалуй пока самым оптимальным мне кажется этот вариант:
.icon {
background-image: url(your.png); /* PNG для IE6-8 */
background-image: url(your.svg), none;
}

Comments

[Гарольд]

Обычно svg встраивают в тело html, это на всех сайтах, у которых я просматривал исходный код. Плюсы очевидены, адаптивность графики, изменение цветов и анимация.

Лично я бы использовал такой метод.

[Настя]

Гарольд: Можно расшифровку для тех кто в танке. "встраивают в тело html" - это в смысле вставлять тэгом в html? типа ?

[#rybak]

Да, как вариант, можно так.
Открываешь svg в браузере
Открываешь панель разработчика F12
Копируешь тег svg
Вставляешь прямо в то место где должна быть картинка вместо тега img.

[Настя]

#rybak: мм спасибо, интересный способ. Вот только даже из социконки контакта тэг svg вылился в 4000 строчек кода... Это всегда так или можно как-то упростить?

[#rybak]

Если рисуете самостоятельно, то лучше упрощать:
Либо вручную аккуратно
Либо в иллюстраторе Object / path / simplify

Кстати очень часто логотипы в очень хорошем векторном виде хранятся на википедии в формате .svg

[Настя]

#rybak: ясно, спасибо :)

[Гарольд]

Настя: да, тегом в html

Как выше ответили, что бы было меньше строчек с кординатами, оптимизируйте графику в иллюстраторе.

А так же посмотрите на youtube уроки по svg

Answer 3

[Павел Кизернис]

А можно увидеть примеры не работающего (не верно работающего) icomoon.io?
Я вот его использовал и еще ни разу не замечал никаких проблем с ним.

Может быть просто какой-то баг с подключением шрифта в CSS?