Hacker News new | ask | show | jobs
by vortico 3444 days ago
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.
1 comments

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.