0

I have a project in Angular1.x using a lot of SVG files.

I have no idea what to do to SVG files to prepare them for production.

I don't want my page to invoke 50 calls to different SVG files. So what are my options and which tools do I have to accomplish them?

I use npm scripts to build my project.

Jonathan Eunice
  • 9,830
guy mograbi
  • 659

1 Answers1

2

You handle SVG files the same way you'd handle other web assets:

  1. In your build process, optimize ("minify") the files so they do not needlessly consume extra space or bandwidth. Tools like svgo do this trick. And there are already easy integrations into many build chains, such as gulp.

  2. Store them, if possible, on a content delivery network so that clients requesting these files hit a large, scalable network and storage resource, not your server. There is a cost to this, but generally a much lower one that serving all those HTTP GET requests from your main web server. (This step is highly, highly, ever so highly recommended for all image and other static assets; it often leads to large improvements in site load latency and site scalability.)

  3. You can consider bundling them, either embedded within HTML files, or in a data file such as a JSON resource. There is, however, no "one size fits all" bundling strategy. It depends on the size of the files and how they are used. Embedding/bundling strategies are usually not a transparent, trivial step. Finally, if you minify and CDN-offload the assets, the need for bundling is generally much reduced. If you do decide bundling is the way to go, look to your existing production packaging system. Tools like webpack often support specific bundling options, such as data URIs.

  4. Finally, consider SVG bundling as a refinement, to be handled after other build-process and packaging issues are solved and sorted. Your site can run just fine with a lot of image requests, and there are easy ways to optimize image requests (e.g. CDN offloading). The issues surrounding the rest of the build pipeline IME dwarf the issues associated with SVG per se. Get your horse and buggy in operation before worrying about how neatly trimmed the buggy is.

Jonathan Eunice
  • 9,830