Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add support for SVG fragments in CSS

See original GitHub issue

Hi, first of all thanks for the great plugin, working with SVG icons is much easier with it.

Today, I’ve decided to try to use generated sprite in CSS background property. This technique is supported in most modern browsers, and you can see an example here –

Unfortunately, it seems that the current generated sprite output (specifically, <symbol> element) does not support this functionality. When I add a style declaration like background: url('/icons-sprite.svg#plus') no-repeat; the whole sprite is included, not a single fragment. And when I try to limit it’s size, the sprite is scaled as a whole as well.

I was wondering if it’s possible to extend current configuration options to support the kind of output needed to allow using svg fragments from external sprites in CSS. This is an example of svg sprite which allows to included separate fragments – http://dahlströ

I’m sorry for not providing more constructive feedback, and I hope I’ll have time to investigate the issue further in future. But since you obviously know more about SVGs that I do, I just wanted to plant this thought and maybe discuss it a bit more.

It is entirely possible that I am missing something and this should be working out of the box. I am using 3.0.0 version with webpack 4.


Edit: I’ve decided to add my current config just in case

    new SVGSpritemapPlugin('./src/assets/icons/**/*.svg', {
      output: {
        filename: 'icons-sprite.svg',
        svg4everybody: false,
      sprite: {
        prefix: false,

Edit2: Upon further investigation, I’ve figured out that the only thing missing from output in order to be able to use svg fragments in CSS is style tag which could look similar to the following:

    symbol { display: none }
    symbol:target { display: inline }

Looking at the docs, there’s no way to include such tag in output file, right?

Also, dimensions of fragments included in CSS seem to be affected by width and height attributes on <use> element in the sprite. Here’s the same icon used as background with the following properties

  background-image: url('/icons-sprite.svg#alert');
  background-size: 100px;

with <use xlink:href="#alert" width="28" height="24"/>: image and with <use xlink:href="#alert" />: image

As you can see, when attributes are in place, icon is much smaller than expected size. Also, removal of width/height doesn’t seem to have any negative effect (I’ve checked usage in HTML and CSS).

I’d like to hear you thoughts on the matter.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:8 (5 by maintainers)

github_iconTop GitHub Comments

stasgavrylovcommented, Dec 11, 2018

@cascornelissen finally managed to test your approach. Thank you, fragments work great! I’m closing the issue.

cascornelissencommented, Dec 7, 2018

No problem at all 😄 Thanks for the update!

Read more comments on GitHub >

github_iconTop Results From Across the Web

How SVG Fragment Identifiers Work
One way to do this is to lay out the SVG (sprite, I guess, let's just call it a sprite) like a graphical...
Read more >
How to create an svg sprite which supports fragment ...
Is there a tool that creates from random SVGs a sprite where the icons are aligned one under the other with adjusted viewBoxes...
Read more >
SVG fragment identifiers | Can I use... Support tables for ...
Method of displaying only a part of an SVG image by defining a view ID or view box dimensions as the file's fragment...
Read more >
Three different approaches to creating an icon library using ...
Approach 2: SVG sprites & fragment identifiers — this approach involves creating an SVG sprite and using <views> and fragment identifiers to set ......
Read more >
SVG: Scalable Vector Graphics - MDN Web Docs - Mozilla
Chrome Edge svg Full support. Chrome1. Toggle history Full support. Edge... baseProfile. Deprecated Full support. ChromeYes. Toggle history Full support. Edge... contentScriptType. Deprecated No support. ChromeNo....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found