Automatically injecting all svgs on a page - is this recommended or are there potential issues?

[Viveur]

Hi Florian, there was a question I previously posted to the original SVGInjector repo that I'm still curious about and wondered if you could help explain the need for the 'inject-me' class.

I previously used another basic script to inline SVG's which did so automatically for any SVG links it found.

Since using SVGinjector I've often wondered (almost every time I write the 'inject-me' class name in fact) whether doing so is redundant for the typical use case.

It would be pretty simple to just set querySelectorAll('svg') but since it isn't mentioned as an option I wanted to ask what the potential pitfalls of doing so could be?

Thanks

[flobacher]

Hi @TheCopartnery , of course you can inject all svgs on a page. I would recommend to queryselectorAll('svg[data-src]'), so that only those svgs are injected, that provide the data-src attribute which is needed for injection. Of course injection is only needed, if you want to be able to style the svgs with the css of your page or need to access elements within the svg via js (for animations, or adding event-handlers only on part of the svg) performance is pretty good, so I didn't ever experience issues even on mobile. hope this helps. regards, flo

[Viveur]

Cheers, that kind of mirrors my thinking and it's really good to hear from someone with more indepth knowledge on the subject.

Also thanks for the suggestion regarding svg[data-src] - sounds like a good direction to take.

[flobacher]

no worries =)