SVGにwidth,heightを指定していないとIEでbackground-sizeより縮小されるバグ

IE11では、レスポンシブ対応のためwidth,heightを指定していないSVG画像をbackgroundに指定した際
画像がbackground-sizeで指定したサイズよりも小さく表示されてしまうバグがあります。

これを回避するためには、SVGにwidth,heightを指定した上で、CSSのbackground-sizeも指定します。

サンプルソース※IEで表示すると症状が再現します

<br />
.pattern {<br />
	width: 100vw;<br />
	height: 10vw;<br />
	background: url('dot.svg');<br />
	background-size: 5vw;<br />
}<br />

<br />
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 60 60&quot;&gt;<br />
	&lt;circle cx=&quot;0&quot; cy=&quot;0&quot; r=&quot;12&quot;/&gt;<br />
	&lt;circle cx=&quot;30&quot; cy=&quot;30&quot; r=&quot;12&quot;/&gt;<br />
	&lt;circle cx=&quot;60&quot; cy=&quot;60&quot; r=&quot;12&quot;/&gt;<br />
	&lt;circle cx=&quot;0&quot; cy=&quot;60&quot; r=&quot;12&quot;/&gt;<br />
	&lt;circle cx=&quot;60&quot; cy=&quot;0&quot; r=&quot;12&quot;/&gt;<br />
&lt;/svg&gt;<br />

<br />
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;60px&quot; height=&quot;60px&quot; viewBox=&quot;0 0 60 60&quot;&gt;<br />
	&lt;circle cx=&quot;0&quot; cy=&quot;0&quot; r=&quot;12&quot;/&gt;<br />
	&lt;circle cx=&quot;30&quot; cy=&quot;30&quot; r=&quot;12&quot;/&gt;<br />
	&lt;circle cx=&quot;60&quot; cy=&quot;60&quot; r=&quot;12&quot;/&gt;<br />
	&lt;circle cx=&quot;0&quot; cy=&quot;60&quot; r=&quot;12&quot;/&gt;<br />
	&lt;circle cx=&quot;60&quot; cy=&quot;0&quot; r=&quot;12&quot;/&gt;<br />
&lt;/svg&gt;<br />

関連記事