Here is a pretty SVG thing I did. If your browser doesn't display it, get a better browser.
I, in fact, created them so that tazfrog could color it in. She has a book full of stuff like that. I noticed that none of the things in her book showed 7-fold symmetry so I set out to use Inkscape to create one for her.
The way I did it has an internal structure that makes it easy for me to create new pictures that also have 7-fold rotational symmetry.
The picture file itself is at http://www.omnifarious.org/~hopper/lj-images/sept-sym-pure.svg. You can look at it with a text editor and see how it's structured. :-)
I'm a big believer in making the data underlying the neat things GUI tools do be structured nicely in various ways. That's why I always write all of my HTML as XHTML and generally don't use GUI tools to write it. I want its internal structure to elegantly represent the semantic structure of the document I'm making.
Oh, also, since I did it using SVG you can print it out at any size or resolution and it will look nice. :-)
SVG = Scalable Vector Graphics. Basically, it's a nice way of describing drawings as a collection of lines and curves so you can show them at any resolution and they look right. Image formats like jpeg will look blocky when you scale them up, and SVG doesn't.
The SVG description of that figure is also a lot shorter and more compact than the jpeg version would be. It's also easier to change.
SVG has been around for awhile and Firefox has supported it for a few years now. It should be safe to use in any browser by now, and if it isn't that's a problem with the browser that never bothered to support it.
I tried several techniques to get it in before resorting to <lj-embed>, but none of them worked. :-( Perhaps if LJ returned XHTML pages instead of HTML 4.01 transitional pages some of them would've. I didn't try the <img> tag, but after your post I fiddled with the content type my webserver was returning and still couldn't get it to work. :-(
That's actually what I put inside the <lj-embed>. I had the distinct impression that LJ would edit out the <object ...> tag otherwise.
Well, it's actually 568x562, so it's no surprise that it has scrollbars at 500x500.
Well, as an <object ...> tag, it's hard to say whether it should scale or not. Clearly it should as an <img ...> tag. And if you put it in as inline stuff it should too.
The thing I would really like in inline SVG is the ability to reference things in the enclosing XHTML document so you can draw lines between them no matter how the browser lays them out.
And I have seen inline SVG work with XHTML documents in Firefox 2 even. I've even made a page or two myself that worked. So, SVG is supported, but the support is very finicky.
It can be translated, but it won't be the same picture really.
It wasn't too hard. I used a nice program called Inkscape to make it. It produces documents in SVG, so you can look at the document structure and see what I did by looking at the following URL in a text editor: http://www.omnifarious.org/~hopper/lj-images/sept-sym-pure.svg
Inkscape also allows editing the SVG XML directly, and in order to do some of the things I did I needed to be able to do that. In particular, the 7-fold rotational symmetry was achieved creating a box; putting it in a group; making 6 'clones' of it; and rotating those clones each by x * 360/7 degrees where x is a number from 1 to 6. The way a clone works in SVG is that it basically says "I look exactly like that guy over there.". So I can change the original, and that change is reflected in each of the rotated clones. In order to add and remove drawing elements from the master group I had to edit the XML structure directly instead of just using the GUI drawing tools.
x * 360/7
The tool was pretty helpful in getting the rotated versions to line up well. When something was part of the cloned group I could use the XML structure view to select it, even when it was part of a group. Then I could edit the control points and whenever I let go all the clones would be automatically updated.