Has anybody here heard of SVG?

[Tangent128 offline]

Has anybody here heard of SVG? It's a HTML-like language used for making graphics. It's interesting because you use Javascript and animation tags to make the graphics interactive.

So... has anybody else experimented with it?

[Overcaffeinated Sloth offline]

Sounds pretty cool... how does it work?

[Tangent128 offline]

Like HTML, you save a text file with SVG code in it with the right extension, then open it in a browser that understands SVG. Right now, that means Firefox or Opera.

If you have either, save this in a file named something.svg and open it.

<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%">
<rect x="0" y="0" width="20%" height="100%" fill="blue" />
<rect x="0" y="0" width="75%" height="25%" fill="black" />
<circle cx="100%" cy="100%" r="25%" fill="red"
onmouseover="setAttribute('fill','yellow')"
onmouseout="setAttribute('fill','red')"
/>
</svg>

[Lyokofreak offline]

I like the SVG format because of the Zoom-and-not-loose-quality property, and its great for animating. I can see including it in an HTML file with the <embed> tag, but all browsers don't support it meaning they either need plugins or can't run it at all. Animated PNG would be a better alternative since it's nicely compressed bitmap and doesn't lose quality like JPEG & doesn't have the issues GIF's do.

Actually, Scalable Vector Graphics is data in XML, not HTML-like ;p.

[timekitten offline]

Whoa, interesting! o_0 I've never heard of this before. Shows you learn something new every day. *plays around*

[Tangent128 offline]

I like the SVG format because of the Zoom-and-not-loose-quality property, and its great for animating. I can see including it in an HTML file with the <embed> tag, but all browsers don't support it meaning they either need plugins or can't run it at all. Animated PNG would be a better alternative since it's nicely compressed bitmap and doesn't lose quality like JPEG & doesn't have the issues GIF's do.

Actually, Scalable Vector Graphics is data in XML, not XML-like ;p.

I said HTML like...

Correct me if I'm wrong, but only the Opera Alpha supports aPNG. So actually SVG is more compatible. (Firefox, Safari, that K one...) Though only Opera supports non-javascript animation...

aPNG probably would fit into existing image editors better, though. The GIMP already does animated gifs. (Though it isn't very good for actual drawing. I have no art talent, so I just CG everything anyway, but...) InkScape is the only SVG editor I know, and it does no animation at all. Pity... Ah well. Hand coding builds character. And cleaner code.


Reminds me, I did an animated SVG trailer thing for my English project on 1984. Only known to work in Opera, though. (Copy&paste address)
http://files.myopera.com/Tangent128/files/1984.svg

Whoa, interesting! o_0 I've never heard of this before. Shows you learn something new every day. *plays around*

If you do anything remotely interesting, post it here. And feel free to ask me anything.

[Jeremified offline]

SVG is incredible. It's like a picture MIDI.

[Lyokofreak offline]

I like the SVG format because of the Zoom-and-not-loose-quality property, and its great for animating. I can see including it in an HTML file with the <embed> tag, but all browsers don't support it meaning they either need plugins or can't run it at all. Animated PNG would be a better alternative since it's nicely compressed bitmap and doesn't lose quality like JPEG & doesn't have the issues GIF's do.

Actually, Scalable Vector Graphics is data in XML, not XML-like ;p.

I said HTML like...

Correct me if I'm wrong, but only the Opera Alpha supports aPNG. So actually SVG is more compatible. (Firefox, Safari, that K one...) Though only Opera supports non-javascript animation...

aPNG probably would fit into existing image editors better, though. The GIMP already does animated gifs. (Though it isn't very good for actual drawing. I have no art talent, so I just CG everything anyway, but...) InkScape is the only SVG editor I know, and it does no animation at all. Pity... Ah well. Hand coding builds character. And cleaner code.


Reminds me, I did an animated SVG trailer thing for my English project on 1984. Only known to work in Opera, though. (Copy&paste address)
http://files.myopera.com/Tangent128/files/1984.svg

Whoa, interesting! o_0 I've never heard of this before. Shows you learn something new every day. *plays around*

If you do anything remotely interesting, post it here. And feel free to ask me anything.

I typed XML like, edited, found out I put it in the wrong place, and edited again. That's how you got the phail quote :p

Simple Javascript time-based functions do the trick frame by frame, but like normal video editing, it's not 3 clicks.

[timekitten offline]

Whoa, interesting! o_0 I've never heard of this before. Shows you learn something new every day. *plays around*

If you do anything remotely interesting, post it here. And feel free to ask me anything.

Well, is this remotely interesting? http://files.myopera.com/timekitten/files/choco.svg

[Jeremified offline]

Animated PNG would be a better alternative since it's nicely compressed bitmap and doesn't lose quality like JPEG & doesn't have the issues GIF's do.

Dude... animated PNGs would be SWEET. The closest we can get is the .ani format, used for animated cursors... if someone can develop a way to view those on a webpage, that would be amazing.

[Tangent128 offline]

Well, is this remotely interesting? http://files.myopera.com/timekitten/files/choco.svg

Oooh, nice! Did you hand do that? The code looks pretty clean.

Animated PNG would be a better alternative since it's nicely compressed bitmap and doesn't lose quality like JPEG & doesn't have the issues GIF's do.

Dude... animated PNGs would be SWEET. The closest we can get is the .ani format, used for animated cursors... if someone can develop a way to view those on a webpage, that would be amazing.

The Opera Alpha does it, I think, but a Firefox developer actually invented the format I believe. I don't know of any public Firefox versions supporting it yet, though. But yes. Animated 24 bit color with alpha channel? It's about time the 21st century got here.

[timekitten offline]

Well, is this remotely interesting? http://files.myopera.com/timekitten/files/choco.svg

Oooh, nice! Did you hand do that? The code looks pretty clean.

Yeah, took about an hour to make. And another hour editing it here: http://files.myopera.com/timekitten/files/chocoinvert.svg I'm trying to figure out how to make curves with the path tag, but no luck.

[Tangent128 offline]

Try the "Q" command-
"Q cx cy x y" draws a quadratic curve to <x> using <cx> as a control point.

I find the official spec to be of immense help, if hard to read sometimes:
http://www.w3.org/TR/SVG11/

This is the page on paths: (It also mentions cubic paths with two control points)
http://www.w3.org/TR/SVG11/paths.html

Again, feel free to ask me about anything. I don't usually get to talk about this stuff.

(By the way, fill, stroke, & stroke-width can also be done as normal attributes; they don't have to be put under style. Not worth the trouble to change it, though.)

[adrimarie offline]

I've heard about SVG from college (while I was still taking web designing classes) but the classes did not elaborate further, as it was still a new format back then.

Would be really nice to learn a bit of SVG and take advantage of its capabilities and incorporate them with website designing one day, but no time right now (work and real-life stuff going on). One day hopefully I'll get to learn more. Too bad I'm XML-deficient... the only "XML" that I know of is in XHTML. x.x

[Jeremified offline]

Animated 24 bit color with alpha channel?

Also known as 32-bit color.

[Tangent128 offline]

I wouldn't call transparency color...

Ok, how's this?

[Jeremified offline]

I wouldn't call transparency color...

It's considered a color because it's stored the same way as RGB channels are stored (one byte at a time).

Also, I'm surprised nobody's brought up Inkscape before. It's the Gimp-ish editor for SVG. I made an N tribute using it. Ninja-dash.svg

http://www.inkscape.org/

[Kamekai offline]

Yeah, Inkscape's good. I've never really used it much, but it serves it's purpose. Best part is, it uses the .gtk runtime environment, so I don't have to reconfigure things like root paths all over again. =D

[Tangent128 offline]

/ hacks around hotlinking filter...
Not bad. I'd suggest adding some filling.

I've tried Inkscape. I still prefer Notepad.

[Kamekai offline]

/ hacks around hotlinking filter...

Yeah, that was pretty easy. Just copy the URL and paste it in the address bar. As for the actual image, not too bad, but like Tangent said it could use a little color.

As for Notepad... I really only use it for aftertouches, things I can't manage to do Inkscape. Although, Inkscape has a nice little XML editor. (While somewhat incomplete, i.e. doesn't support the 'a xlink:href' tag.)

[Tangent128 offline]

Eh, I just can't stand all the extra tags Inkscape inserts.

Anyways, I've been doing some more experiments, webcomic-style.

Linky.

I don't consider it an actual webcomic project (come on, two pages?), though if anybody wants to adopt any techniques used, they can. (It's also an experiment in using XSLT stylesheets to put a viewer around the comic. Delete the <?xml-stylesheet ...> line if you save it to get just the comic, or else save the stylesheet files too for the viewer.)

Opera users should see some minor animations.

[FènéethxAelita offline]

Isn't it true that Jeremyfied has experience with ani.
Firefox barley supports .svg, animations don't work, but moseover does, text may overlap for animations.
Reminds me of they way PS3 supports .gif files, frames overlap.