Scalable Vector Graphics

Scaleable Vector Graphics are used on my example of the Accessible Carousel. Below is supposed to be the pause/start button.

      <button class="rotation pause" aria-label="Stop automatic slide show">
        <svg width="42"
             height="34"
             version="1.1"
             xmlns="http://www.w3.org/2000/svg">
          <rect class="background"
                x="2"
                y="2"
                rx="5"
                ry="5"
                width="38"
                height="24"></rect>
          <rect class="border"
                x="4"
                y="4"
                rx="5"
                ry="5"
                width="34"
                height="20"></rect>
          <polygon class="pause" points="17 8 17 20"></polygon>
          <polygon class="pause" points="24 8 24 20"></polygon>
          <polygon class="play" points="15 8 15 20 27 14"></polygon>
        </svg>
      </button>

What the WikiP page says:

Scalable Vector Graphics (SVG) is an Extensible Markup Language (XML)-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.

Link Symbol in SVG

According to MDN:

Scalable Vector Graphics (SVG) are an XML-based markup language for describing two-dimensional based vector graphics. As such, it's a text-based, open Web standard for describing images that can be rendered cleanly at any size and are designed specifically to work well with other web standards including CSS, DOM, JavaScript, and SMIL. SVG is, essentially, to graphics what HTML is to text.

There is a tutorial on the MDN site.