It’s just data

Recreational SVG

Mark Pilgrim: Inspired somewhat by Sam’s SVG graphics

I’ve certainly been having a lot of fun with SVG.  It fits in the rather mindless activity that I call recreational programming and works well with my preferred development environment.  Excellent for work avoidance.

The process is straightforward.  First I embed the original image into an SVG document.  Then I resize it, trace some of the major areas, replace some of the constructs with paths, adjust color and widths and positions to taste, and finally remove the original image.

Paths are simple plotting commands: Move, Lineto, Arc, and Cubic Bézier Curves are the most common.  I try to keep to Diophantine coordinates as much as possible, as most diagrams don’t need seven digits of precision.


You really use VI for that?  How geeky of you!
Why not use Inkscape?  (I guess the analogy is why use Eclipse when you have to program in Java....)

Posted by matt at

You really use VI for that?

Yes.

Why not use Inkscape?

Sometimes I start with an initial rough draft, either in Inkscape or generated by use  POTrace.  But view source on this page and compare it to the original to see the difference hand crafting makes.

(I guess the analogy is why use Eclipse when you have to program in Java....)

When I program in Java, I use vim.

Posted by Sam Ruby at

What is F5?

Posted by Justin Watt at

I’m similarly cursed with having my Cerebellum hard-wired to vi. I curse Bill Joy most every day.

Posted by Paul Downey at

What is F5?

It’s the key on the top of your keyboard between F4 and F6, but that’s not important right now.  :-)

Posted by Sam Ruby at

Since ‘F5’ came off my slides I feel obligated to explain that it’s the ‘refresh’ key for your browser.

Posted by Joe at

More fun with SVG

They (whomever ‘they’ might be) say you learn something new every day. (I suppose if you have memory problems it might actually be the same new thing repeatedly.) Sure enough, I learned about the SVG element from Sam Ruby’s blog post about...

Excerpt from The Rodent's Burrow at

Sam Ruby: Recreational SVG

[link]...

Excerpt from del.icio.us/tag/svg at

Links

We’re doomed. Doomed Kansas rediscovers science. And it’s a beautiful thing. But let’s not gloat. At least it’s keeping the squirrels out. Mark dives into creative commons. Wonderful morphing art, music, and things learned by...

Excerpt from Just Shelley at

Shelley Powers: Links

We’re doomed. Doomed Kansas rediscovers science. And it’s a beautiful thing. But let’s not gloat. At least it’s keeping the squirrels out. Mark dives into creative commons. Wonderful morphing art, music, and things learned by middle age: Someone...

Excerpt from Planet Identity at

About this blog (3): Decisions

This is the third post in the ‘about this blog’ series: Decisions. Before starting this blog I had to make a few decisions. Some of them were easy to make, others were not so easy to make. The first decision was which blogging sofware to use. I...

Excerpt from A Million Thoughts at

Sam Ruby seems to practice recreational SVG. Steffen, the only person I know who regularly writes SVG by hand, tells me that he is insane....

Excerpt from Unicast at

Apologies, another thread necro.

WebKit on Mac OS X doesn’t render your SVG logo correctly - it renders the black background, but then only the first horizontal bar.

If I modify it to the following, it renders nicely - though I have no idea how ugly my SVG hack is at this time:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
<g stroke-width="12" stroke="#000">
  <g id="svgstar" transform="translate(50,50)">
  <path id="svgbar" d="M-27-5a7,7,0,1,0,0,10h54a7,7,0,1,0,0-10z"/>
  <use xlink:href="#svgbar" transform="rotate(45)"/>
  <use xlink:href="#svgbar" transform="rotate(90)"/>
  <use xlink:href="#svgbar" transform="rotate(135)"/>
  </g>
</g>
<g fill="#FB4" transform="translate(50,50)">
  <use xlink:href="#svgbar" />
  <use xlink:href="#svgbar" transform="rotate(45)"/>
  <use xlink:href="#svgbar" transform="rotate(90)"/>
  <use xlink:href="#svgbar" transform="rotate(135)"/>
</g>
</svg>

Hope this helps someone - is it a bug that I should submit to Apple, or is your original SVG logo using a shortcut that works outside the spec?

Posted by Alex Satrapa at

Book Links

Updated URLs from the book (a work in progress): Chapter 1 Sam Ruby’s SVG Graphics writing [link] Tripod sites [link] US Government’s Section 508 guidelines, in the book at...

Excerpt from Painting the Web at

Book Links

Updated URLs from the book (a work in progress): Chapter 1 Sam Ruby’s SVG Graphics writing [link] Tripod sites [link] US Government’s Section 508 guidelines, in the book at...

Excerpt from Book notes at

More fun with SVG

Can’t render embedded SVG object They (whomever ‘they’ might be) say you learn something new every day. (I suppose if you have memory problems it might actually be the same new thing repeatedly.) Sure enough, I learned about the SVG element from...

Excerpt from More fun with SVG at

Add your comment