The Green Square on GitHub Pages

The green square is my version of hello world - it just means to put a green square on the screen. In this case, I'm going to just use a div:

Let's make some green squares with SVG. First, with background-color:

Next with rect & fill:

Next with g and transform="translate(x,y) scale(.5)" (note that these transforms are order dependant):

SVG lets you define things and then reuse them with different style settings.

Okay, now let's print out some (multi-line) text:

Hello Josh

Note that SVG doesn't support word-wrapping natively, but foreignObject (for HTML) is widely supported.

Text goes here but it doesn't wrap properly at 100px width.