Как масштабировать размеры иконок svg

#html #css #svg #icon #inkscape

Вот есть код:







    



    



    



    


















При размерах 256 пикселей размер svg иконки не 256 пикселей, а где-то ~140
При указании 128, тоже не 128 и т.д.
Почему так происходит?
 Я уже перечитал все эти мануалы, в примерах их иконки все нормально отображаются
с размерами, а почему эта не работает как надо?! 
    

Ответы

Ответ 1

Масштаб определяется соотношением viewport / viewBox, где viewport это width="X"
height="Y"  

В вашем примере масштабирование применяется последовательно  несколько раз.
Очень легко запутаться. Поэтому я максимально упрощу ваш пример и поэтапно буду усложнять
до практического применения    


Ниже пример, где применяется масштабирование только один раз в шапке
svg файла


viewport / viewBox = 100/100=1. Масштаб будет - 1:1 То есть как нарисовано в векторном
редакторе, так и будет отражаться на дисплее 

      

На скрине векторного редактора видно, что физически иконка имеет габариты - 56.6
х 56.6px  


Теперь запускаем этот же файл в браузере. И для наглядности я добавил
красный прямоугольник,  через стили в шапке файла, который показывает
границы SVG файла.

style="border:1px solid red;"