Inline SVG for Sass.

Sassier Example

This shows how you can use nesting and variables to create complex SVG shapes.

@import 'path/to/sass-svg';

$sass-color: #CC6699;

.sass {
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;

  @include svg((
    x: 0px,
    y: 0px,
    viewBox: 0 0 410.9 410.9,
    'xml:space': preserve
  )) {
    @include svg('path', (
      fill-rule: evenodd,
      clip-rule: evenodd,
      fill: $sass-color,
      d: 'M205.4,0c113.5,0,205.4,92,205.4,205.4c0,113.5-92,205.4-205.4,205.4C92,410.9,0,318.9,0,205.4 C0,92,92,0,205.4,0L205.4,0z'
    ));

    @include svg('g') {
      @include svg('path', (
        fill: white,
        d: 'M334.3,87.9c-9.3-36.5-69.8-48.5-127.1-28.1c-34.1,12.1-71,31.1-97.5,55.9c-31.5,29.5-36.6,55.2-34.5,65.9 c7.3,37.9,59.2,62.6,80.5,81v0.1c-6.3,3.1-52.3,26.4-63.1,50.2c-11.4,25.1,1.8,43.1,10.5,45.6c27,7.5,54.7-6,69.6-28.2
        c14.4-21.4,13.2-49.1,6.9-62.9c8.6-2.3,18.7-3.3,31.4-1.8c36,4.2,43.1,26.7,41.8,36.1c-1.4,9.4-8.9,14.6-11.4,16.2
        c-2.5,1.6-3.3,2.1-3.1,3.3c0.3,1.7,1.5,1.6,3.6,1.3c3-0.5,18.9-7.7,19.6-25c0.9-22.1-20.3-46.8-57.7-46.1
        c-15.4,0.3-25.1,1.7-32.1,4.3c-0.5-0.6-1-1.2-1.6-1.8c-23.2-24.7-66-42.2-64.1-75.4c0.7-12.1,4.9-43.9,82.2-82.4
        c63.4-31.6,114.1-22.9,122.9-3.6c12.5,27.5-27.1,78.7-93,86.1c-25.1,2.8-38.3-6.9-41.6-10.5c-3.5-3.8-4-4-5.3-3.3
        c-2.1,1.2-0.8,4.5,0,6.5c2,5.1,10,14.2,23.8,18.7c12.1,4,41.5,6.2,77.2-7.6C312.3,166.7,343.4,123.8,334.3,87.9z M164.6,273.9
        c3,11.1,2.7,21.4-0.4,30.7c-0.3,1-0.7,2.1-1.1,3.1c-0.4,1-0.9,2-1.3,3c-2.4,4.9-5.6,9.6-9.5,13.8c-11.9,13-28.6,17.9-35.8,13.8
        c-7.7-4.5-3.9-22.8,10-37.5c14.9-15.7,36.3-25.9,36.3-25.9l0-0.1C163.3,274.6,164,274.2,164.6,273.9z'
      ));
    }
  }
}

Result: