Could using a bunch of SVG icons in a repeating group explain slow load times? I have a repeating group of 4 x 3 that is getting 10-15 second load times and I’m trying to localize the issue. I have a condition that shows a particular group/icon based on the current cell’s data (i.e. so 12 groups which each include an SVG icon and a text element pulling from the DB w/ 1 “yes/no” filter on the repeating group). The filter doesn’t seem to be the issue, as I tried pulling that out first. Before I go swapping out all the images or trial-and-error reworking my database architecture/workflows, would be great if anyone has a perspective on this?
I think it’s the SVG file type - why don’t you try a few PNG’s instead and see if that makes a difference before doing anything drastic?
I use a few complex SVG’s (illustration, quite a few colors, opacity etc) and haven’t had any performance problems.
To clarify, your svgs are loaded on page load and are conditionally triggered to display when you pull a thing and it passes a boolean?
Could you turn off the conditional which loads the svg while keeping the rest of the workflow intact?
Or, as @john3 suggested, replace the icon with a png or possibly a [fa] fa-fontawesome [/fa] text or icon element?
On the other hand, I assumed it was my kids hogging all the bandwidth, but I’ve been experiencing bad connections all day. Maybe your interwebs are broke too 
Right – sounds like I’ll have to do some trialing and report back. I hadn’t processed the SVG thing initially but have read in StackOverflow and elsewhere that SVG does load slower than PNG. And yes, there’s always the question mark of whether this is Emmanuel’s trying to push the dedicated plan by slowing down app speed as complexity grows haha.
You better believe it - NY’s expensive! 
SVG typically loads way faster than PNG. Especially for things like icons, where you only have a few vector points and maybe 2 solid color fills.
How are you displaying the svg? I always just use an html element and copy paste the code there. Also if you’re using older versions of illustrator, I vaguely remember their svg output being really bloated.
Yea - grab the code starting with the svg tag…make sure you get the brackets and everything.
if the tags are all empty, you can cut them out (to clean it up a little bit)
Those path tags are vector points. Essentially it tells the browser the dimensions of a canvas then gives mathematical vector points and paths with colors and fun stuff like that. The browsers engine renders it.
It looks pretty big but typically it’s a lot smaller than a raster image.
Also, (this is the s part in svg) because the illustration is made up of vector points, you can get all crazy with sizing them and they never lose quality. Which is super legit.
1 Like
Very beginner w/ html, css, js – are you saying use an html element and include all of this? This is the output in my notepad/visual studio. Some of this looks a bit messy & foreign…
Stupid internet went out again. Freakin’ kids. I’m thinking of buying one of those claw machines and locking their devices in them. They’ll be begging for more chores! 
Anyways, the edit was supposed to be the reply.
Good to know about the svg and flaticon.
Cool, thank you! - will give this a try and report back on any speed changes. For anyone that is trying to figure out what the XML tag is doing there (as I was) – this link explains it http://www.w3schools.com/xml/xml_syntax.asp. Scroll to the section on The XML Prolog
Unless I misread your instructions, I couldn’t get the HTML element to load with just the SVG tag which I extracted from one of the Flaticon files. Are you sure it doesn’t need any additional tags?
Thanks! I got it to work, and things seem to be moving a bit faster (although I did a few changes, so hard to localize if svg via html is the cure – poor debugging habits on my part).
Changing the pixel sizes right away to the correct size made it fit. Guess the standard icon image was huge. If nothing else, this seems like the most consistent way to get good resolution + loading times if icon isn’t already offered in bubble. @emmanuel any difference between image loading time & quality on standard bubble icons vs svg? Wondering if good practice to have different image types for different icons that sit next to each other on a page or if it doesn’t matter really.
I’m not aware of such difference.
If your SVG has related PNGs to it. Where do you place the PNGs in Bubble?
Normally they are in a subfolder /img/
Thanks
Do you mean if you want to display PNGs at, for example, certain screen resolutions and SVGs for other resolutions? Or are you asking how to place SVGs in your editor (and where they’re stored)?
Sorry, I’m not 100% on your question.
Thanks for getting back,
I trying to display SVG in an HTML element but the SVG references some PNGs. Since in Bubble I don’t access to a directory, where would the PNGs go.
Example:
image preserveAspectRatio=“none” x=“0” y=“0” width=“500” height=“400” xlink:href=“img/someImage.png” /
In bubble where do I place “someImage.png”?
Oh I see!
We have access to the root directory now! If you still can’t get it to work as expected, you could start a new topic and I’d be happy to give it a try.
Thanks I will try that and see. These files in the root are public and cannot be made private, correct?