Hacker News Reader

Comment by jackmoore | Hacker News Reader

Can someone tell me why SVGs are gigantic while first loading? I often see this even at modern connection speeds.

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.

Because people who write SVG's usually don't know about the viewBox property[0]. They just use illustrator to draw the shape and then export it.

[0]https://sarasoueidan.com/blog/svg-coordinate-systems/

> 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).

I think your designer may have taken "pixel perfect" a little too literally.

Lots of <rect>'s in that SVG :D

I wonder how big can the SVG DOM be in browsers before things start to get painfully slow

They really don't have to be [0].

Usually happens with SVGs whose internal dimensions differ wildly from the display dimensions.

e.g. Internal canvas of 1000px x 1000px, display size of 10px.

[0] https://oddsquare.surge.sh/10/

Reply on news.ycombinator.com