11.7.12

Gradient background with SVG

This is not a discussion about CSS level 3 versus SVG. I'm just exploring the possibilities and this is just an example:
I would like to create a gradient color for a link on a website. It would be smart if it was reusable for more links with different colors.
  1. Create your link. Normally I will set the CSS display property to inline-block:
    a.mylink {
     color: white;
     background-color: orange;
     display: inline-block;
     padding: .6em;
     text-decoration: none;
    }
  2. Create a SVG image, e.g. in svg-edit. If you open the XML editor in svg-edit you can copy the SVG markup.
    <svg xmlns="http://www.w3.org/2000/svg">
     <defs>
      <radialGradient id="svg_3" cx="1" cy="1" r="1.4">
       <stop offset="0" stop-opacity=".7" stop-color="#ffffff"/>
       <stop offset="1" stop-opacity="0" stop-color="#ffffff"/>
      </radialGradient>
     </defs>
     <rect fill="url(#svg_3)" x="0" y="0" width="100%" height="100%" id="svg_1"/>
    </svg>
    As you can see the color of the gradient is white, so opening this document in a browser window would just display a white page. The gradient is used in a rectangel that fills the entire SVG image. The SVG document itself has no size, so it will just fill it's container.
  3. Go to The data: URI kitchen and generate a URI using the type image/svg+xml;charset=utf-8 checkmarking base64 and pasting in the SVG.
  4. Copy the resulting URI into you CSS:
    a.mylink {
     color: white;
     background-color: orange;
     display: inline-block;
     padding: .6em;
     text-decoration: none;
     background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KIDxkZWZzPg0KICA8cmFkaWFsR3JhZGllbnQgaWQ9InN2Z18zIiBjeD0iMSIgY3k9IjEiIHI9IjEuNCI%2BDQogICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3Atb3BhY2l0eT0iLjciIHN0b3AtY29sb3I9IiNmZmZmZmYiLz4NCiAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1vcGFjaXR5PSIwIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8%2BDQogIDwvcmFkaWFsR3JhZGllbnQ%2BDQogPC9kZWZzPg0KICA8cmVjdCBmaWxsPSJ1cmwoI3N2Z18zKSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgaWQ9InN2Z18xIi8%2BDQo8L3N2Zz4NCg%3D%3D');
    }
Post a Comment