Как определить свойство элемента для отдельного браузера?
Такие дела.
Все браузеры коряво отображают некоторые svg. Все, кроме FF.
В чем корявость? В том, что у svg может быть указан viewbox неправильно (не соответствует размеру самой SVG) и в большинстве браузеров появляются пространства сверху и снизу либо справа и слева, в зависимости от того, какая сторона меньше.
И тут вылезает толстый баг - для всех браузеров ставлю позиционирование и отрицательный top/left, чтобы выровнять SVG, а FF нормально отображает SVG и иконка, из-за позиционирования, смещается в сторону.
Денис Букреев почему нельзя выровнять svg по сетке и записать правильный viewBox, подогнать под какой-нибудь классический viewBox="0 0 32 32"viewBox="0 0 32 32"
Roman: именно в этом и проблема
при экспорте svg постоянно указывают квадратные размеры, в итоге, если иконка имеет большую ширину, то сверху и снизу появляются отступы из-за квадратности.
Денис Букреев: вообще не совсем так, я квадрат привел как пример, например в illustrator можно редактировать монтажную область и экспортировать в svg без косяков, остаётся только минифицировать через svgomg или подобное
вы сделали тоже самое через sketch)
Roman: ну вот я, как разработчик, вообще не должен этим заботиться)
зачем монтажная область не совпадает с размером SVG - мне непонятно.
Я даже встречал маленькую svg-шечку на огромном пласте пустого места - зачем? Ох уж эти дизайнеры
Вспомнил что у меня есть лучший SVG-редактор - Sketch (windows в пролете).
Открыл в нем, экспортировал и он сам нормально обрезал и задал нужные размеры у иконки.
Profit
