2.6.2 base.embedded.svg Scalable vector

Toggle example guides Toggle HTML markup

A <svg> element represents an image encoded as a Scalable Vector Graphic.

Example

A svg image that is inline with other text.

A svg inside a figure.
Markup: 01-base/embedded/embedded-svg.twig
<p>A svg image <svg fill="#000000" height="14" viewBox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/>
    <path d="M0 0h24v24H0z" fill="none"/>
  </svg> that is inline with other text.</p>

<figure style="width: 50%; max-width: 300px;">
  <figcaption>A svg inside a figure.</figcaption>
  <svg width="300px" height="250px" viewBox="0 0 60 50" xmlns="http://www.w3.org/2000/svg">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <rect x="0" y="0" width="60" height="50"></rect>
      <g transform="translate(15.000000, 10.000000)" fill="#29abe2">
        <g>
          <path d="M17.5625,15.9375 C17.0625,15.9375 16.8125,15.9375 16.75,16 L16.0625,16.0625 L16,16.75 C16,16.9375 15.625,20.8125 17.875,23.125 C19.375,24.625 21.1875,25.5 22.6875,25.5 C23.5,25.5 24.1875,25.25 24.6875,24.75 C26.125,23.3125 25.4375,20.25 23.0625,17.875 C21.4375,16.1875 18.9375,15.9375 17.5625,15.9375 L17.5625,15.9375 Z M23.5625,23.5 C23.375,23.6875 23.0625,23.75 22.6875,23.75 L22.6875,23.75 C21.875,23.75 20.4375,23.25 19.0625,21.8125 C17.875,20.625 17.625,18.5625 17.625,17.5 C18.75,17.5 20.6875,17.75 21.9375,18.9375 C22.8125,19.8125 23.4375,20.8125 23.6875,21.6875 C23.9375,22.5625 23.875,23.1875 23.5625,23.5 L23.5625,23.5 Z" id="Shape"></path>
          <path d="M7.125,12.3125 C8.8125,14 11.3125,14.25 12.6875,14.25 C13.125,14.25 13.4375,14.25 13.5,14.1875 L14.1875,14.125 L14.25,13.4375 C14.25,13.25 14.625,9.375 12.375,7.0625 C10.875,5.5625 9.0625,4.6875 7.5625,4.6875 C6.75,4.6875 6.0625,4.9375 5.5625,5.4375 C4.8125,6.1875 4.625,7.3125 4.9375,8.5625 C5.25,9.875 6,11.1875 7.125,12.3125 L7.125,12.3125 Z M6.6875,6.625 C6.875,6.4375 7.1875,6.375 7.5625,6.375 C8.375,6.375 9.8125,6.875 11.1875,8.3125 C12.375,9.5 12.625,11.5625 12.625,12.625 C11.5,12.625 9.5625,12.375 8.3125,11.1875 C7.4375,10.3125 6.8125,9.3125 6.5625,8.4375 C6.3125,7.5625 6.375,6.9375 6.6875,6.625 L6.6875,6.625 Z"></path>
          <path d="M14.25,16.6875 L14.1875,16 L13.5,15.9375 C13.4375,15.9375 13.1875,15.875 12.6875,15.875 C11.3125,15.875 8.8125,16.125 7.125,17.8125 C4.75,20.1875 4,23.1875 5.5,24.6875 C6,25.1875 6.6875,25.4375 7.5,25.4375 C9,25.4375 10.8125,24.5625 12.3125,23.0625 C14.625,20.75 14.25,16.875 14.25,16.6875 L14.25,16.6875 Z M12.625,17.5625 C12.625,18.625 12.4375,20.625 11.1875,21.875 C9.75,23.3125 8.375,23.8125 7.5625,23.8125 L7.5625,23.8125 C7.1875,23.8125 6.875,23.6875 6.6875,23.5625 C6.125,23 6.375,21.0625 8.3125,19.0625 C9.5,17.8125 11.5,17.625 12.625,17.5625 L12.625,17.5625 Z"></path>
          <path d="M16,13.4375 L16.0625,14.125 L16.75,14.1875 C16.8125,14.1875 17.125,14.25 17.5625,14.25 C18.9375,14.25 21.4375,14 23.125,12.3125 C24.25,11.1875 25.0625,9.875 25.375,8.625 C25.6875,7.3125 25.5,6.1875 24.75,5.5 C24.25,5 23.5625,4.75 22.75,4.75 C21.25,4.75 19.4375,5.625 17.9375,7.125 C15.625,9.375 16,13.25 16,13.4375 L16,13.4375 Z M17.625,12.5625 C17.625,11.5 17.8125,9.5 19.0625,8.25 C20.5,6.8125 21.875,6.3125 22.6875,6.3125 C23.0625,6.3125 23.375,6.4375 23.5625,6.5625 C23.875,6.875 23.9375,7.5 23.6875,8.3125 C23.4375,9.25 22.8125,10.1875 21.9375,11.0625 C20.75,12.3125 18.75,12.5625 17.625,12.5625 L17.625,12.5625 Z"></path>
          <path d="M26,11.5625 L25.8125,11.5 L25.6875,11.6875 C25.4375,12 25.25,12.3125 24.9375,12.625 L24.5625,13.0625 L25.125,13.125 C27.125,13.375 28.3125,14.3125 28.3125,15.0625 C28.3125,15.8125 27.125,16.75 25.125,17 L24.5625,17.0625 L24.9375,17.5 C25.1875,17.8125 25.4375,18.125 25.6875,18.4375 L25.8125,18.625 L26,18.5625 C28.4375,18.0625 30,16.6875 30,15.0625 C30,13.4375 28.4375,12.0625 26,11.5625 L26,11.5625 Z"></path>
          <path d="M4.5,18.625 L4.625,18.4375 C4.8125,18.125 5.0625,17.8125 5.375,17.5 L5.75,17.0625 L5.1875,17 C3.1875,16.75 2,15.8125 2,15.0625 C2,14.3125 3.1875,13.375 5.1875,13.125 L5.75,13.0625 L5.375,12.625 C5.125,12.3125 4.875,12 4.625,11.6875 L4.5,11.5 L4.3125,11.5625 C1.875,12.0625 0.3125,13.4375 0.3125,15.0625 C0.3125,16.6875 1.875,18.0625 4.3125,18.5625 L4.5,18.625 L4.5,18.625 Z"></path>
          <path d="M17.5625,24.875 L17.125,24.5 L17.0625,25.0625 C16.8125,27.0625 15.875,28.25 15.125,28.25 C14.375,28.25 13.4375,27.0625 13.1875,25.0625 L13.125,24.5 L12.6875,24.875 C12.375,25.125 12.0625,25.375 11.75,25.625 L11.5625,25.75 L11.625,25.9375 C12.125,28.375 13.5,29.9375 15.125,29.9375 C16.75,29.9375 18.125,28.375 18.625,25.9375 L18.6875,25.75 L18.5,25.625 C18.1875,25.375 17.875,25.125 17.5625,24.875 L17.5625,24.875 Z"></path>
          <path d="M12.6875,5.3125 L13.125,5.6875 L13.1875,5.125 C13.4375,3.0625 14.375,1.875 15.125,1.875 C15.875,1.875 16.8125,3.0625 17.0625,5.0625 L17.125,5.625 L17.5625,5.25 C17.875,5 18.1875,4.75 18.5,4.5 L18.6875,4.375 L18.625,4.1875 C18.125,1.75 16.75,0.1875 15.125,0.1875 C13.5,0.1875 12.125,1.75 11.625,4.1875 L11.5625,4.375 L11.75,4.5 C12.0625,4.75 12.375,5 12.6875,5.3125 L12.6875,5.3125 Z"></path>
        </g>
      </g>
    </g>
  </svg>

</figure>
Source: 01-base/embedded/_embedded.scss, line 27