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.
Welcome to Math 300!
Assignment 5
is posted.