Why embed SVG?

SVG (Scalabe Vector Graphics) is a visual format used by both graphics editing software and the web. SVGs are scalable - meaning they don’t get blurry when your resize, and they can also contain a nested hierarchy (essentially, images with HTML).

Use an SVG if you want to:

• Embed a set of shapes from graphics editing software (Adobe, Figma) in the highest-resolution way
• If you want to have portions of image change style in response to interaction (i.e. change the color of one square within an image)
• If you want to detect clicks on specific areas of an image without having to do pixel/location calculation

Instructions

Follow the steps below to create an SVG on figma, export, and embed in your website

• Add a new frame on figma

• Add frames within the frame on figma, and name each layer

  

• Export the big frame as an SVG

  • Make sure to choose ‘include “id” attribute” setting

  

• Add the SVG to your HTML See structure below

<object data="./assets/img/imgName.svg" width="300" height="300"> </object>

• Open your webpage, and inspect with DevTools.
  • Subcomponents should be exposed - you shouldn’t just see one SVG, but should be able to expand and see child nodes
• Try styling the SVG with some CSS