SVG иконка некорректно отображается

Как правильно встроить svg?

Встраиваю так:

<div class="icon-svg">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="32" height="17" viewBox="0 0 32 17">
                                <defs>
                                    <style>
                                        .cls-1 {
                                            fill: #000;
                                            filter: url(#gradient-overlay-1);
                                            fill-rule: evenodd;
                                        }
                                    </style>
                                    <filter id="gradient-overlay-1" filterUnits="userSpaceOnUse">
                                        <feImage x="0" y="0" width="32" height="17" preserveAspectRatio="none" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMTciPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSI1LjUwMyIgeTE9IjE3IiB4Mj0iMjYuNDk3Ij4KICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNkOTFlOGQiLz4KICA8c3RvcCBvZmZzZXQ9IjAuNTYiIHN0b3AtY29sb3I9IiMxMDk4ZDQiLz4KICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMzNWI4MWUiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIvPjwvc3ZnPg=="/>
                                        <feComposite operator="in" in2="SourceGraphic"/>
                                        <feBlend in2="SourceGraphic" result="gradientFill"/>
                                    </filter>
                                </defs>
                                <path d="M23.984,14.731 L23.984,15.568 C23.984,16.358 23.324,17.000 22.513,17.000 L9.487,17.000 C8.676,17.000 8.016,16.358 8.016,15.568 L8.016,14.731 C3.207,12.935 -0.000,8.414 -0.000,3.381 L-0.000,0.944 C-0.000,0.423 0.435,-0.001 0.971,-0.001 L31.029,-0.001 C31.565,-0.001 32.000,0.423 32.000,0.944 L32.000,3.381 C32.000,8.414 28.792,12.935 23.984,14.731 ZM8.955,15.568 C8.955,15.854 9.194,16.086 9.487,16.086 L22.513,16.086 C22.806,16.086 23.045,15.854 23.045,15.568 L23.045,15.050 L8.955,15.050 L8.955,15.568 ZM31.061,0.944 C31.061,0.927 31.047,0.913 31.029,0.913 L0.971,0.913 C0.953,0.913 0.939,0.927 0.939,0.944 L0.939,3.381 C0.939,8.137 4.035,12.396 8.642,13.981 C8.730,14.012 8.804,14.067 8.858,14.136 L23.142,14.136 C23.196,14.067 23.270,14.012 23.358,13.981 C27.965,12.396 31.061,8.137 31.061,3.381 L31.061,0.944 ZM28.863,5.239 C28.915,4.992 29.163,4.833 29.418,4.883 C29.672,4.934 29.836,5.175 29.784,5.423 C29.329,7.581 28.143,9.574 26.442,11.036 C26.353,11.113 26.242,11.151 26.131,11.151 C26.001,11.151 25.872,11.099 25.779,10.996 C25.607,10.807 25.626,10.518 25.820,10.351 C27.369,9.020 28.450,7.204 28.863,5.239 ZM29.526,3.838 C29.267,3.838 29.057,3.634 29.057,3.381 L29.057,2.406 C29.057,2.154 29.267,1.949 29.526,1.949 C29.786,1.949 29.996,2.154 29.996,2.406 L29.996,3.381 C29.996,3.634 29.786,3.838 29.526,3.838 ZM9.153,13.031 C9.101,13.031 9.048,13.023 8.997,13.005 C7.041,12.332 5.347,11.119 4.100,9.497 C3.944,9.295 3.987,9.009 4.194,8.858 C4.402,8.706 4.696,8.748 4.852,8.950 C5.988,10.426 7.529,11.530 9.310,12.143 C9.554,12.227 9.683,12.488 9.596,12.726 C9.528,12.914 9.347,13.031 9.153,13.031 ZM3.548,8.224 C3.376,8.224 3.211,8.132 3.128,7.973 C2.957,7.642 2.802,7.299 2.669,6.952 C2.578,6.716 2.701,6.452 2.944,6.364 C3.187,6.275 3.457,6.395 3.548,6.631 C3.670,6.947 3.811,7.260 3.967,7.561 C4.084,7.786 3.991,8.061 3.759,8.175 C3.691,8.208 3.619,8.224 3.548,8.224 Z" class="cls-1"/>
                            </svg>
                        </div>

Иконка обрезается справа:

Указание ширины в рх не помогает.

UPD

Так и не удалось выяснить причину.

SVG странно себя ведет - когда страница загрузилась, я убираю у svg display: blok, и появляется все что скрыто. Но если совсем убрать display: blok и снова перезагрузить страницу, то все опять обрезается...