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>
| Attribute | Description |
| x | x-axis coordinate of the left side of the rectangle |
| y | y-axis coordinate of the left side of the rectangle |
| width | The width of the rectangle. Zero or a negative value is an error |
| height | The height of the rectangle. Zero or a negative value is an error |
| stroke | The stroke color. rgba (transparency) |
| stroke-width | The 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>
| Attribute | Description |
| rx | For rounded rectangles, the x-axis radius of the ellipse used to round off the corners of the rectangle. A negative value is an error |
| ry | For 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">
| Attribute | Description |
| cx | x-axis coordinate of the center of the circle |
| cy | y-axis coordinate of the center of the circle |
| r | the 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/>
| Attribute | Description |
| cx | x-axis coordinate of the center of the ellipse |
| cy | y-axis coordinate of the center of the ellipse |
| rx | the horizontal radius |
| ry | the 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.
More Graphics Design Tips:
• Graphics File Formats for Your Web Page
• SVG Example Code to Rotate Elements
• MathML Basic Elements
• How to Place Greek Letters in an Inkscape Drawing
• Inkscape Circles, Ellipses, and Arcs Drawing Tutorial
• Inkscape Preferences
• Anti-Aliasing
• SVG Code to Create a Rectangle and Text and Translate as a Group
• Animation Software - The Amazing 3D World
• How to Make a Simple Animated Banner in Flash CS3