CODEWITHSUNDEEP
javascripthtmlcssgoogle-mapssvg
BartManVSBatMan
BartManVSBatMan

Reputation: 39

Splitting an SVG into Multiple SVGs

I have an SVG that I am overlaying on a Google Map. The SVG is 50mb large, so it takes 10 seconds or so to load in the browser.

I can get the SVG split into 171 separate SVG files that make up this big SVG. What is my best strategy to improve load time? I am trying to keep a high resolution at lower zoom levels.

Things I have tried -Converting Image to PNG and JPG- resolution is not adequate -Optimizing SVG File- still can't reduce it enough to impact load time

Things I am thinking about trying - layer SVGs in a certain order on page load, grass first, then cars, then buildings (although with so many, I really do not want to do this) - there is a library called PolyMaps, not sure if this could help -utilizing GZIP format of the SVG, but I am not sure what the best way to do this would be to achieve the desired result or how i would do that

Basically, I am just looking from some general direction from devs more experienced with loading a large amount of SVGs onto the google maps api/canvas

this is for an interactive map, there are infowindows that are custom and are already created(not svg), and as of right now, just using standard marker icons(svg). besides the infowindows and markers its really as simple as overlaying a lot of svg data onto the map, Any help would be appreciated.

thanks

Upvotes: 1

Views: 2141

Answers (1)

BartManVSBatMan
BartManVSBatMan

Reputation: 39

i ended up layering the smaller svgs in the file and completely removing any of the larger ones that I didn't absolutely need.

Upvotes: 1

Related Questions