how to load giant svg file in your react app
I sometimes have giant svg illustrations in my app and it takes a long time to load. my current solution is to just import it and make an image tag in the jsx...I havent found many resources online which go in-depth...but most of them just say that we should implement lazy-loading..is there a better way to load svg files?
4 Replies
you can just have the SVG in a file on your server and reference it using an
<img> tag
there's not going to be a more performant way than that, cause you're leaving pretty much everything to the browserUnknown User•3y ago
Message Not Public
Sign In & Join Server To View
if that's not quick enough, you'll have to either do lazy-loading, or reconsider using the SVG in the first place if it's so big and complicated. If it's slowing the browser down while you're scrolling too, then no amount of lazy-loading will work
svgs are vector files, I'm not sure how a raster image format solves issues with vector images?
oh ok thank you