Принцип генерации SVG спрайтов(как лучше сгенерировать)

[Galaxy]

Доброго времени суток.

Интересует как лучше сгенерировать svg спрайт из illustrator'а. 

[npofopr]

А какая разница svg это или обычный png? Спрайт он и png спрайт.

 

Не ваш вопрос http://toster.ru/q/94091 ?) 

Или о чем вы?

[Galaxy]

Не я .Я пока слабо разбираюсь в svg и иллюстраторе,но идея в том чтобы чем то автоматически загенерить svg и fallback png с иллюстратора.

Edited October 11, 2014 by Galaxy

[Stright]

Я генерировал помощью https://icomoon.io/app/#/select после сохранения svg-файлов из illustrator.

Если я правильно понял вопрос 

Edited October 11, 2014 by Stright

[npofopr]

после сохранения svg-файлов из illustrator

а он хочет автоматически, прямо из Илюстратора.

Но скорее всего это не возможно. 

[Stright]

в иллюстраторе почти не работал, но думается, что процесс создания спрайтов там такой же, что и в фотошоп

Хотя, может это http://positivecrash.com/%D0%B3%D0%B5%D0%BD%D0%B5%D1%80%D0%B8%D1%80%D1%83%D0%B5%D0%BC-svg-%D1%81%D0%BF%D1%80%D0%B0%D0%B9%D1%82%D1%8B-%D0%B2-adobe-illustrator/ (не проверял   )?

Edited October 11, 2014 by Stright

[Galaxy]

В общем пока нашел такой вариант - скидываем в папку нужные нам svg и png иконки и с помощью такого рода mixin'a генерим data:image + fallback
 

@import 'sprites/*.png';@mixin svg-background($img) {    .no-svg & {        @include sprites-sprite($img);        background-size: auto auto;    }    background-image: inline-image($img + ".svg");    background-size: sprites-sprite-width($img) sprites-sprite-height($img);}

Edited October 12, 2014 by klierik
Используй кнопку "<>"в тулбаре для обрамления кода. klierik

[npofopr]

ну для такого есть и https://www.npmjs.org/package/grunt-spritesmith

[positivecrash]

 

 

В общем пока нашел такой вариант - скидываем в папку нужные нам svg и png иконки и с помощью такого рода mixin'a генерим data:image + fallback
 

@import 'sprites/*.png';@mixin svg-background($img) {    .no-svg & {        @include sprites-sprite($img);        background-size: auto auto;    }    background-image: inline-image($img + ".svg");    background-size: sprites-sprite-width($img) sprites-sprite-height($img);}

 

 

Если вы используете способ с плагином для Illustrator, то не нужно повторно спрайты в Compass генерировать (вы уже это делаете, когда сохраняете из ai в svg и png). 

 

https://www.npmjs.org/package/grunt-spritesmith - на вид крутая штука, но руки все у самой не доходят попробовать его в действии.