SVG + CSS: A Designer’s Delight

You’ve probably been using CSS since you began your journey in Web design, and perhaps now you use SVG a little, or a lot, or maybe still not yet. But rather than seeing the two as separate, together they add up to much more than the sum of the parts.

In this session, renowned Web design expert Sara Soueidan looks at some every day problems we all face as Web designers, and some of the patterns and techniques you can use to solve them.

SVG (Scalable Vector Graphics) is an XML-based language that can be used for creating graphics: static images, animations and user interfaces.

SVG supports CSS stylesheets so that you can separate a graphic’s style from its content.

The four main SVG grouping and referencing elements are: <g>, <defs>, <use> and <symbol>.

The <g> element logically groups together related graphical elements: useful for applying styles to sets of elements.

The <defs> elements defines elements to be reused later: useful for defining patterns like gradients and then applying them to other SVG elements.

The <symbol> element groups together elements that define a template that is going to be referenced elsewhere in the document: useful for defining symbols like icons.

The <use> element references any element defined elsewhere in the document: useful for reusing a single element or a group of elements defined with <g>, <defs> or <symbol>.

<symbol> content is cloned in the Shadow DOM and rendered with <use>, with inheritance and CSS Variables used to style the contents of <use>.