Using Scalable Vector Graphics (SVG) as Button Backgrounds

Last night I was working on a project where the mockups called for some assymetrical button shapes that were all different sizes. Rather than creating a half a dozen background images for each button length, I wondered if I might just use an SVG or Scalable Vector Graphic file as the background which I could then stretch as needed. As you know, there's no penalty of pixelation when stretching SVGs because they are not based on pixels. This would also save a lot of load time on the site, as I can load one vector image instead of half a dozen pixel-based images.

I created the SVG in Illustrator by creating the shape then simply saving it as an SVG format. Then in the CSS, I referenced that file as the background image for my button. Here's where it got tricky. By nature, SVGs want to preserve their aspect ratio, which is noble. But I specifically wanted to stretch them horizontally only, while maintaining the same height. I tried many variations on background-size, height, width, etc. but I finally found the magic bullet on stackoverflow.com which said, "try removing the width and height attributes on the svg root element, adding preserveAspectRatio="none" viewBox="0 0 1024 800".

Brilliant! So I opened up the SVG file in Sublime Text 2 (any code editor will do, and I straight up hacked it. I simplified the xmlns attribute, removed a lot of the wrapper stuff that Illustrator threw in, and added in the value to tell the SVG to ignore the aspect ratio. The resulting file looks like this:

Button.svg file (also attached as a zip file):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.985 39.412" enable-background="new 0 0 81.985 39.412" xml:space="preserve" preserveAspectRatio="none">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#5F6062"
d="M0.135,0.468c0,0,20.926-0.853,26.982-0.684
s24.589,1.564,24.589,1.564L64.388,0.03l16.326-0.156l-0.131,16.982l1.244,21.055L0,38.83l2.309-17.3c0,0-2.308-8.758-2.14-10.742
C0.719,4.257,0.135,0.468,0.135,0.468z"/>
</svg>

I then wrote up a SASS mixin with some other necessary styles to make it easy to pop in a fancy button whenever I need one.

SASS mixin:

@mixin button
  background-color: transparent
  background-image: url(../images/button.svg)
  background-size: 100% 100%
  border: 0
  padding: 8px 15px
  color: white
  +adjust-font-size-to(18px)

Then in my global.sass file, this is all I need to include:

.svg input.form-submit
  +button

Remember that older versions of IE do not support SVG. You can use Modernizr to add the .svg class to the <html> element, and then you can load the SVG image only when that body class is present.

If you are already loading conditional stylesheets for IE, you can include a different button style there that uses a regular .png image background, a simple background color, or maybe a JS solution that gives IE a hand in rendering SVGs. There are a list of options to choose from depending on what best suites your needs.