SVG Cheat Sheet
Vector Objects
| Object | Example | Result |
|---|---|---|
| circle | <circle cx="20" cy="20" r="15" stroke="black" stroke-width="1" fill="blue"/> | |
| ellipse | <ellipse cx="30" cy="20" rx="25" ry="17" stroke="blue" stroke-width="2" fill="red"/> | |
| line | <line x1="5" y1="5" x2="55" y2="37" stroke="green" /> | |
| path | <path d="M5 5 C5 5 10 35 55 30 L30 5" style="stroke: black;fill:white" /> | |
| polygon | <polygon points="5,5 15,35 55,35 45,5" style="stroke:black; fill:rgb(200,200,200)" /> | |
| polyline | <polyline points="30,5 25,8 20,12 15,20 20,28 25,32 30,35" style="fill:blue;stroke:black; opacity:.5" /> | |
| rect | <rect x="5" y="5" width="50" height="30" stroke="red" stroke-width="1" /> | |
| text | <text x="5" y="15" style="font-family:Times,serif;fill:red;font-size:12px">Text</text> <text x="15" y="30" style="fill:blue;font-size:15px;opacity:.2">Here</text> |
Gradients
Gradients and a few other graphical elements can be defined between <def> tags near the top of the SVG file.| Gradient | Example | Result |
|---|---|---|
| linearGradient | <linearGradient id="purple_red" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,0,255); stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/> </linearGradient> <linearGradient id="purple_yellow" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" style="stop-color:rgb(255,0,255); stop-opacity:1"/> <stop offset="50%" style="stop-color:rgb(255,255,0); stop-opacity:1"/> </linearGradient/> |
|
| radialGradient | <radialGradient id="green_blue" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(0,255,0); stop-opacity:.2"/> <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/> </radialGradient> |
Attributes
Attributes for SVG objects may be assigned values in two ways. They can always be assigned in the form attribute="value", or they can frequently be assigned in a CSS style specification: style="attribute:value".
| Attribute | Valid Tags | Describes | Example |
|---|---|---|---|
| cx, cy | circle, ellipse | The x and y coordinates of the center of a circle or ellipse. | <circle cx="20" cy="30" r="15" stroke="black" stroke-width="1" fill="blue"/> |
| fill | Almost all | This describes the color or gradient used to fill the interior of the graphics object. | <rect x="5" y="5" width="50" height="30" stroke="red" fill="green" /> |
| opacity | Almost all | This describes the translucence of the fill color. 0 indicates tranparency, while 1 indicates complete opacity. | <rect x="5" y="5" width="50" height="30" opacity=".5" fill="green" /> |
| stroke | All | This describes the color of the boundary of the graphics object. | <rect x="5" y="5" width="50" height="30" stroke="red" fill="green" /> |
| width, height | rect | Specifies the width and height of a rectangle | <rect x="5" y="5" width="50" height="30" stroke="red" fill="green" /> |
| x,y | rect, text | This gives the location of a vertex of the graphics object. | <rect x="5" y="5" width="50" height="30" stroke="red" fill="green" /> |
There is a nice on-line wysiwyg SVG editor available. You can use it to generate SVG interactively, and then bring up the code to paste into your own HTML file.
