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.

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