Webwide is the inclusive forum community for web designers, developers & makers.

Whether you're an enthusiast, in training, or a seasoned pro – you'll fit right in at Webwide. We understand that our community is one of creation which is why we, unlike many other discussion forums, encourage sharing of your own projects and content. Creating a forum account is fast, easy and completely free so you can start participating right away.

Read our Code of Conduct

Free Forum Membership Benefits

  • Participate in hundreds of interesting discussions
  • Network with industry peers and make new connections
  • Show off your own projects and relevant content
  • Get help and feedback for your coding and designs
  • Buy and sell services and resources in the marketplace
  • Participate in our friendly community challenges
  • Earn trophies and work your way up our leaderboards
  • Enjoy exclusive Webwide member discounts and offers
  • ...and so much more!

🔘 Circular text around an image with SVG

Adam

Mr. Webwide
Administrator
Joined
Sep 24, 2019
Messages
1,034
Reaction score
1,070
Points
1,115
Location
United Kingdom
Local Time
Today, 06:51
Credits
9,657
Pronouns
he/him


Had some fun making this, to go as a logo on my blog redesign. Not sure the SVG positioning is as clean as it could be, would be very happy to get any pointers on improving! The codepen demo has some overflow issues as the SVG rotates but this is solved with a wrapper in place.

I couldn't quite work out how to trim all the extra whitespace from the SVG though, everything I tried made the positioning off! Any ideas? Would be great to have this tighter.

Screenshot 2020-05-18 at 17.26.44.png
 
Last edited:
  • Hot
Reactions: sfcgeorge

Gummibeer

Astroneer
Joined
Oct 5, 2019
Messages
926
Reaction score
788
Points
785
Age
27
Location
Hamburg, Germany
Local Time
Today, 07:51
Website
gummibeer.de
Credits
1,726
Real Name
Tom Witkowski
You should definitely use overflow:hidden the body scroll height changes with rotating text.
I would first try to import the SVG into a UI tool to edit vectors and change viewBox in it. After this export it as SVG and cleanup the XML code. Most GUI tools export a lot of crap.
 
Top