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 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 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"/>
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"/>


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.

A solution for the final is available.

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