1

I am trying to reproduce this image as SVG:

enter image description here

It was made in Photoshop simply by creating a rounded rectangle and setting an inner bevel layer style, downward. (It's a bit hard to see on this site, as it is meant to typically be shown on a darker background, but the beveled border is there.)

Is it possible to reproduce this effect with SVG? I have experimented with setting a stroke with gradient, but it doesn't seem to look correct. I am using Inkscape, but I can also get access to Illustrator or edit the SVG file directly. Any help with getting the border style correct (or close to it) would be most appreciated. Thanks!

Improve this question
4

How I would do it:

  • create your shape (rounded rectangle)
  • duplicate the shape (so it's directly on top)
  • give the one on top a transparent fill and a border color (doesn't matter what border color)
  • adjust the width of the border stroke to be the width of your bevel
  • choose PATH --> OBJECT TO PATH and then PATH --> PATH TO OBJECT
  • your border is now a fillable shape. Give this shape a transparent border
  • fill this shape with a gradient. Adjust the gradient so that it has a narrow transition from light to dark
  • have this gradient's transition bisect at the lower left and upper right

Quick sample done in Inkscape:

enter image description here

Improve this answer
3
  • Thanks @DA01. I am actually able to give a gradient to the stroke without duplicating the object. This works well, but it doesn't quite achieve the same effect. I think if I set a slight blur on it, it is closer on the inner edge, but then I need a mask of some kind to make the outer edge hard. I will keep working on it. Thank you for your advice.
    – Brad
    Feb 17 '12 at 21:59
  • You could do exactly that...give it a blur, then place the entire thing inside a mask to keep the hard outer-edge.
    – DA01
    Feb 17 '12 at 22:12
  • Using this tutorial: en.flossmanuals.net/Inkscape/ClipAndMask I was able to figure out the masking and come close to reproducing the desired effect. Thanks for your assistance!
    – Brad
    Feb 19 '12 at 4:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.