Drawing SVG Comics, Part 2 at Schepers.cc

SVG-Whiz!

Drawing Online Comics in SVG, Part 2

The Panel

First you take a square, declared as a <rect> with equal sides; the <rect> is a basic shape in SVG (later I'll show you how to make more complex shapes). The code to create this in SVG follows the example.


         <svg width='3cm' height='3cm' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg'>

            <title>Step 1</title>

            <desc>simple red rectangle</desc>

            

             <rect

               x='5' y='5'

               width='40' height='40'

               fill='red'

               />

         </svg>

Notice that the file begins and ends with an <svg> tag, just as a Web page has the <html> tag; this is a crucial part of the code...otherwise, the computer won't know what to do with it. Don't worry about the title or description elements for now; they're not strictly necessary. Instead, look at the <rect> tag; this draws the panel, and it's what we're going to be working with. To give it that nice, organic, 21st-Century, Web-savvy feel, let's give it rounded edges (this is a variation on the basic <rect> shape in SVG):


         <svg width='3cm' height='3cm' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'>

            <title>Step 2</title>

            <desc>rounded red rectangle</desc>

            

             <rect

               x='5' y='5'

               rx='5' ry='5'

               width='40' height='40'

               fill='red'

               />

         </svg>

This will serve as our panel. Now, we give it an outline, or panel frame (in SVG parlance, this is a “stroke,” or the line that circumscribes the shape, but we'll call it the frame):


         <svg width='3cm' height='3cm' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'>

            <title>Step 3</title>

            <desc>rounded red rectangle with outline</desc>

            

             <rect

               x='5' y='5'

               rx='5' ry='5'

               width='40' height='40'

               fill='red'

               stroke='blue'

               />

         </svg>

Okay, now we're getting somewhere. Kinda funky for a panel, though, right? Let's touch it up a bit, make it a bit less obtrusive...


         <svg width='3cm' height='3cm' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'>

            <title>Panel 1</title>

            <desc>online comic panel frame</desc>

            

             <rect

               x='5' y='5'

               rx='5' ry='5'

               width='40' height='40'

               fill='white'

               stroke='black'

               stroke-width='.5'

             />

         </svg>

There! That looks like a fairly traditional panel frame, right? So, let's put something in it--a simple object, for now (a <circle>, another SVG basic shape):


         <rect ... />

         <circle cx='25' cy='15' r='5'/>

And add a verb...


         <rect ... />

         <circle cx='25' cy='35' r='5'/>

Voila! You have a comic! Of course, that was not a very interesting one (unless you sense the inherent existential angst of the symbolic pull of gravity, emphasized by the stark black and white palette, and equate it with the human condition... in which case, you are probably far less interesting than that comic, so it must jump up a notch by comparison).

Previous Next

ⓢ