An SVG image is not a fixed-sized bit image, like raster images. It can be displayed on any screen or at any resolution – whether a small LCD mobile screen or a large LED. The image will not be distorted. SVG photos are very small in size and the quality does not degrade even if they are zoomed. One interesting fact is that these pictures are easily found by search engines as they are coded in XML. So these lightweight images will give you SEO benefits and will make your web pages load faster.
“SVG’s biggest strength is basic vector shapes, it naturally works very well for graphs and infographics. Not only is it great for creating static graphs from given numbers, but it is also well suited for “live” graphs, fed by AJAX requests, user input, or randomly generated data.” – says Jonathan Cutrell in his article titled Why Aren’t You Using SVG?, published on June 7, 2012.
The code examples given in this article need no special tools to run. You just need to write the XML code in a text editor such as Windows notepad and save it with .html extension. To see the output, simply open it with a web browser such as Google Chrome or Mozilla Firefox.
There are many SVG editors available on the Internet, which lets you draw and edit SVG images without writing any code. Some of them are as follows: Vector paint, Method Draw, Boxy SVG Editor, and Draw SVG.
In this tutorial, we’re going to show you with code examples how to draw shapes in SVG.
You can draw a line by using the <line> element. First of all, you need to define the viewport. In other words, you need to specify, using the ‘height’ and ‘width’ attributes, the location where you want to display the shape. Then specify the starting point and the end point (X and Y coordinates for both) of the line using these attributes: x1, y1, x2, and y2. The style attribute enables you to style the shape using CSS code. This is the CSS code: “stroke: red; stroke-width: 3”.
Output: Rectangle: You can draw a rectangle by using the <rect> element. The first step is to define the viewport. As explained in the previous section, the viewport is the area where the image will be displayed. In this example, we’re styling the shape using CSS code. We have filled the rectangle with the blue color, and have set the border color to red. The border width has been set to 4 and the fill-opacity value is 5. Higher the fill-opacity value, darker the color will be. Code example:
You can draw a circle by using the <circle> element. Once the viewport is defined, use the <circle> element to draw the circle. Specify the center’s position using the ‘cx’ and ‘cy’ attributes and set the radius value using the ‘r’ attribute.
Notice that we have styled the previous shapes in this article using the ‘style’ attribute. We have used CSS code in the previous examples. But in this example, we’re not using CSS code. Rather, we’re styling the shape using attributes such as ‘stroke’, ‘stroke-width’, and ‘fill’. Use whatever you want for the styling task – either CSS code or shape attributes.
The ‘stroke’ attribute sets the outline color of the shape, the ‘stroke-width’ attribute sets the outline width, and the ‘fill’ attribute sets the fill color.
- cx: x coordinate of the center
- cy: y coordinate of the center
- rx: horizontal radius of the ellipse
- ry: vertical radius of the ellipse
This example shows how to draw a polygon in SVG with three sides. Use the <polygon> element to create a polygon. The ‘point’ attribute lets you set the coordinates for all the points.
This was a quick tutorial on how to draw shapes in SVG. If you are really interested in SVG graphics, draw these shapes using SVG code, customize them and see how useful they are for you. As SVG images are highly customizable, small in size and SEO-friendly, you should use them for your website. Choose SVG images over traditional images if website speed and SEO are important to you.
Although the shapes that have been shown in this tutorial are very basic, they are extremely useful in many cases. For example, you can use the shapes for drawing icons, logos, graphs, and infographics for your blog or website.
I hope this tutorial was helpful. Happy drawing!