Пропало SVG на планшетах и телефонах

Question

есть такие SVG'шки:

.test {
  background: #333;
  border-radius: 50%;
  width: 55px;
  height: 55px;
  position: relative;
}
svg {
  position: absolute;
  top: 50%;
}
svg:first-child {
  left: 20%;
  transform: translate(-20%, -50%);
}
svg:last-child {
  left: 80%;
  transform: translate(-80%, -50%);
}

<div class="test">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6" height="12" viewBox="0 0 6 12">
                            <image xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAALCAQAAAD2WzQdAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfjAhMKGBGBVFXgAAAAZklEQVQI1z2OMQrCUBQE5+UGQq4ipBIESZkcIfeKNxBLUVsLsc89Uk0tL8X/ZKttZnZDajqeTa1nfiyI2Ju+BHE0vYng5N9ZRMJkpS1gw8SBa9WIg+m9MIgX07cRdfTEh2/sD448NmRxMq6jLearAAAAAElFTkSuQmCC"/>
                          </svg>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6" height="12" viewBox="0 0 6 12">
                            <image xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAALCAQAAAD2WzQdAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfjAhMKGA97W2iDAAAAZ0lEQVQI1zWMsQmDABREn5IFQmbICpJKCEhKHcG9zAbBXgcIpLDLHMHm1fItvrlr7uDd4epN0iVfPtxJiZPhQySBl2H3Lzi42RceOD8u5RGfnOkTGg1bwcLZsMm3t2GdNyeuVCw53AEqzDrrCI7IFgAAAABJRU5ErkJggg=="/>
                          </svg>
</div>

Проблема заключается в том, что они не отображаются на планшетах и телефонах, в чём может быть проблема?

Answer 1

Не отображается скорее всего потому, что для тега <image /> не указаны атрибуты width и height.

В вашем случае вообще нет необходимости использовать <image /> и вставлять стрелки растровыми картинками. Можно обойтись <path /> :

.test {
  background: #333;
  border-radius: 50%;
  width: 55px;
  height: 55px;
  position: relative;
}
.test-arrow{
  display:inline-block;
  fill:none;
  stroke:#fff;
  width:6px;
  height:12px;
  position:absolute;
  top:calc(50% - 6px);
}
.test-arrow.left{
  left:10px;
}
.test-arrow.right{
  right:10px;
}

<div class="test">
  <svg class="test-arrow left" viewBox="0 0 6 12" preserveAspectRatio="none">
    <path d="M6,0 0,6 6,12" />
  </svg>
  <svg class="test-arrow right" viewBox="0 0 6 12" preserveAspectRatio="none">
    <path d="M0,0 6,6 0,12" />
  </svg>
</div>

или даже простым css:

.test {
  background: #333;
  border-radius: 50%;
  width: 55px;
  height: 55px;
  position: relative;
}
.test:before,
.test:after{
  content:'';
  display:inline-block;
  width:8px;
  height:8px;
  border-top:1px solid #fff;
  border-right:1px solid #fff;
  position:absolute;
  top:calc(50% - 4px);
}
.test:before{
  left:10px;
  transform:rotate(-135deg)
}
.test:after{
  right:10px;
  transform:rotate(45deg)
}

<div class="test">
</div>