COMICS WITH SVG

If you're not interested in the technicalities of comics or computer graphics, this probably won't be of much interest to you. If you want to create comics you need to have some understanding of how to do it although you may get a friend to do the technical stuff for you. An SVG comic dosen't have to look anything like Dragon Knights (e.g. it could be black and white Manga or ressemble Charly Brown) and there's no reason why it has be about super heroes or science fiction. Therefore don't let the complexities of Dragon Knights put you off, they're not obligatory. You could probably do a more elaborate SVG comic but it would be difficult (IMHO if it just runs without you being able to control it, it's a movie rather than a comic - if it gets very interactive it's a game). Also SVG can be combined with other things, so there's no reason why you can't have a comic that only uses a bit of SVG.

What the heck's SVG

A graphic format which has some similarities to SWF (Flash) but with code that's similar to HTML (and even more like XHTML). It's very different from gif and jpg (used for most internet graphics). It's explained in detail elsewhere so I'll just list what makes it so great for comics

• Vector based - it's good for drawings such as most comics
• Easy to do simple pictures - so you can get started without being an expert
• Can show off - you can learn the fancy stuff to impress your friends and potential employers
• Easy to color (sorry colorists)
• Can be animated - so you can have things moving or otherwise changing
• Can be interactive - so you can make it respond to the reader
• Can include bitmaps - so you can use photographs etc. in your comics
• Non-propriatory - it's not owned by "the man" so using it is a bit counter establishment. This may also save you some legal problems
• Can be created and edited with free software - good for the starving artist and doesn't support "the man" (can also be created by some expensive software like Adobe Illustrator and Corel Draw)
• ASCII - code is semi-intelligable if you can read English
• XML - if you know HTML it's easy to learn the code. Can also be generated by Perl, XSLT etc. so you could have comics created on the fly by cgi scrips or client side programs
• Works with CCS - so you can make it fit in with your web pages or have multiple files with same color scemes, fonts etc.
• Works with JavaScript - so it's easy to learn how to do animations and interactivity. It can also interact with web pages, forms and other SVG's

Comic Styles

Dragon Knights is mostly done in a style similar to western super-hero comics. The reason for choosing this genre was that the artwork is traditionally very good and I wanted to demonstrate SVG's fancier capabilities (e.g. gradients and filters). Back when Batman and Superman first tackled the forces of evil, color printing wasn't very good and couldn't line the colors up well. Therefore the comics had to have thick black outlines to hide this. This isn't an issue on the internet or for modern printing so I largely dispensed with outlines (usually not having stroke attributes) to make the comic look more realistic (some newer cartoon shows like 6teen are similar in this respect). I also wanted the characters to look like whatever race they were supposed to be (unless heavilly modded), unlike Manga where everybody looks European. I also decided that I didn't have to imitate pages of a printed comic, so I just had one frame displayed at a time.

Of course you don't have to use the same style. You can do a comic entirely with circles and rectangles if you like! Anyway let's consider some comic styles and see how you'd do them with SVG.

Newspaper strip

These are generally fairly simple graphically and in black and white. You probably just want to enclose everything in a g with the style attribute set to white fill and black stroke:

<g style="fill:#fff;stroke:#000;stroke-width:1"/> --- all the rest of your file ---</g>

If you get into the Sunday supliment, you can go through it, adding fill attributes to color things.

Dragon Knights has some very simple drawings (although with a filtered background) in Part II where Stag explains his theory and in Part V where we see a page of the space ship database.

Black and White Manga

Pretty much the same as above but in Japanese style. This means you have to have the big eyes, small mouths, crazy hair styles etc. Remember nobody is supposed to look remotely Japanese. Then you really need wierd and complicated story lines. You might need to play around with the stroke widths and have some black fills. Also there's a tradition of using photographic backgrounds, so you can include jpg's or png's as image elements or trace your photographs (by hand or using software) to convert them to vectors.

You can see some black and white Manga in Part V, where there's a news broadcast with Animae (animated Manga) pressenters.

Western Superhero

This isn't really that different from the newspaper strip but the artwork needs to be better and you want the good vs. evil story line. You probably want to have a greater variety of stroke widths and colored fills. You could probably also use gradients and filters for realistic shading and dimentional portals. This isn't very different form Dragon Knights, just with a lot more strokes.

Colored Manga

Just like the black and white Manga but with colored fills. Again you might like to use photographs and filters to give things more texture. The princess in the Animae news is the only example of this in Dragon Knights.

Painted Comics, Photocomics, 3D comics, etc.

Painted comics are where the pictures are either painted on paper and scanned or painted in a program like Photoshop or GIMP. Photocomics are done with actual photographs (you've probably got to get models to pose for you although some people photograph toys). 3D comics are created using programs like Poser or Blender which model the scene in 3D and render a picture which looks like a photograph. The etc. are comics where you want people to see your technique with pencil or charcol or perhaps comics that combine photographs and 3D renderings. These are the only types of comic where you really need bitmapped graphics. However you can display them in SVG files to add interactivity and/or animation or if you want to add vector graphics objects. For example, you could do like Dragon Knights and have the bubbles only appearing when needed so they don't hide the artwork.

SVG Features

Let's look at some of things you can do with SVG and consider how they could be used in a comic. Remember you don't HAVE to use anything (although if you don't use anything it will be a dull comic). If you're not technically minded, just use a WYSIWYG editor ("What You See Is What You Get" so you use your mouse to draw stuff - examples for SVG are Adobe Illustrator, Corel Draw, Sodipodi and Inkscape) and don't touch the code. If you can't understand gradients, filters, JavaScript etc. just don't use them or find somebody who does to do it for you.

circle, ellipse, line, path, polygon, polyline and rect

circle draws circles (duh). ellipse draws ellipses. rect draws rectagles (including squares) with optional rounded corners for submarine hatches. You will be shocked to know that line draws straight lines. polyline draws lines with an indefinate number of straight sections. polygon draws any straight sided shape (its distinction from polyline is very subtle). path draws any shape, including ones with complex curves, usefull for natural things.

These will probably be the bulk of your comic. All right, you will probably seldom, if ever, use line, polygon or polyline. All these have optional stroke (outline) and fill (inside) attributes (except line which just has stroke) which can be any solid color, gradients and/or transparent. stroke can have it's width changed, be dotted or have lots of other things done to it. fill can be a patten. No carefully coloring inside the lines or messing arround with marquee tools and masks in Photoshop or GIMP. All you have to do is select the object(s) you wish to color in your WYSIWYG editor and use the tools to set it's fill and stroke. Alternatively you can find the elements in the code and edit their attributes (remember that as objects don't have to have outlines, you can have an object with just a fill taking up part of the area - this is how more the shading and highlights are done in Dragon Kinghts). As it's this easy to use color in SVG, I don't know why anybody would do them in black and white.

As if that wasn't enough, you can copy these elements, rotate them, apply filters etc..

Text and fonts

The other main component of most comics is text, mostly in bubbles but there are often signs, books etc. in the pictures. Traditionalists say you should write this by hand. You can write using the drawing tools in the editor or write on paper, scan it and use image elements. If you have signs seen in perspective, you will probably have to use path elements; perhaps typing with the text tool, converting to paths and then pulling the points around. If so, you really should use desc elements (discussed below) so the visually impared know what this says (I did the Chinese writing in Part IV and Part V as paths, partly because some of it had to be in perspective). You can also use text elements so it will be possible to search the text, it's probably easier and takes up less memmory. Also it should be possible to search your SVG's for text or read it with voice synthesizers for the visually handicapped.

Remember your text will be displayed in a font on your user's computer (it should be possible to use external fonts on the internet but I think Opera is the only browser which supports this so far). If the font you specified isn't on the reader's computer, it will find one it thinks similar, which may or may not look OK. One of my readers got a shock because some of the text in Orientation was rendered in a font she'd designed. Therefore you should try to use common fonts like Ariel and Times New Roman but Comic Sans MS seems OK. Failing that, you can convert TTF fonts to SVG using Batik and include it in your files (you only need the charecters you use). This is useful if you want to use uncommon fonts, perhaps for that obscure Elf language.

Want to have your text in Hebrew or Japanese? No problem, you can set your text to write from right to left or top to bottom. Then you just have to use an appropriate font.

text elements can be changed easilly, so your comics could be translated into other languages (or have spelling corected) by just altering them. It should be possible to set up an online comic so that the user can choose the language and a cgi script adds the apropriate text (and possibly fonts).

title and desc

All right, not the most exciting elements and so far the technology hasn't made good use of them. title should be for giving things titles, a bit like its HTML namesake but it can be applied to any element. If applied to the root svg element, it will be diplayed at the top of the browser window. desc should describe things but I have yet to hear of an application that uses it. I try to use desc to describe each frame and writing that isn't done in text elements in the hope that will help with search engins and accessability in the future.

id attributes

This simply gives objects an identity (should be unique) by which they can be referenced by use elements and/or JavaScript.

class attributes, Style elements and css files

You use the style element to define styles. These can be specified for a particular type of element or as a class or for an element with a particular id (this is exactly the same as in HTML). To apply a class to an element, you simply use the class attribute (this can list multiple classes). SVG can use external css files which are specified with a processing instruction. Again this works in a very similar way to HTML. This allows you to have multiple SVG's use the same styles. This is useful for comics as you probably want consistency with your bubbles and perhaps to keep your characters looking the same.

g and svg

These both allow you to group things together.

Internal svg elements tend to be used when you need to change the coordinate system. I normally use one for each frame and the frames can be different sizes and potitioned differently.

g elements are normally used to give multiple elements the same attributes (and thus save memory) or so they can be animated together. I've also found that you can't change the display property of an object that has a filter (to make it invisible) but you can it's ancestors (e.g. a g element which contains it). This is important for the way I make objects change color when you're supposed to roll your mouse over them.

use

This produces a copy of the object specified by the xlink:href attribute but it can be modified in various ways.

• Where there are multiple similar objects - windows of a large bulding, eyes, etc.
• Similar objects in different frames - especially useful for a comic like Red Meat
• Non-rectangular filters - see under clip paths

image

This displays an SVG bitmap. Unfortunately interactivity and animation in the SVG (or gif) won't work.

• Inserting bitmaps - the PixelPalaces logo at the end of each SVG file is an example
• Repeated SVG images. This was done with the pictures of Hernandez at the end of the Part IV and beginning to Part V

Transparency/Opacity

You will probably want most objects to be completely opaque so you can't see through them. Simply not specifying the opacity will probably acheive this. opacity="0" will make objects invisible but they will still recieve mouse events and block mouse events from things behind them, which can be usefull (see interactivity). Values of opacity between 0 and 1 will result the object being visible but see-through which can have interesting visual effects.

• Transparent things like glass, ghosts, smoke, reflections on windows etc.
• Complicated effects by overlapping transparent objects with gradients and/or filters. This is the way the sea surface was created in the frame in Part IV, where Tiffy's mind is drawn into the sea monster
• Transparent black paths for shading - I use these a lot, particularly after about half way through Part III
• Lens flairs. You get these in photography if you point your camera at a very bright light. This is considered bad photography but it can look cool and add a touch of realism if there are bright lights in your sceen. You can imitate them in SVG by a transparent star or two on your light and drawing a straight line at an angle from your light (you delete this later) along which you draw a number of transparent circles and/or polygons of different colors and sizes. You can see a lens flair several times in Part III, where Tiffy is fighting the Abominable/Gray and in Part V where the mech is taking off

Linear Gradients

These cause color and/or opacity to vary along a straight line.

• Subtle
  li>a sky that gets pale towards the horizon
  • a wall that gets darker farther from a window
  • shafts of light underwater
  • a reflective cylinder seen side on
• Les subtle
  • wild rainbow effects
  • garish patterns

In Part I, I experimented with using gradients for shading but later relied more of transparent paths. Also in Part I, transparency gradients were used for the shafts of light coming down from the surface of the sea. In Part V, I used them for the stripy pattern of the inside of the sea monster seen side on. Transparentcy gradients were part of the complex sea surface effect in Part IV, where Tiffy's mind is being drawn into the sea monster.

Radial Gradients

There are similar to linear gradients but the gradient goes out from the center of a circle or ellipse ressulting in a "bullseye" type pattern.

• Cause a circle or ellipse to fade out towards the edges, as with the light from the street lights at the end of Part III
• More garish effects as in the sea monster interiors
• highlights on curved surfaces, like on the computer goggles
• Light on a wall, floor or table fading with distance from a light source.

Clip Paths

These define a shape using a clipPath element. When this is applied to an object with the clip-path attribute (don't ask me why the element and attribute have different but confusingly similar names or why you can't simply specify any object with the clip-path attribute), only the parts of the object which fall within the area defined by the clipPath element will be visible.

• Simplyfying editting. In Cover a clip path is applied to the tube down the center of the front part of the Santa Maria so parts of it wouldn't appear in front of objects it should have been behind.
• Objects that should be seen throuh holes. In several places I used clip paths on teeth so they appear to be behind the lips. In Part I, a clip path is used for objects seen through a window in one of Stag's visions. In Part V, a clip path is used for the buildings seen through the windows of the market.
• Removing bits from some copies of an object. In Part V, where Tiffy is changing her hair style, a clip path is applied to one version of her old hair.
• Making filters non-rectangular. Normally a filter fills the entire bounding box, so it filters the entire rectangular area arround the object (for some reason this doesn't seem to apply to blur filters). If the object is a rectangle, this doesn't matter but otherwise you need to trim the filter with a clip path. Appliying a clip path to the object used to define it crashes Internet Explorer. To get round this, you place the object (pressumably a path) in defs so it will be invisible. Then you reference it with a use attribute in the clipPath element. Where you want the object, you have a use element referencing the path with a clip-path attribute referencing the clipPath. Got that? All right the code looks something like this:
  <defs>
 <path id="myPath" .../>
 <clipPath id="myclipPath">
  <use xlink:href="#myPath"/>
 </clipPath>
 <filter id="myFilter" ...>
  ...whatever...
 </filter>
 [probably some other stuff]
</defs>
[probably more stuff]
<use xlink:href="#myPath" clip-path="url(#myclipPath)" filter="url(#myFilter)"/>

Pattens

You can define a patten with the patten element and then just use it with a fill attribute. This causes the patten to be repeated across the inside of your object. The problem with realistic comics, is that pattens only really work on objects that are flat, otherwise they won't look as if they're in perspective. In Part V, I've used pattens for the window of the bar and the dimorph's freckles.

• Bricks, wallpaper etc.
• Tartans in Manga where we don't worry about little things like perspective
• Bars on fences, cages etc. (this was used for the park gates in Part VIII)

Filters

These modify objects by applying complicated mathematical functions to them. This is probably one of the hardest aspects to SVG to understand but it can create spectacular effects, especially when used in conjunction with gradients and/or transparency, and make vector drawings look a lot more like bitmaps.

• Bluring objects to give the impression of movement, bad focus, fuzzy edges or blured "naughty bits" on television.
• Changing the background so something will show up irrespective of the background. The filters that change color to indecate that something will happen when you roll the mouse over them is done like this.
• Adding texture for clowds, fur, vegetation, stucco etc. I use this sort of thing all over the place.

Interactivity

These means that things happen in response to the reader. Events can be trigured by the mouse moving, clicking, things being typed etc. SVG files can also contain links. For links, you simply use the a element, much like HTML. Other things normally use JavaScript but SMIL animations can also be trigured by mouse events.

• Making bubbles appear and dissapear
• Moving to the next page or other navigation
• Including games
• Having user type in information so they can communicate with characters
• Triguring animations in response to the user
• Linking to other files (SVG or otherwise)

Animation

What comes to mind is having characters walking around etc. You could do this but it raises the question of if you still have a comic or a movie. This can also be used to make bubbles appear and dissapear or move to the next frame. This can be done by JavaScrip SMIL and/or CSS (the latter doesn't seem to work in I.E.) although if you want things to move or fade, you will have to use SMIL.

• Movie type things
• Interactive events - bubbles appearing and dissapearing. Moveing to the next frame etc.
• Shock effects - like Stag's visions

Want to learn more about SVG?

• PixelPalaces Technology page
• PixelPalaces Links Page - includes links to sites where you can download free WYSIWYG editors

		Support PixelPalaces at OnlineComics.net!