Optimise how SVGs are rendered in the control panel

[darylknight]

Description

We're working on a site which has a lot more SVG illustrations than usual. Over time, the editing experience in Craft has got slower and slower, and it's now almost unusable. I've traced this to the site having SVGs - even with 10 on a page, the editor screen slows to a crawl; laggy scrolling, animations for opening/closing Preview and adding matrix blocks render at about 1 frame per second.

I -think- this is because the SVGs are being rendered as <img> tags rather than inline svg code. I can change that on the front end, but I can't affect the control panel. Would you consider changing the way SVGs are rendered in the control panel to improve this?

Removing all the SVGS makes the control panel work at normal speed again.

References:
https://halfelf.org/2016/many-svgs/
http://craftsnippets.com/articles/working-with-svg-images-in-craft-cms-templates

[brandonkelly]

Where exactly? Asset thumbnails use <img> tags.

[darylknight]

On the entry edit page (Something like https://example.com/admin/entries/pages/3, for example). That's my point - using <img> tags is super slow for SVGs, and using <svg> instead would help.

[brandonkelly]

Ah gotcha, I thought you meant the opposite.

Including the SVGs in the source directly would require us to start sanitizing them, which would add its own (server-side) performance hit.

Maybe better if we just start saving SVG thumbnails as PNG files.

[darylknight]

That would probably solve the problem too. Would it require Imagick?

[andris-sevcenko]

@darylknight yeah, unfortunately, GD won't do that.

[darylknight]

No problem, I can deal with installing Imagick if I need to. Any idea if/when you'll add this?

[brandonkelly]

We can try to get this resolved for 3.6, one way or another. Any chance you can zip up all of the SVGs and send them over to support@craftcms.com so we have something to test with?

[darylknight]

Yep, sent! Thank you.

[brandonkelly]

We’ll definitely need to go the PNG route, as embedding the SVGs doesn’t produce great results.

[darylknight]

Yes you're right - I should have mentioned that. We discovered that when we tried to use an inline svg instead of an img that the method we'd used (fill pattern) didn't display properly. Our designer had to re-do all the illustrations to work with the inline tag method on the front end. It would be best if the CMS didn't run into issues like that, so PNGs are probably the better option.

[andris-sevcenko]

Unfortunately, Imagick also botches things up for some PNGs...

Looking into some other options.

[brandonkelly]

We just added a new rasterizeSvgThumbs config setting for Craft 3.6, which you can enable to cause the SVG thumbs to be saved as PNG files. It requires ImageMagick and doesn’t work perfectly with your SVGs, I think due to the complexity, but at least the page loads quickly and the browser is responsive.

[darylknight]

Perfect, thank you!

[brandonkelly]

Craft 3.6 has now been officially released ✨