?

Log in

No account? Create an account

SVG - Journal of Omnifarious

Jul. 24th, 2008

09:50 am - SVG

Previous Entry Share Next Entry

Here is a pretty SVG thing I did. If your browser doesn't display it, get a better browser.

Tags:
Current Location: 2237 NW 62nd ST, 98107
Current Mood: [mood icon] creative

Comments:

From:catherinew
Date:July 24th, 2008 04:56 pm (UTC)
(Link)
That's beautiful! I feel the urge to print it out and color it in with my daughter's crayons. :-)
(Reply) (Thread)
[User Picture]
From:omnifarious
Date:July 24th, 2008 07:33 pm (UTC)

Re: Coloring it in

(Link)

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. :-)



Edited at 2008-07-24 07:42 pm (UTC)
(Reply) (Parent) (Thread)
From:rosencrantz319
Date:July 24th, 2008 08:21 pm (UTC)
(Link)
(Reply) (Parent) (Thread)
[User Picture]
From:omnifarious
Date:July 24th, 2008 10:44 pm (UTC)

Re: Let me ask you something.

(Link)

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.

(Reply) (Parent) (Thread)
[User Picture]
From:mabelmundane
Date:July 25th, 2008 12:58 am (UTC)

Re: Let me ask you something.

(Link)
That sounds really cool. I'm still using IE, but someday I will switch over...
(Reply) (Parent) (Thread)
[User Picture]
From:eqe
Date:July 24th, 2008 09:32 pm (UTC)

Re: Coloring it in

(Link)
Huh, so doesn't it work to just say ? Do you have to use LJ's embed ifram magic?
(Reply) (Parent) (Thread)
[User Picture]
From:eqe
Date:July 24th, 2008 09:33 pm (UTC)

Re: Coloring it in

(Link)
nope, it doesn't, at least not in Iceweasel 2.0.0.11... interesting.
(Reply) (Parent) (Thread)
[User Picture]
From:omnifarious
Date:July 25th, 2008 03:42 am (UTC)

Re: Coloring it in

(Link)

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. :-(

(Reply) (Parent) (Thread)
[User Picture]
From:eqe
Date:July 25th, 2008 04:58 pm (UTC)

Re: Coloring it in

(Link)
It "works" (the image appears, but it is not equivalent to an IMG -- there are scroll bars, for one) on a static HTML page when I say , let's see if that works on LJ...
(Reply) (Parent) (Thread)
[User Picture]
From:eqe
Date:July 25th, 2008 04:59 pm (UTC)

Re: Coloring it in

(Link)
heh, nope not that (<object data=) either. Sigh. :/
(Reply) (Parent) (Thread)
[User Picture]
From:omnifarious
Date:July 25th, 2008 07:22 pm (UTC)

Re: Coloring it in

(Link)

That's actually what I put inside the <lj-embed>. I had the distinct impression that LJ would edit out the <object ...> tag otherwise.

(Reply) (Parent) (Thread)
[User Picture]
From:omnifarious
Date:July 25th, 2008 07:23 pm (UTC)

Re: Coloring it in

(Link)

Well, it's actually 568x562, so it's no surprise that it has scrollbars at 500x500.

(Reply) (Parent) (Thread)
[User Picture]
From:eqe
Date:July 25th, 2008 07:32 pm (UTC)

Re: Coloring it in

(Link)
I woulda thought it would resize; I mean, isn't that what SVG is all about? :)

Oh well, clearly "supports SVG" still isn't the truth. Alas.
(Reply) (Parent) (Thread)
[User Picture]
From:omnifarious
Date:July 26th, 2008 12:48 am (UTC)

Re: Coloring it in

(Link)

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.

(Reply) (Parent) (Thread)
[User Picture]
From:cresal
Date:July 24th, 2008 05:32 pm (UTC)
(Link)
preeeeetty
(Reply) (Thread)
From:rosencrantz319
Date:July 24th, 2008 06:26 pm (UTC)
(Link)
(Reply) (Thread)
From:hattifattener
Date:July 24th, 2008 07:41 pm (UTC)

Re: You might want to put them behind a cut if they are really big.

(Link)
True, but they should get a better browser anyway. :)
(Reply) (Parent) (Thread)
From:rosencrantz319
Date:July 24th, 2008 08:04 pm (UTC)
(Link)
(Reply) (Parent) (Thread)
[User Picture]
From:omnifarious
Date:July 24th, 2008 10:45 pm (UTC)

Re: You might want to put them behind a cut if they are really big.

(Link)

It can be translated, but it won't be the same picture really.

(Reply) (Parent) (Thread)
[User Picture]
From:eqe
Date:July 24th, 2008 09:07 pm (UTC)
(Link)
It shows up as just black on my friends page. Displays OK once I click through though.
(Reply) (Thread)
[User Picture]
From:vastatuuli
Date:July 26th, 2008 06:36 pm (UTC)
(Link)
Neat! You actually motivated me to finally download Firefox (again), as I was still using IE after a pesky computer/OS change. So how devoted a tech nerd do you have to be in order to be able to create something as pretty as this? (:
(Reply) (Thread)
[User Picture]
From:omnifarious
Date:July 26th, 2008 08:36 pm (UTC)

Not _too_ much of one

(Link)

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 Creative Commons License

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.

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.

(Reply) (Parent) (Thread)