SVG Illustration

Definition

The SVG Illustration component is an SVG image with paths that have classes corresponding to CSS classes with a "fill" property. The component is designed to be used in various design elements, such as messaging screens, buttons, or icons, and can be easily customized to match different color themes in the system. It allows designers and developers to quickly swap out the SVG illustration based on the current context or theme of the design element, while maintaining consistent styling and branding throughout the system.

Additionally, the component should be designed with accessibility in mind, providing proper alt text and using high contrast colors to ensure legibility for users with low vision or color blindness.

Description

The SVG Illustration component can be used to add visual interest and enhance the user experience of different design elements, such as messaging screens, buttons, or icons. The component allows designers and developers to quickly swap out the SVG illustration based on the current theme or context of the design element. For example, if a user encounters a "success" message screen, the SVG illustration can display a checkmark icon with the appropriate primary color for the current theme. Similarly, if a user encounters an "error" message screen, the SVG illustration can display an exclamation mark icon with the appropriate primary color for the current theme.

Accessibility Considerations

it's essential to ensure that the SVG illustrations have proper alt text to provide context for screen readers.

Pair SVG with high contrast colors to ensure that the SVG illustrations are legible and distinguishable for users with low vision or color blindness.

Examples

For full screen examples check out the links below...

Medal Illustration

SVGs are meaningless without the proper accessibility features. Use a title and desc tag linked to an aria-labelledby attribute on the SVG tag to give the SVG a non visual meaning.

<svg
  aria-labelledby="title desc"
  viewBox="0 0 386 340"
  fill="none"
  xmlns="http://www.w3.org/2000/svg">
  <title id="title">Success Medal</title>
  <desc id="desc">A medal with a ribbon and a star in the middle.</desc>
  <g clip-path="url(#clip0_5595_13787)">
    <path
      class="primary-10"
      d="M312.407 302.801C305.97 309.256 299.881 313.419 295.07 316.708C238.512 355.369 171.59 344.1 157.367 341.347C136.365 337.284 95.7664 329.428 66.4151 296.545C22.0082 246.794 28.9239 168.414 63.3683 116.674C69.6685 107.21 102.949 54.6819 170.592 46.2586C211.529 41.161 259.248 51.4429 293.805 79.0246C366.343 136.922 361.179 253.884 312.407 302.801Z"></path>
    <path
      class="primary-50"
      d="M146.173 166.24C146.228 169.171 115.468 233.871 101.054 264.019C98.4486 269.47 103.859 275.292 109.485 273.097L143.271 259.915C146.02 258.842 149.147 259.707 150.955 262.042L175.919 294.273C179.465 298.852 186.76 297.035 187.747 291.326L206.738 181.37L146.173 166.24Z"></path>
    <path
      class="primary-50"
      d="M249.621 164.285C249.676 167.216 282.856 230.707 298.397 260.29C301.206 265.639 296.019 271.661 290.315 269.68L256.057 257.782C253.268 256.814 250.176 257.797 248.457 260.197L224.727 293.349C221.355 298.059 213.997 296.518 212.796 290.851L189.67 181.69L249.622 164.284L249.621 164.285Z"></path>
    <path
      class="primary-100"
      d="M267.966 178.062C305.7 140.311 305.7 79.1049 267.966 41.3541C230.233 3.60333 169.055 3.60332 131.322 41.3541C93.5889 79.1049 93.5889 140.311 131.322 178.062C169.055 215.813 230.233 215.813 267.966 178.062Z"></path>
    <path
      d="M254.568 163.701C284.643 133.612 284.643 84.829 254.568 54.7404C224.493 24.6517 175.733 24.6517 145.658 54.7404C115.583 84.829 115.583 133.612 145.658 163.701C175.733 193.79 224.493 193.79 254.568 163.701Z"
      fill="white"></path>
    <path
      class="primary-50"
      d="M200.588 172.227C235.1 172.227 263.077 144.236 263.077 109.708C263.077 75.1796 235.1 47.189 200.588 47.189C166.075 47.189 138.098 75.1796 138.098 109.708C138.098 144.236 166.075 172.227 200.588 172.227Z"></path>
    <path
      class="primary-100"
      d="M200.684 161.777C229.465 161.777 252.797 138.434 252.797 109.639C252.797 80.8444 229.465 57.5015 200.684 57.5015C171.902 57.5015 148.57 80.8444 148.57 109.639C148.57 138.434 171.902 161.777 200.684 161.777Z"></path>
    <path
      d="M198.598 85.8541C199.197 84.0115 201.803 84.0115 202.402 85.8541L206.674 99.002C206.942 99.8261 207.71 100.384 208.576 100.384H222.401C224.338 100.384 225.144 102.863 223.576 104.002L212.392 112.128C211.691 112.637 211.398 113.54 211.666 114.364L215.938 127.512C216.536 129.355 214.427 130.887 212.86 129.748L201.676 121.622C200.975 121.113 200.025 121.113 199.324 121.622L188.14 129.748C186.573 130.887 184.464 129.355 185.062 127.512L189.334 114.364C189.602 113.54 189.309 112.637 188.608 112.128L177.424 104.002C175.856 102.863 176.662 100.384 178.599 100.384H192.424C193.29 100.384 194.058 99.8261 194.326 99.002L198.598 85.8541Z"
      fill="#D9D9D9"></path>
  </g>
  <defs>
    <clipPath id="clip0_5595_13787">
      <rect
        width="385.304"
        height="339.674"
        fill="white"
        transform="translate(0 0.326172)"></rect>
    </clipPath>
  </defs>
</svg>

Hide

Resources

See also icons page for SVG icons