Лучшая практика использования SVG, относительно высоты и ширины?

Question

Я пытался использовать SVG на нескольких последних проектах, и, поскольку он масштабируется, мне было интересно, как вы относитесь к динамической высоте и ширине этих SVG?

До сих пор я экспортировал графику из Illustrator, сохраняя их как SVG, открывал SVG и удалял идентификаторы doctype и # layer_1 и т. Д. И затем я отредактировал атрибуты высоты и ширины до 100%. Поэтому я установил размер SVG, установив ширину и/или прописку на родителя. Это упрощает настройку размера с помощью мультимедийных запросов. Также как переходы CSS. Но я не уверен, что это лучший способ сделать это.

Мой HTML было так:

<div class="svg icon_phone"> 
    <img src="static/icon_phone.svg"> 
</div> 

<div class="svg"> 
    <img src="static/icon_other.svg"> 
</div> 

CSS, как это:

.svg { 
    width: 60%; 
} 

.icon_phone { 
    padding-left: 80px; 
} 

И SVG будет выглядеть следующим образом:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    height="100%" width="100%" viewBox="0 0 97 94.5" enable-background="new 0 0 97 94.5" xml:space="preserve"> 
<circle fill="#5B2B6E" cx="48.63" cy="47.125" r="42.75"/> 
<g> 
    <line fill="none" stroke="#FFFFFF" stroke-width="5" stroke-miterlimit="10" x1="48.85" y1="47.125" x2="26.41" y2="47.125"/> 
    <line fill="none" stroke="#FFFFFF" stroke-width="5" stroke-miterlimit="10" x1="70.85" y1="47.125" x2="58.25" y2="47.125"/> 
    <polyline fill="none" stroke="#FFFFFF" stroke-width="5" stroke-miterlimit="10" points="44.794,65.51 26.41,47.125 44.794,28.74 
     "/> 
</g> 
</svg> 

Я не знаю, если это было бы хорошим способом сделать что-то, потому что они ведут себя странно в IE и некоторых браузерах, если я специально не установил как ширину AN D на родителях. Некоторые из SVG растягиваются, некоторые имеют свои высоты, все испорчены. Но в Chrome все хорошо.

Что было бы лучше всего взять на себя?

Answer 1

Лучше удалить атрибуты высоты и ширины (и x, y и viewBox при необходимости) из самого svg и использовать как ширину, так и высоту в css. Ex:

.parent svg { 
    width: 100%; 
    heigth: 100%; 
} 

.parent { 
    width: 100px; 
    height: 50px; 
} 

Или:

.parent svg { 
    width: 100px; 
    heigth: 50px; 
} 

Таким образом, вы можете легко сделать все реагировать.