Изменение размера SVG на мобильном телефоне

Question

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

Вот мой Fiddle и мой код ниже:

body { 
 
    background:black; 
 
} 
 

 
@media screen and (max-width: 500px) { 
 
    svg { 
 
     width:50%; 
 
    } 
 
}

<?xml version="1.0" encoding="UTF-8" standalone="no" ?> 
 
<svg version="1.1" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> 
 
    <title>Logo</title> 
 
    <desc>Created with Sketch.</desc> 
 
    <defs></defs> 
 
    <g id="Your-Score" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> 
 
    <g id="Desktop-Your-Score" sketch:type="MSLayerGroup" transform="translate(-23.000000, -24.000000)" font-weight="normal" font-family="Gill Sans" letter-spacing="1.16666663" font-size="28" sketch:alignment="middle" fill="#FFFFFF"> 
 
     <g id="Header" sketch:type="MSTextLayer"> 
 
     <g id="Primary-Nav-[home]-Copy"> 
 
      <g id="Logo" transform="translate(23.000000, 18.000000)"> 
 
      <text id="TOMORROW’S"> 
 
       <tspan x="0.0328778028" y="27">TOMORROW’S</tspan> 
 
       <tspan x="36.2975262" y="58">SCORE</tspan> 
 
      </text> 
 
      </g> 
 
     </g> 
 
     </g> 
 
    </g> 
 
    </g> 
 
</svg>

Answer 1

Для масштабирования с помощью элемента IMG на работу, SVG-изображение должно иметь ширину, высоту и Viewbox атрибуты установлены внутри него. Вот как это выглядит:

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="70px" height="70px" viewBox="0 0 70 70"> 
    <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/> 
</svg> 

При установке ширины, высоты и Viewbox свойство, вы сообщаете браузеру, какую часть виртуальной холст для рисования. Поле просмотра указывает верхний левый и нижний правый угол виртуального холста. Таким образом, если изображение масштабируется до размера, большего, чем это, все изображение масштабируется, а не просто увеличивает размер виртуального холста (что приводит к пробелу рядом с формами SVG на изображении).

Свойство viewBox объясняется более подробно в моем учебном пособии о SVG Viewport и View Box.

Всегда Set Image Width Via Свойства CSS

Во всех примерах, которые я показал вам в этом учебнике, все ширины изображения были установлены с помощью свойства ширины CSS. Не используйте атрибуты width и height элемента img. Это не даст желаемого эффекта. Браузеры обрабатывают эти атрибуты иначе, чем соответствующие свойства CSS.

Точнее, это правильный путь:

<img src="/svg/circle-element-1.jsp" style="width: 32px;"> 

Answer 2

Используйте SVG внутри из <img> тега, например:

<img src="my_SVG_file.svg" alt="" /> 

Затем вы можете использовать стандартный CSS, чтобы повлиять на тег <img> & сделать его мобильным ив.

img { 
    max-width: 100%; 
} 

CODEPEN DEMO