Skip to main content
Participating Frequently
May 22, 2018
Answered

How to create vector hollow rounded rectangle without the use of stroke

  • May 22, 2018
  • 3 replies
  • 1757 views

This might be outside the scope of the program, but I have this super minimalist camera that I'm using to learn how to manipulate SVG for web. In order to use the image as a clipping path in HTML I need to define the rounded rectangle around the outside as a shape, not a path with a border. olSrDyn.png

I'm very new to vector editing.

This topic has been closed for replies.
Correct answer davescm

Draw your first outer rectangle and fill with the angle gradient

Now Alt-Click on the path to duplicate it and in the options bar set path operations to subtract front shape

With the duplicate path selected use Edit - Transform Path -Scale to reduce the size of the front path. After hitting enter to accept the change you will need to adjust the roundness of the corners on the inner shape (in may example the outer corners were set to 60px but the inner corners set to 20px

That is it - done

Dave

3 replies

davescm
Community Expert
davescmCommunity ExpertCorrect answer
Community Expert
May 22, 2018

Draw your first outer rectangle and fill with the angle gradient

Now Alt-Click on the path to duplicate it and in the options bar set path operations to subtract front shape

With the duplicate path selected use Edit - Transform Path -Scale to reduce the size of the front path. After hitting enter to accept the change you will need to adjust the roundness of the corners on the inner shape (in may example the outer corners were set to 60px but the inner corners set to 20px

That is it - done

Dave

c.pfaffenbichler
Community Expert
Community Expert
May 22, 2018

Mylenium
Legend
May 22, 2018

You simply draw two paths and subtract the inside one. You might wanan read the relevant sections in the help. That said, people don't use PS for building vector-based content. That would be Illustrator, if at all, or tools like the free Inkscape.

Mylenium