Тот же значок разных размеров с помощью спрайта svg srg?

Question

Im using gulp-svg-sprite https://github.com/jkphl/gulp-svg-sprite

Можно ли использовать тот же значок разных размеров? До спрайтов это было легко, и на самом деле была одна из вещей, которые мне больше всего нравится SVGs:

http://codepen.io/anon/pen/qZQvYN

.icon-small, 
.icon-large { 
    background-image: url(https://lincolnloop.com/static/assets/img/lincolnloop-mark.9b93136b4561.svg); 
    background-size: 100% 100%; 
} 

.icon-small { 
    width: 50px; 
    height: 50px; 
} 

.icon-large { 
    width: 100px; 
    height: 100px; 
} 

Однако теперь, когда я использую спрайт Я не могу использовать это решение в качестве background- размер поступает из смесителя. Даже если бы я переписал это, то фоновая позиция была бы ошибочной.

http://codepen.io/anon/pen/JXezaK

.icon-small, 
.icon-large { 
    background-image: url(https://scotthsmith.com/projects/social-icons/blue/IconGrid.svg?v1.11); 
    background-size: auto 400px; 
    border: 1px solid grey; 
} 

.icon-small { 
    width: 50px; 
    height: 50px; 
} 

.icon-large { 
    width: 100px; 
    height: 100px; 
} 

Answer 1

Я полагаю, у вас нет текста на SVG. Затем с помощью transform: scale(2) следует исправить:

.icon-large { 
    width: 50px; 
    height: 50px; 
    transform: scale(2) 
} 

This SO question, кажется, обсуждать подобный вопрос.

Answer 2

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

Более подробную информацию можно прочитать на этом блоге: https://www.liquidlight.co.uk/blog/article/creating-svg-sprites-using-gulp-and-sass/