Возможно ли сделать спрайт масштабируемым?

Question

[Денис Букреев]

Такие дела.

Создаю спрайты с помощью SpriteSmith.
И такое дело: на разрешениях от 640 до 320 верстка полностью масштабируемая (все размеры записаны в vw), но спрайты остаются одного размера, всегда.
К тому же они сделаны под retina-экраны.

Возможно ли сделать спрайт таким же масштабируемым?
Или придется все иконки выводить в img?
SVG дизайнер не предоставил, так что не надо про них писать.

Comments

[Максим]

всё таки , про svg скажу , что они гораздо удобнее и вопрос о масштабировании сам отпадёт , но раз уж не умеете пользоваться svg то о png sprite мало чем отличается (руазумеется svg много чем отличается) но background-size и background-position наверно единственный подход

[Денис Букреев]

. Shadow: я вроде написал, что SVG не предоставлен? при чем тут не умею?

[Максим]

Денис Букреев: я имел ввиду самому нарисовать

[Денис Букреев]

. Shadow: это я тоже умею, но за это не платят, а иконок там пару десятков

[Максим]

Денис Букреев: пару десятков ? тогда согласен с Вами , но с img в png или в jpg работать сложно , т.е придётся подгружать заранее крупную картинку или как минимум в фотошопе объеденить их на один холст , я лично бы именно так бы и сделал бы для своего удобства

Answer 1

[Александр]

Масштабировать растр - плохая идея. Тем не менее, если есть необходимость, то нужно задавать background-position для иконок в процентах. SpriteSmith, судя по беглому осмотру, этого делать не умеет, так что придется форкать или считать проценты самому.
UPD: Менять надо background-position и background-size, естественно. background-size лучше в пикселях менять.
UPD2: Посмотрел еще, можно не париться, result.coordinates модифицировать.

result.coordinates.x = (result.coordinates.x / result.properties.width) * 100;
result.coordinates.y = (result.coordinates.y / result.properties.height) * 100;

Так же и с высотой-шириной спрайта. Плюс проследить, чтобы значения он вставил в %, а не в px

Comments

[GreatRash]

Масштабировать растр вниз - норм идея.

Answer 2

[Павел]

Быть может, вам поможет моя статья, там про масштабирование, спрайты и все такое
https://habrahabr.ru/post/196030/