Можно ли сделать этот SVG адаптивным?

Question

[romaro]

То есть чтобы изображение зависело от размера блочного html-элемента, фоном которого оно является. А так же избавиться от отступов по вертикали и горизонтали.

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="" width="" id="Layer_1" version="1.1" viewBox="0 0 512 512" xml:space="preserve" fill="#78cb5f">
<path d="M445.11,304.422l-65.654-41.484l65.188-48.212c3.203-2.364,3.878-6.875,1.51-10.074c-2.364-3.199-6.875-3.874-10.074-1.506  l-92.44,68.363l-0.039-0.031l-0.038,0.031l-92.441-68.363c-3.194-2.368-7.705-1.693-10.074,1.506  c-2.364,3.199-1.688,7.71,1.511,10.074l65.188,48.212l-65.65,41.484c-3.365,2.127-4.368,6.576-2.24,9.941  c1.37,2.167,3.703,3.358,6.095,3.358c1.32,0,2.647-0.361,3.844-1.118l70.382-44.474l19.144,14.162  c1.27,0.939,2.775,1.413,4.281,1.413c1.507,0,3.013-0.474,4.286-1.413l19.139-14.162l70.383,44.474  c1.195,0.757,2.527,1.118,3.844,1.118c2.392,0,4.728-1.191,6.095-3.358C449.473,310.998,448.472,306.549,445.11,304.422z"/>
<path d="M438.463,160.325H248.737c-27.857,0-50.521,24.694-50.521,55.045v81.256c0,30.354,22.664,55.049,50.521,55.049h189.727  c27.862,0,50.525-24.694,50.525-55.049V215.37C488.989,185.019,466.325,160.325,438.463,160.325z M472.451,296.626  c0,20.448-15.214,37.028-33.988,37.028H248.737c-18.77,0-33.983-16.58-33.983-37.028V215.37c0-20.447,15.214-37.023,33.983-37.023  h189.727c18.774,0,33.988,16.576,33.988,37.023V296.626z"/>
<path d="M161.824,204.391H31.176c-4.507,0-8.164,3.656-8.164,8.164c0,4.511,3.657,8.168,8.164,8.168h130.648  c4.503,0,8.16-3.657,8.16-8.168C169.985,208.048,166.327,204.391,161.824,204.391z"/>
<path d="M163.583,245.798H61.115c-3.533,0-6.402,3.653-6.402,8.164c0,4.507,2.869,8.168,6.402,8.168h102.468  c3.538,0,6.402-3.661,6.402-8.168C169.985,249.451,167.12,245.798,163.583,245.798z"/>
<path d="M164.965,287.2H84.598c-2.776,0-5.02,3.657-5.02,8.164c0,4.512,2.244,8.168,5.02,8.168h80.367  c2.771,0,5.02-3.656,5.02-8.168C169.985,290.857,167.737,287.2,164.965,287.2z"/></svg>

Answer 1

[Максим]

Не совсем понял я, что это значит "сделать svg адаптивным" ?
SVG можно сделать резиновым то есть что бы оно занимало всё пространство по ширине
В вашем svg надо было просто исправить viewBox: https://codepen.io/topicstarter/pen/ZEJLbem

Answer 2

[alexalexes]

Как избавиться от отступов в векторном файле изображения.
Либо:
1) Откройте файл svg в векторном редакторе, например, в Inkscape.
2) Уменьшите область видимости холста до выступающих элементов изображения.
3) Сохраните изменения и используйте новый вариант svg файла.
Либо в существующих данных вручную подобрать "коробочку" без отступов. У меня вот такие числа получились.
<svg ... viewBox="23 160 466 192"
Тестировал на таком div блоке. Изменял ему width и height, чтобы увидеть границы svg.
Адаптивность в svg в качестве фона div работает.

<style>
    div.container
    {
      width: 120px;
      height: 50px;
      background: url(1.svg) no-repeat;
      border: 1px solid black;
    }
  </style>
  <div class="container">
  </div>

Comments

[romaro]

Спасибо за подсказку!
Правда, у меня пока с обрезкой не получилось. Хочу попробовать в Инскейпе. У меня, видимо, настолько глупый вопрос, что даже гугл не хочет отвечать: можно ли там открыть какой-то диалог и тупо скопировать код свг-файла, чтобы он его сразу распарсил на ветки? То есть без необходимости вначале создавать на компьютере svg-файлик и открывать его через Ctrl+O.

[alexalexes]

Можно в html вставить как тэг svg вместе с его специфичным содержимым, чтобы не усложнять жизнь, используя фон. Когда укротите тэг, можно вернуть содержимое обратно в файл и попробовать работать со свойством background.
ПС: Не плодите лишних вопросов - https://qna.habr.com/q/1064642
Ответ на него будет примерно:

Оставьте пустые размеры svg или задайте их по 100%.
<svg ... height="100%" width="100%"

Редактируйте текущий вопрос, дополняя его новыми непонятками.