Как прижать svg?

Question

[lavezzi1]

Здравствуйте.

1. Нужно прижать эту иллюстрацию к блоку чтобы они были как одно целое. Из за чего возникает этот промежуток в несколько пикселей? В самом изображении его точно нет.

2. Можно эту svg вставить через img src или background-image и чтобы сохранилось тоже самое положение и самое главное чтобы иллюстрация тянулась по ширине?

codepen.io/anon/pen/OMrMbg

Answer 1

[Константин Величко]

Это всего лишь пробел, по тому что svg имеет display inline
Лечится элементарно

#svg
  display block

codepen.io/Zoxon/pen/wMRMjy

Comments

[lavezzi1]

Облажался :) Спасибо!
А на второй вопрос можете ответить?

[Константин Величко]

Не совсем понимаю чего вы хотите svg и так будет тянутся

[lavezzi1]

Проблема в том, что при вставке через background-image нужно указывать блоку высоту, чтобы свг хоть как то отображалась. При уменьшение размера браузера блок не меняет высоту соответственно этот блок уезжает вверх. Константин Величко:

[Константин Величко]

Не знаю ответа

Answer 2

[Brendan Castaneda]

Если SVG прописано инлайново т.е. сам код прописан в HTML
Структура дом дерева: Блок 1 в нём Блок 2, внутри Блока 2 код SVG картинки.

Родителю (Блок 1) пишем
position: relative;
-----------------------------------------------
Блоку (Блок 2) в котором лежит SVG пишем
position: absolute;
bottom: 0px;
-----------------------------------------------
Самому SVG в CSS пишем
svg {
width: 100%;
display: block;
}
-----------------------------------------------
В коде SVG картинки в HTML рядом со свойством viewBox
Прописываем preserveAspectRatio='none'