Как изменить размер, выровнять по центру и сделать файл SVG адаптивным внутри его родительского div?

Допустим, у вашего образа есть класс svg-image:

<img class = "svg-image" src = "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/compose_music_ovo2.svg">

Пожалуйста, добавьте CSS, подобный этому:

.svg-image {
    width: 50%;
}
@media only screen and (max-width: 992px) {
    width: 90%;
}

Вы можете указать несколько запросов @media для разных размеров экрана и применить желаемую ширину изображения.

Обновлено:

Чтобы центрировать изображение по вертикали и горизонтали, вы можете добавить стили в свой div (который обертывает ваше изображение):

.class-of-your-div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; 
    justify-content: center;
    align-items: center;
}

Вы пытались дать элементу изображения идентификатор, а затем сослаться на этот элемент внутри вашего CSS следующим образом:

div#foo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

где у вашего тега img есть пример идентификатора 'foo'

Обновлять:

Возможно, вам придется изменить положение вашего родителя следующим образом:

  #parent {
    position: absolute

   }

div#foo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

Свойства CSS background-* будут делать то, что вы хотите.

div.text-center div {
  background-color: #489734;
  height: 500px;
  background-image: url("https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/compose_music_ovo2.svg");
  background-size: auto 50%;
  background-repeat: no-repeat;
  background-position: center;
}

<div class = "col-md-10 col-md-offset-1 col-sm-12 text-center">
  <div></div>
</div>

https://jsfiddle.net/wfukyd4q/7/

Если это не совсем так, как вы хотите на мобильных устройствах, вы можете использовать медиа-запросы, чтобы настроить CSS по мере необходимости для определенных размеров экрана.

Еще один способ сделать это:

.col-md-10{position:relative;}
.col-md-10 img{
  display:block;
  width:50%;
  height:auto;
  position:absolute;
  margin:auto;
  top:0;bottom:0;right:0;left:0;
}

<div class = "col-md-10 col-md-offset-1 col-sm-12 text-center">
                <div style = "background-color:#489734;height:500px">
                    <img src = "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/compose_music_ovo2.svg">
                </div>

</div>