内联SVG与CSS后台Sprite

Question

I'm creating a few pages in my app (currently running Angular on my front-end) that each contain a good deal of logos. I'm currently creating directives for each SVG logo (putting the inline SVG code in a template), which makes the code a lot more readable, but due to the number of logos, I'm starting to wonder if it would make more sense to create a CSS sprite instead.

I would appreciate some thoughts from a performance perspective on this. I know CSS background images get cached, so that's a plus. SVG offers me more flexibility if I want to, say, color or size some specific logos differently, but if it's costing me a fair amount in terms of loading time I'd rather opt for the background image.

Answer 1

I'm doing something like this for the company I work for. They have hundreds of images that could easily compress into one SVG sprite. I guess the answer depends on the project, will it get bigger? if yes I think taking the time to implement the sprite sheet now would be a great idea, also you could use it for icons. here is a great article on CSS tricks.

If you will start doing that I recommend using Grunt and implement grunt-svgstore it saves a ton of time creating the sprite sheet for you and it's pretty simple to implement, something like this.

grunt.initConfig({
  svgstore: {
    options: {
      option like prefix ID with 'icon', indentation, etc.
      }
    },
    default : {
      files: {
        'dest/dest.svg': ['svgs/*.svg'], //destination, files to convert
      },
    },
  },
});

Answer 2

TL;DR: From a coding perspective I would say keep things simple, from a UX / UI perspective it depends on your use case.

I would go with the background image unless the interaction with the logos is a key element of the user journey.

If for instance it is there to show the number of clients, their high profile or your status as a result, then an image is fine. You won't be changing it that often and it's not necessary to set up the situation so you can manipulate the logos too much.

If you've got an integral interaction that is using the logos, a user hovers the logo changes colour and then on-click expands and shows more information - then the SVG route makes sense and is probably worth the effort.

---

Keep things user centric - Is the cost in time to you going to gain enough of a user benefit?