Почему я не могу задать нужные размеры svg-иконке?
У меня есть 2 иконки.
Первая – инстаграм, эта иконка отображается так, как нужно (сама иконка - 25*25, вместе с задним фоном - 49*49)
Вторая иконка – фейсбук. Сама иконка должна быть - 11*20 (на самом деле - 5*11 ), НО вместе с задним фоном иконка принимает нужные размеры - 39*38.
Почему возникает такое отличие в поведении этих двух иконок? И почему я не могу добиться нужного размера для фейсбука?
Изучите векторные спрайты.
И в прошлом вашем вопросе про эти иконки, я писала как они делаются. https://jsfiddle.net/ytuba2ce/
Если нужны разные размеры, задавайте доп классы.
Проблема была не в том, векторные спрайты я употребляю или вставляю свг напрямую. Как на мой взгляд, в вашем примере очень много кода.
Не знаю правильно это или нет, но я сделал так. Я изменил размер для свг вот тут, задав четкие размеры для моей иконки по большей стороне. Потом такие же размеры для viewport. Масштаб получился 1:1 - картинка отображается так, как нужно. Интересно ваше мнение - является ли этот метод костыльным?
А вообще, как я понимаю, лучше всего свг рисовать самому. Возникают огромные проблемы с масштабом и автоматически заданными размерами, которые иногда просто нереально изменить
Как на мой взгляд, в вашем примере очень много кода.
Если наплевать на семантику с доступностью, можно убрать список к черту. Кода станет меньше.
задав четкие размеры для моей иконки по большей стороне.
Если что, svg у вас 44х44 (потому что box-sizing не тот), а вьюбокс 20х20. Так что я бы не стала просто четкое соответствие размеров. Но для svg это не важно к счастью.
Интересно ваше мнение - является ли этот метод костыльным?
Если полно времени на то, чтобы править вьюпорты и приводить их к одинаковым пропорциям, то почему бы и нет. Развлекайтесь.
Простой
