X (close) shape in SVG

Question

I'm trying to make this SVG shape (ignore the color background, just the X shape)

Close SVG Path

but don't have Illustrator and wouldn't know how to use it.

Can someone help out with the general idea, or point me to alternatives. I'm using it in flex.

Answer 1

A cheap and easy way to do this is to get a piece of graph paper and mark off a 16x16 (or other dimension) block of squares. Write the numbers 0-15 along the top and left sides of the block, each number corresponding to one of the small squares.

Then draw your figure (in this case an X) starting with one of the squares and without lifting your pen from the paper, continue the outline of it until you are back to the starting point. (This does not have to be perfect, or even a very good drawing.)

Next, make a list of the points where the line changes direction. These are the nodes you are going to use for your drawing.

Let's draw a simple downward-pointing triangle in the top left of the big block using this method. Start at 0,0 and continue until 0,7, at which point you turn and continue the line to 3,3 and then you pivot again and continue the line back to 0,0 and stop.

Now, you have an array of points:

[new Point(0,0), new Point(0,3), new Point(3,3), new Point(0,0)];

Using the methods of the graphics object you can do the following:

private function drawInvertedTriangle():void {
    var aryPoints:Array = [
            new Point(0,0)
        ,   new Point(0,3)
        ,   new Point(3,3)
        ,   new Point(0,0)];
    var bgColor:uint = 0x0000CC; // darkish blue
    var child:Shape = new Shape();
    child.graphics.beginFill(bgColor);
    child.graphics.moveTo(aryPoints[0].x, aryPoints[0].y);
    for (var i:int=1; i<aryPoints.length; i++) {
        var pt:Point = aryPoints[i]; // for clarity in this sample
        child.graphics.lineTo(pt.x, pt.y)
    }
    child.graphics.endFill();
    addChild(child);
}

I've hard-coded your points into this method, but you could easily make aryPoints an argument to the function, in which case it would draw any shape for which it has an array of at least 3 elements.

Now, for drawing the X you want you would use the graphics.drawRoundRect() method first and then draw your X on top of that. Investigate the gradientFill and other tools that are available to you using the Graphics class.