SVG being cut off SVG being cut off google-chrome google-chrome

SVG being cut off


I had similar problem. Try to add css property:

overflow: visible


I had the same problem, turns out there was a clip-path in one of the tags.

<g id="undraw_the_search_s0xf 1" clip-path="url(#clip0)">

If you remove that it should render the full SVG.


The x coordinate on the text element was larger than the width css that was applied to the parent SVG element.

Such a simple problem that had me running in circles for hours.