這是一個 compass mixin 會使用 SVG 檔案取代文字，不支援 SVG 的瀏覽器自動使用備援 PNG 代替。

_replace-text-with-svg.scss

@mixin replace-text-with-svg($svg-name, $png-name: $svg-name) {
  @include replace-text-with-dimensions($png-name + ".png");
  background-image: none, image-url($svg-name + ".svg");
}

usage.scss

@import "compass";
@import "replace-text-with-svg";

// logo.svg, logo.png 檔案名稱一樣
.logo {
  @include replace-text-with-svg("logo");
}

// logo.svg, logo-small.png 檔案名稱不一樣（RWD 常見）
.logo {
  @include replace-text-with-svg("logo", "logo-small");
}