The SVG Canvas, Coordinate System, And Viewport

When you see SVG images on the screen you’re viewing only part of the canvas on which they’re drawn and you view the canvas through the SVG viewport. Canvas and viewport are both independent and connected and their relationship can be confusing and lead to unexpected results at times. That is until you understand the relationship and how to control the connection.

Continue reading

SVG Basics—Creating Paths With Curve Commands

Last week I began a discussion about paths, mainly focusing on the different line commands you can use to draw lines and shapes. Today I want to continue the path discussion and talk about the different curve commands at your disposal.

Continue reading

SVG Basics—Creating Paths With Line Commands

A couple of weeks ago when talking about basic SVG shapes, I mentioned paths as a more general way to create any shape. Paths are more powerful and flexible than the basic shapes and they can be used to create any or all of them.

Continue reading

SVG Basics—Fills And Strokes

The last couple of weeks I’ve been walking through some of the basics of scalable vector graphics. First I showed how to include SVG in HTML and then I showed how to create the basic shapes SVG provides.

Continue reading

SVG Basics—How To Create Simple Shapes And Lines

Last week I started a series on SVG and walked through the different ways you can include SVG inside an HTML page. Because I needed to show you something that would display on your screen, the examples included a green rectangle.

Continue reading

css.php