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.
The last test will take place at the final exam time,
Monday 12 December, 1:30-3:30. It will be written as a one-hour
in-class on-line test. As usual, you can use any resources
you want.
A
Sample Exam
is available.
Note that the URL for the exam will not be emailed to all.
If you need to take the exam from outside class, contact the
instructor to get on the email list.
Assignment B is posted.
Most recent scores are on-line at
My.math.
Check the Info page. Let the instructor know
if you find a discrepancy.