0xVoushi
на твоем же скрине
Anonymous
0xVoushi
Помогите с такой проблемой. https://codepen.io/anon/pen/YQEOEG - задаю высоту svg 32px, а в итоге занимает больше
потому что у тебя svg в блоке .icon лежит
Eugene
Ору
0xVoushi
прописываешь там moy-file.sass
0xVoushi
А как надо?
ой
да у тебя там какой то треш
style="position: absolute; width: 0; height: 0; overflow: hidden;"
0xVoushi
в самой svg
Alex
+
Alex
Если хочешь ничего не менять и просто оставить всю эту кашу: добавь vertical-align: top к svg в отедльных стилях
Kot
ой
да у тебя там какой то треш
style="position: absolute; width: 0; height: 0; overflow: hidden;"
Svg с макета взял, не сам делал, прогнал через Icomoon
Alex
Но лучше к едрене всё стереть.
Alex
И удалить себе интернет.
Alex
Шучу, конечно, не принимай близко.
Alex
Svg с макета взял, не сам делал, прогнал через Icomoon
icomoon нужен в том случае, если тебе необходимо сделать шрифтовый пак иконок из SVG.
Alex
Поэтому прогонять ничего не надо.
Kot
Ну это и предполагается, просто пока что добавил одну иконку
Kot
И с ней проблемы
Anonymous
Ну это и предполагается, просто пока что добавил одну иконку
В чем космический эффект указания вьюпорта в symbol?
Kot
Да в любо случае эти инлайновые стили в svg можно убрать, ничего по сути не изменится
Kot
Icomoon
Kot
Я сам ничего не добавлял
Anonymous
Вьюбокс у тебя viewBox="0 0 32 30" должен быть
Kot
Я в векторе ещё плаваю
Alex
Ну это и предполагается, просто пока что добавил одну иконку
Когда ты будешь добавлять иконки на страницу через шрифты, всё будет совершенно иначе, включая стили.
Alex
В общем, я сказал тебе, как поправить нынешнее положение.
Kot
Я хочу не через иконочный шрифт, а через svg
Kot
Ок, vertical-align вроде помог, спасибо
Alex
Ну это и предполагается, просто пока что добавил одну иконку
Но сказал, что предполагается использование шрифтов. Ок, задачу решили и ладно, а то дебри.
Kot
Icomoon предоставляет не тлько иконочный шрифт, а спрайт из всех svg, если что
Kot
Как я понял
Kot
Вот это метод и использую
Alex
Понял.
Kot
Там вроде уже иконочного шрифта вообще нет у них
Kot
В любом случае, спасибо ещё раз. Хотя и не понятно, почему именно так решается
Alex
https://icomoon.io/app/#/select
Alex
Есть, в общем.
Kot
А да, это просто другая кнопка, я её уже не замечаю
Kot
Просто читал, что в иконочных шрифтах есть довольно много мелких минусов
Kot
И что будущее за svg
0xVoushi
накостыляли и рады
Anonymous
И что будущее за svg
Я нифига не понял что ты там наборогозил. Фишка в том, чтобы использовать через <use>?
Anonymous
В корневом svg нужно указывать вьюпорт. У тебя по ширине 2 пикселя лишние, я не думаю, что так задумано
Alex
В любом случае, спасибо ещё раз. Хотя и не понятно, почему именно так решается
Исторически так сложилось у img. Можно так же сделать для img "display: block;", тоже поможет против отступа. Img по умолчанию выравнивается браузерами по нижней базовой линии текста, то есть - 0.1em от нижней части строкового блока. Это и есть негодник-отступ. Считай, что это исторический косяк разметки. Решается он многими способами.
Anonymous
Через fill можешь менять цвет обводки, например
Kot
Anonymous
Kot
Там несколько корявая исходная иконка, не совсем квадратная
Alex
Исторически так сложилось у img. Можно так же сделать для img "display: block;", тоже поможет против отступа. Img по умолчанию выравнивается браузерами по нижней базовой линии текста, то есть - 0.1em от нижней части строкового блока. Это и есть негодник-отступ. Считай, что это исторический косяк разметки. Решается он многими способами.
под img я подразумеваю все изображения
Alex
Anonymous
Anonymous
Там несколько корявая исходная иконка, не совсем квадратная
Да и то, что столько координат указано, это уже странно
Kot
Начинающий дизайнер
Kot
И начинающий верстальщик
Kot
Просим нас извинить)
Kot
Там три кривых
Kot
Я в этом вообще не разбираюсь, просто эскортировал векто
Kot
вектор
Kot
Имортировал в icomoon и попробовал использовать так, как в демке
Anonymous
viewBox="0 0 33 30" тебе нужен, чтобы эту кривость полноценно отобразить
0xVoushi
Исторически так сложилось у img. Можно так же сделать для img "display: block;", тоже поможет против отступа. Img по умолчанию выравнивается браузерами по нижней базовой линии текста, то есть - 0.1em от нижней части строкового блока. Это и есть негодник-отступ. Считай, что это исторический косяк разметки. Решается он многими способами.
с этим все еще не оч понятно
треш какой то
Kot
viewBox="0 0 33 30" тебе нужен, чтобы эту кривость полноценно отобразить
Я не совсем понимаю, что такое вьюбокс и тем более, почему именно 33 30
Kot
И что значит полноценно? Если я в своей коде, который я скинул, на кодпене, изменю вьюбокс, размер всё равно будет больше
Kot
https://codepen.io/anon/pen/YQEOEG
0xVoushi
погугли
Anonymous
Я не совсем понимаю, что такое вьюбокс и тем более, почему именно 33 30
Это та область, которая будет "считываться" с svg, например у тебя есть свг размером 100х100 пикселей, тогда при "0 0 50 50" ты получишь половину самого свг
Anonymous
И что значит полноценно? Если я в своей коде, который я скинул, на кодпене, изменю вьюбокс, размер всё равно будет больше
Alex
с этим все еще не оч понятно
треш какой то
Изображение по дефолту отображается как строчный элемент, а строчные элементы выравниваются по baseline, это влияет на высоту строки и получается такое говнецо. Ну, господа, грех с таким не столкнуться за опыт.
Kot
Kot
Если без vertical-align
0xVoushi
Изображение по дефолту отображается как строчный элемент, а строчные элементы выравниваются по baseline, это влияет на высоту строки и получается такое говнецо. Ну, господа, грех с таким не столкнуться за опыт.
так лол
там влияет не baseline
а line-height
который имеет значение normal по дэфолту
а normal = 1
1 = fontsize в пикселях
0xVoushi
я такое на тестовом дают
Alex
Ты сейчас ту же одноглазую змею взял только в другую руку.
0xVoushi
Ты сейчас ту же одноглазую змею взял только в другую руку.
ну способов решения отступа от img там много в дэфолтном примере
но самый сложный я описал уже выше