• started looking at how SVG and CSS complete each other
• SVG can be use to extend the capabilities of CSS
• there are seven ways to include SVG on a web page
• there are tools for using SVG
• there is no reason not to use SVG on websites today
• Sara is interested in how people are using SVG, which of the seven ways
• SVG background sprites are inflexible, each new colour must be created in the sprite sheet
• the use, defs ,g and symbol elements allows you to change the colour and make other variations with CSS
• the viewBox attribute is required for making SVG’s responsive, so make sure it’s there
• the use element cloned into the shadow dom, it can’t be accessed via CSS selectors
• to style the element on a cloned SVG you need to set the style using CSS variables and define the variable on the use element.

use {
  --primary-color: blue;
  --secondary-color: red;
}

// variables are used to style the SVG

• undefined variables will use the default fallback colour, see Sara’s article on Styling SVG using use.
• don’t use icon fonts!
• while icons can be styled in CSS, you can only style them using the font styles. It’s limited.
• SVG allows multiple colours, it’s sharper
• Web fonts can be blocked by ad-blockers, this can affect icon font and the user may end up getting unrelated emoji
• Icon fonts are not accessible
• SVG icons have accessibility backed in
• Use Grumpicon! Support will be extended back to IE6.
• There are plenty of tools around to help you use SVG, the time to switch away from icon fonts has passed
• There are a number of filters available in CSS to alter images
• Use trial and error when trying blend modes, it’s more reliable than knowing what will happen
• CSS filters can be extended to apply SVG filters
• CSS clip paths accept either basic CSS shapes or can take an SVG clipPath element.
• clipPath’s can be animated
• Clipping videos (and other HTML elements) can be done via foreign objects in SVG, but it’s buggy in webkit/blink
• using SVG filters we can create text effects that can’t be created by CSS alone. text-shadow is limited
• As long as the text is not converted to an outline, text within an SVG will be searchable
• SVG will allow you to create advanced poster like layouts without worrying about the flow
• You will need to convert SVG text to outline if you’re using specific, non-websafe fonts. Eg branding types
• You can make an image responsive with a single SVG
• SVG is a replaced element, you are going to need to set a width/height img,object {width:100%} will make it responsive
• The SVG viewport size can be used in media queries, the MQ applies to the SVG’s size only and is essentially an element query