CSS-如何使SVG响应？

Question

I am getting svg data by api call and appending it to div in a DOM. There are 13-14 svg elements I am getting and appending it to a single div . I want to display all this svgs in a row. If I give width: 5.5%; to svg elements, all the svgs display in a row. But when I resize window or monitor size is small, all svgs overlap each other. I've created an example in jsfiddle. Please find this fiddle

I tried with preserveAspectRatio and viewBox in svg but it's not working.

Update: I've updated fiddle. In a default size of resule in jsfiddle, overlapping is visible. I want it to be responsive.

How do I make these svgs responsive so that it doesn't overlap each other?

Answer 1

For these purpose better to use img tag:

<img src="path_to_svg" style="width: 5.5%" />

And in the svg file you should add attribute such as

<svg width="100%" height="100%"> .... </svg>

In this case image will resize as you want.