November 4th, 2015

Spiketail Hatchling

SVG in a single post

I'm writing an abstract SVG (scalable vector graphics) generator– possibly part of a larger project. I've always been in love with SVG as a means of generating graphics. You can include it inline with HTML in most modern browsers, or run it through Batik to render it into a more traditional format (PNG).

I've sat down and re-learned SVG a few times. Here's the cheat-sheet... literally all you need to generate a basic image with SVG shapes.

SVG is an XML standard. Your entire image lives inside an <svg>...</svg> block.

<svg width="300px" height="250px"
viewBox="<minX> <minY> <width> <height>">

viewBox is optional, but cool for using a local coordinate system.

Important shapes: Attributes
  • rect: x, y, width, height, rx, ry (rx, ry for rounded corners)
  • circle: cx, cy, r
  • ellipse: cx, cy, rx, ry
  • line: x1, x2, y1, y2
  • polyline: points*
  • polygon: points*
  • path: d**, pathLength
  • text***: x, y

* polygon/polyline points are a string of space-separated coordinates with
commas within the points. "0,0 0,50 50,50 50,0 0,0"

** path d is its own turtle language which might be cool to learn at
some point-- (see here)

*** Nexted in a <text>...</text> block can be a <tspan> block that works just
like a span in HTML for styling, etc. Text has extra attributes for
custom leading/kerning, too (see here)

Any of the above shapes can have a transform attribute-- accepts space-separated
function calls as a parameter (bracketed params are optional)--
  • translate(x, [y])
  • scale(<sx>, [<sy>])
  • rotate(<angle>, [<cx>, <cy>])
  • skewX(<angle>)
  • skewY(<angle>)

Rotation angles are in degrees measured clockwise

  • Everything inside a <g>...</g> block is a group.
  • Attributes applied to a group are inhereted by its members unless
    specified elsewhere
  • Transformations applied to a group are similarly inherited

  • A clipPath block can be set, and elements from this block can be intersected
    with other shapes.
  • clipPaths are made with an "id" attribute which is referenced by a shape/group's
    clip-path attribute.

Example-- intersection of two rectangles.
<clipPath id="clippy">
<rect x="100" y="100" width="100" height="100" />
<rect clip-path="url(#clippy)" x="50" y="50" width="100" height="100" fill="red"/>

Any of the shapes above can have these attributes (there are many others for making
dashed lines, etc-- text attributes carry over from CSS):
  • fill (paint), fill-opacity (0.0 - 1.0), stroke (paint),
  • stroke-linecap (round, butt, square),
  • stroke-linejoin (miter, reound, bevel), stroke-opacity (0.0 - 1.0),
  • stroke-width (number)

  • Generally a color, or a color URL... #XXX or #XXXXXX or
    rgb(255,255,255) or rgb(25%,25%,25%)
  • Can also be a URL -- url(#id) -- for use with gradients
  • SVG also has the notion of using the above attributes in a CSS style
    with style= and class=

Example-- Memetext:
<svg width="300px" height="300px">
<text x="10" y="100"
font-family="impact" fill="#FFF" stroke="#000" stroke-width="2px" font-size="36pt">HELLO!</text>