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 final exam will take place 8-10 AM on Wednesday, 16 December. As usual, all paper notes will be permitted. The exam will be comprehensive, but weighted toward the second half of the semester. Note that it will be written as a one-hour exam, but you may have the entire two hours if you feel it helps. Here is a sample exam.




Assignment B is posted.




There is a Python worksheet available, by way of giving you some problems to start on to identify what you do and do not know. Here is the same thing for Matlab.



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