Preventing Network(xhr) call with SVG?

Question

I want to include some SVG images in my HTML file. I am using ReactJS and including them by using <img> tag.

<img src="path_to_svg"></img>

Now each of these images, as expected, are causing XHR network requests. I want to prevent XHR requests for performance and security concerns.

What is the best way to achieve this? Should I consider corverting SVG code to Base64, and include the CSS as background?

Why do you have performance and security concerns? There's no reason to as the result will be the same. — Robert Longson, Jun 29 '16 at 18:28
@RobertLongson so basically i want to prevent network calls,for certain reasons — Atishay Baid, Jun 29 '16 at 19:00

score 1 · Answer 1 · edited May 23 '17 at 11:54

I think your two options are to either use data URIs for your images or use sprite sheets.

The problem with data URIs is that your images won't be cached unless the document they're in is cached (HTML file or CSS file). But there are some things you can do to help with that.

The sprite sheet solution won't prevent all your network calls but it will limit it to only one, if that's a viable option.

Preventing Network(xhr) call with SVG?

1 Answers1