Menu
SVG Basic Shapes Tutorials

SVG (Scalable Vector Graphics) is a graphic format used used to display a variety of graphics on the Web. SVG uses XML (Extensible Markup Language) to define vectors that describe lines, curves, shapes, colors, and text. Using vectors means that SVG graphics is infinitely scalable.

You might think that SVG and XML means it is extremely complicated but actually it is nothing more than text files and is pretty much human-readable. That means you can modify SML files nad even create your own. There are powerful and complicated WYSIWYG (What You See Is What You Get) applications for creating SVG graphics, but there are trade offs. A WYSIWYG commonly adds a huge amount of overhead. This might be META data, unnecessary precision, and non-standard code. When you hand code SVG you get fast and efficient graphics.

SVG has a huge number of practical uses; banners, charts, drawings, diagrams, graphs, icons, illustrations, logos, maps, and much more. SVG is an W3C (World Wide Web Consortium) standard and as a global industry standard it will continue to be the standard for vector graphics in the browser.

In this article I explain how to code the basic shapes; rectangles, rounded rectangles, circles, ellipses, and polygons. All you need to follow along is a basic text editor like Windows Notepad and a web browser. Save your files with the extension .svg and double-click on them to open them in your browser.

Rectangle

<svg width="200" height="150" version="1.1" xmlns="http://www.w3.org/2000/svg"<
  <rect x="10" y="10" width="100" height="100" stroke="black" stroke-width="4" fill="white"/>
</svg>

Rectangle Syntax

<rect x y width height stroke stroke-width fill>

AttributeDescription
xx-axis coordinate of the left side of the rectangle
yy-axis coordinate of the left side of the rectangle
widthThe width of the rectangle. Zero or a negative value is an error
heightThe height of the rectangle. Zero or a negative value is an error
strokeThe stroke color. rgba (transparency)
stroke-widthThe stroke thickness
fill(color) rgba (transparency)

Rounded Rectangle

<svg width="200" height="150" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" rx="10" ry="10" width="100" height="100" stroke="black" stroke-width="4" fill="white" />
</svg>

Rounded Rectangle Syntax

<rect x y width height rx ry stroke stroke-width fill>

AttributeDescription
rxFor rounded rectangles, the x-axis radius of the ellipse used to round off the corners of the rectangle. A negative value is an error
ryFor rounded rectangles, the y-axis radius of the ellipse used to round off the corners of the rectangle. A negative value is an error

Circle

<svg width="200" height="150" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx="60" cy="60" r="50" stroke="black" stroke-width="4" fill="white">
</svg>

Circle Syntax

<circle cx cy r stroke stroke-width fill">

AttributeDescription
cxx-axis coordinate of the center of the circle
cyy-axis coordinate of the center of the circle
rthe radius of the circle

Ellipse

<svg width="200" height="150" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="60" cy="60" rx="50" ry="20" stroke="black" stroke-width="4" fill="white"/>
</svg>

Ellipse Syntax

<ellipse cx cy rx ry stroke stroke-widt fill/>

AttributeDescription
cxx-axis coordinate of the center of the ellipse
cyy-axis coordinate of the center of the ellipse
rxthe horizontal radius
rythe vertical radius

Polygon

<svg width="200" height="150" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <polygon points="10,100 110,0 110,100" stroke="black" stroke-width="4" fill="white"/>
</svg>

Polygon Syntax

<polygon points="x1,y1 x2,y2 x3,y3 xn,yn" stroke stroke-width fill/>

points are pairs of (x, y) coordinates of a polygon vertexes.


Learn more at amazon.com

More Graphics Design Tips:
• Drawing Text with Draw SVG
• Getting Started with Blender
• Inkscape Exercise: Draw Photorealistic Sphere
• The Browser Safe Palette
• Coding a Matrice in MathML
• MathML mo Element Operators
• SVG Matrix Transform Example Code
• Example Code for X3Dom Basic Primitive Shapes: Box, Sphere, Cylinder, Cone, and Torus
• Stop Motion Animation: Nine Creative and Easy Techniques
• How to De-haze a Photo with GIMP