scottishpig (scottishpig) wrote,

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>

  • FARNHAM'S LEGEND 5: Chapters 9, 10, and 11.

    Hey, folks: Holy shit. Where'd all that time go? Workin' a lot, mostly. Whup! Got to the bottom of that really quickly. The girlfriend's now working…

  • Overthrowing Overtone

    Hey, folks. For a while now, I've been a little interested in Overtone and Emacs Live... but I haven't been particularly feeling the magic... for…

  • FARNHAM'S LEGEND 4: Chapters 7 and 8

    Hey! Been a bit over a week. Not that I don't have a great love for this book... which is fantastic, but I accidentally discovered Nimona, and like…

  • Post a new comment


    default userpic

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.