Creating SVG with CodePen.io

August 6, 2014Category: WebTags: ,

Over the past few days, I’ve been exploring the SVG image format, and I converted my own logo, with great results. I decided to try my hand at a more complex logo, and I decided that instead of typing, saving, and refreshing the browser, I’d use Codepen.io. I chose this testbed over my normal JSFiddle.net testbed due to it’s live updating capability.

I’ll go into detail another time about the new logo, but suffice to say I got it working. However, to test in a webpage, I really wanted to just take the ‘pen that I’d created and embed it as an SVG. They have a nifty feature where you can write JS or CSS in one ‘pen, and embed the whole ‘pen into another. Turns out this wonderful feature doesn’t work with inline SVGs though. It would be a great feature to have, though, I think. Apparently the creators of CodePen agree (and are also VERY timely with feature request responses. The ability to embed inline SVG ‘pens into another ‘pen is now on the feature shortlist!

svgcodepen1