Department of Mathematics

Math 300: Mathematical Computing

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.

Department of Mathematics, PO Box 643113, Neill Hall 103, Washington State University, Pullman WA 99164-3113, 509-335-3926, Contact Us
Copyright © 1996-2020 Kevin Cooper