CODEWITHSUNDEEP
javascripthtmlsvg
Vecta
Vecta

Reputation: 2350

What purpose does injecting SVGs serve?

I'm currently working on a site for a client that is using this library quite a bit to inject SVGs into each page: https://github.com/iconic/SVGInjector

Most pages on this site include 15+ SVG icons used as icons and I'm trying to minimize the number of requests which injecting doesn't remedy.

I'm considering including these SVGs as inline elements to reduce the number of HTTP requests on each page but I don't understand what the purpose of injecting is over just inlining them to start with. What am I missing?

Thank you!

Upvotes: 2

Views: 128

Answers (1)

ichigolas
ichigolas

Reputation: 7735

Using inline SVG is necessary for some reasons the library README mentions:

  • Using embedded Javascript
  • Being able to style it using CSS

On the other hand, using inline SVG is bad for other [arguable] reasons:

  • If you need you use the same SVG twice, you need to include it twice. Generally speaking, repeating code is not good, as it tends to lead to bugs.
  • SVG in source files produces bloat. It's much better to separate the SVG source in another file.

The library you mention solves these problems by allowing you to store the SVGs in different files, yet be able to use them inline.

Upvotes: 3

Related Questions