SVG

# img[src="plus.svg"]

# SVG as Background a.twitter background-image()

• twitter.svg has no fill and the fill color is black by default
• Use this to turn black to any color using CSS filters
• Append brightness(0) saturate(100%) to filter to always convert any color to black and then do the filtering above to convert to the target color

# SVG Sprite

• It's better to strip style tags in sprite.svg and overwrite style using svg.svg--plus-dims

        svg.icon-goldstar {
          fill: gold;
          stroke: currentColor; /* take the font color */
          stroke-width: 5%;
          stroke-linejoin: round;
        }
      

• fill="currentColor"

## SVG Sprite: External Load

• ../assets/img/sprite.svg#plus
  • should be loaded using svg use
  • For IE11, load polyfill svg4everybody.min.js and svg.js with defer
  • Icons appear black because original style tag inside each symbol in sprite.svg is lost.

## SVG Sprite External Load with CSS Inline

## SVG Sprite External Load with No Style Tag (Best Way)

• This is so far the best way to load SVG sprite.
• For more info on how to specify SVG sprite in parent HTML

## Inline include the sprite.svg

• use[xlink:href="#a--minus"]
• Does not require polyfill
• Icons appear green because original style in each symbol is kept.

## Inline include the sprite.svg which has no style tag

• It seems style cannot be overridden if it's loaded in this way..

## SVG Sprite using symbol can't be loaded in CSS background

• Use g instead of symbol