Hi,
I have a page whose typescript file loads the content of a large SVG into a DIV in the html using jQuery’s .load function.
The SVG is several thousand lines and 296Kb; it takes 2 seconds to load on an iPhone 7 and 15 seconds to load on a cheap Android phone. The function is called with this.loadMap(); in ionViewDidLoad(). The whole process is executed every time the page is reloaded.
Is there any way to preload the SVG during the loading of the application itself and then have the content of the file instantly available whenever the user goes to the map page?
Thanks!
Hello,
296kB is not really heavy.
Maybe it is a try worth to make a inline svg in your .html or make a own component to see if load function itself is slow.
Maybe the file it self could be reduced, because Vector Programms like Ilustrator etc. add much things, that for displaying not necessary. Online service like https://jakearchibald.github.io/svgomg/ can shrink svg sometimes from 1Mb to less than 100kb.
Best regards, anna-liebt.
Thanks for your reply.
I also didn’t think that 296Kb would be a problem, but it takes a long time on simple Android phones. The script itself loads the SVG data from the external .svg file and injects the whole lot into a holding DIV so it should already be inline. I indeed used SVGOMG to take 40Kb off the filesize 
Ideally the data could be loaded and then stored for use at a moment’s notice rather than being reloaded each time.
Hello,
If I understood it right you load it via a jquery function.
Maybe it is a try worth loading the svg
- from css
- put it directly inline as svg tag
- directly in a component
to see if there is a significant change from used time.
If yes, maybe the jquery function itself is slow.
If no, maybe it is worth taking a deeper look to svg. Maybe it helps to draw it from scratch in a other vector programm (reducing size from 340kb to 300kb is no really very much).
Best regards, anna-liebt