Two reasons come to mind: It's likely that the designer providing the SVG logo scales the logo completely arbitrarily, which might be 1000 pixels wide. The CSS `width:10px` in another file hasn't loaded yet, so the <img> tag holding the SVG uses the absolute size of the SVG file. Another possibility is that a flexbox or similar grid system is used, and the container holding the <img> tag is told to stretch its contents to the full width of the flex item. If the content in the following flex item is very large, the SVG will be compressed to the proper small size, but if there is no content loaded yet in the following flex item, the flexbox will stretch just the first item.
Thanks, looked into it further on my own project and found my specific issue. The svg width and height attributes were missing from my webpack-built bundle even though they were part of the source svg file. The svg loader I was using (svg-inline-loader) was stripping with and height by default.
> They just use illustrator to draw the shape and then export it.
You're lucky. Last designer I asked to provide a SVG image had obviously exported from a vector drawing tool to a bitmap, AND THEN converted to SVG. So you kinda had a whole SVG object for each pixel.
It never occurred to him that a 40 MB SVG file might indicate a problem (when the point of having a vector format was partly to save memory).