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
Grouping:
- 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
Clipping:
- 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" />
</clipPath>
<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)
Paint:
- 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>
</svg>
