An Introduction to SVG Magic (IN PROGRESS)

Find detailed help from the AAO community, or write your own tutorials.

Moderator: EN - Forum Moderators

Post Reply
User avatar
Ferdielance
Posts: 778
Joined: Sun Mar 09, 2008 12:46 am
Gender: Male
Spoken languages: English

An Introduction to SVG Magic (IN PROGRESS)

Post by Ferdielance »

Warning:

The techniques in this guide are not officially supported by any version of AAO! They work reasonably well in Firefox and to some extent in Chrome, but future versions of those browsers may behave unpredictably!


SVG Magic: Doing the Implausible in AAO

We mustn't confuse what's impossible with what's implausible. Just about everything I dream up for a living relies on stuff that's highly implausible. That's what makes it so hard to work out; no-one thinks you'd go to that much trouble to fool your audience.

- Jonathan Creek
Intro:

In version 5 of the AAO editor and player, it was nearly impossible to do a number of interesting, useful things, such as display multiple objects on one background. To pull off certain engines required the use of a special technique - .svg images. Now that AAO v6 allows many of these tricks, .svgs are less useful. But they're still handy in a number of ways! Here are things you can do with .svgs (to some extent) that you can't do easily without them:
  • Smooth scrolling credits and other animations, such as image rotations, in small files
  • Dynamic text in examine engines, such as HP counters in an RPG engine
  • The ability to zoom in and pick out parts of large images with a button press (very choppy, though!)
  • Cleaner fades
However, they also have several disadvantages:
  • Uneven browser support
  • Not officially supported by Unas; AAO v7 could conceivably break these someday
  • Require an outside server that can serve HTML and ideally .php code, not just images (Photobucket won't cut it)
  • Have a limited toolset for design. While some tools, such as Inkscape, can export .svgs, many do so in a bloated way!
  • Including other graphics requires you to specifically encode them
If you're willing to tackle some frustration and deal with a custom server, though, .svgs can liven up your case presentation!

What is an .svg, and why is it so different?

Suppose you wanted to give a computer instructions for how to draw an image on screen. One way you might try to do it is to tell the computer what color to put in every single pixel, row by row, then save that list of pixels to disk. That kind of representation is an uncompressed pixel map (commonly called a "bitmap"), and makes a needlessly large file for most purposes.

More often, we see images in .jpg, .png, or .gif format. These formats compress the list of pixel colors, so you don't have a literal list of colors. Some of them, such as .gif format, compromise by cutting out information in the process. Ultimately, however, the viewer is getting a picture that comes from a list of pixels or groups of pixels. Assuming no difference in monitors and display settings (a big assumption!) two different users viewing the same .png should see the same image.

Animated .gifs store a series of images in this way, and can do so more space-efficiently if you optimize them to not change every pixel in every frame. The animated .gifs on CR are not optimized for file size, but a program such as the GIMP can do that optimization for you.

An .svg, even when animated, is entirely different.

Rather than encoding an image as pixels, an .svg encodes an image as a human-readable program, a list of instructions that tells the web browser to draw objects on the screen. Instead of encoding every pixel in a line, an .svg just tells the browser "Draw a line between point A and point B". To move that line around, you'd set up an "animate" block that gives it instructions.

Therefore, using .svgs effectively isn't just about drawing pictures. It requires a willingness to experiment, to test carefully on different systems and window sizes, and to work in Cartesian x/y coordinates. For this reason, .svgs are great for people who are not so inclined to art, but solid at programming and mathematical reasoning.

Making your first .svg: a simple, smooth, customizable color fade.

Rather than dwell on the finer technical details, though, let's do something practical! For this, you'll need a server account. Many free servers exist, but not all servers are created equal. Since I need a server to host pages for my real job, I'm willing to pay. But free servers work, too, as long as you do your research.

A few thoughts:
  • Some free servers have malware or viruses they try to serve via popups to users! This probably doesn't affect people who grab .svgs from your server, but it might be bad for you!
  • Some free servers are blocked by many ISPs, as scammers and other criminals use them. The fades I host on 000freewebhost, for example (.net16) are not accessible to everyone; a few AAO users on college campuses just can't see them.
  • Some free servers have stringent bandwidth limits, though that should affect .svgs too much. Others have long lag times when loading, which definitely DOES affect .svgs.
Once you have a server, you'll want a good text editor. .svg files are really just textual instructions, similar to HTML. While you could make them in Notepad, I recommend a program called Notepad++ if you're a Windows user. It has a number of handy auto-highlighting features.

You should then make a file titled myFade.svg, or preferably a more descriptive name, and put the code for your fade in it. Here's an example of code for a 1000ms fade in from black:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg>
<svg width="256" height="192" xmlns="http://www.w3.org/2000/svg" 

xmlns:xlink="http://www.w3.org/1999/xlink">
	<rect id="rectAnim" fill="black" x="0" y="0" width="256" height="192"/>
	<animate xlink:href="#rectAnim" attributeName="opacity" dur="1s" from="1" to="0" fill="freeze"/>
</svg>
Let's go through this line by line!

The first two lines tell the web browser how this text file is encoded, and that it represents an .svg. This is important! If you don't have them, your browser might try to read it as text.

The third line is the opening tag for the .svg image proper. It is surrounded by <> signs, as all HTML tags are. The corresponding closing tag is at the end of the code: </svg>. Everything between <svg> and </svg> is the image.

Notice that I set the width and height in pixels there, and also indicate its "namespace," which is basically what different parts of the .svg are called.

The next line is another tag. This one <rect/>, has a backslash at the end. This means it's a self-contained tag - I don't need to do <rect> and </rect>. I can put it all in one big tag. I give the rectangle, which represents the black foreground, an animation id. I call it rectAnim so I can refer to it later. I tell the .svg to start by filling it with black, and covering the entire 256 x 192 view area.

Finally, I use an animate tag. The xlink:href="#rectAnim" part just tells it to animate the object I gave the id rectAnim. I tell it that name of the attribute of the rectangle that should be animated is "opacity." The rectangle should go from being 100% opaque (from="1") to being entirely clear (to="0") over a period of 1 second (dur="1s") and that it should freeze at the end of the animation, not loop.

Then I close the svg with the </svg> tag, and save it! Once it's saved, I upload it to the server. Test it in Firefox!

Dealing with the file extension problem:

Now, one problem: AAO v5 rejects .svg files in the editor because they don't have a common image format, such as .png, as their file extension. AAO v6 is somewhat more generous, but this shouldn't necessarily be counted on in future revisions.

So some trickery is helpful! Most web host software has an option for a site owner to set what is called a "redirect." For example, if someone goes to the page "www.ferdielance.com/not-here.html", I can make their browser go to "www.ferdielane.com/there.html" instead. How to do this will depend on the software your web host is using!

Whenever anyone tries to visit "myFade.png" on your site, you want the server to redirect them to "myFade.svg" instead. There should be no actual myFade.png file on your site! Instead, just use the redirect option in your web host's settings and create instructions to make all incoming traffic to myfade.png go to myfade.svg. Then, if AAO doesn't accept "myFade.svg" as a link, just put in "myFade.png" as the address of your fade... and AAO will be tricked into thinking it's an ordinary, non-svg image.

(TO BE CONTINUED.)
"A slow sort of country!" said the Queen. "Now, here, you see, it takes all the running you can do, to keep in the same place. If you want to get somewhere else, you must run at least twice as fast as that!"
User avatar
kwando1313
Posts: 7684
Joined: Tue Jul 22, 2008 6:33 pm
Gender: Male
Spoken languages: English, Français (un peu), Ancient Belkan
Location: Uminari City

Re: An Introduction to SVG Magic (IN PROGRESS)

Post by kwando1313 »

Not to bother, but are you planning on continuing this guide, Ferdie?
Avatar made by Rimuu~

Image

"The Knight of the Iron Hammer, Vita, and the Steel Count, Graf Eisen. There's nothing in this world we can't destroy."
User avatar
Ferdielance
Posts: 778
Joined: Sun Mar 09, 2008 12:46 am
Gender: Male
Spoken languages: English

Re: An Introduction to SVG Magic (IN PROGRESS)

Post by Ferdielance »

Yes - I've just gotten very, very busy.
"A slow sort of country!" said the Queen. "Now, here, you see, it takes all the running you can do, to keep in the same place. If you want to get somewhere else, you must run at least twice as fast as that!"
Post Reply