How to use SVG (Scalable Vector Graphics) to create graphics?

Scalable Vector Graphics (SVG) is a format of graphic that can be generated on the fly by using the data extracted from XML files or a database. Creating images on the fly in the other formats like GIF, JPEG, and BMP are not easy since they cannot be created dynamically by extracting data from the data file. Moreover if you view images from these formats at 200% or 300% of the actual size you will not see the images clearly and you will be seeing granular forms of the areas in the images. You need external tools like Paintbrush, Photoshop, and Fireworks etc to create such images in those formats. In case you need help with this kind of interface, you can choose one of the best writing services and ask for professional assistance.

Whereas creating SVG images are very easy and all you need is a text editor to create images using SVG. It is possible to create images on the fly by taking the data available in other files. Faster download is possible to see these images since you will be downloading only the text files before it is displayed in the browser. Hence we can say that SVG is the format that is preferable for images on the web. 

There are many advantages of using SVG. SVG is a vector format and hence the images in SVG format can be viewed and printed at any resolution. You can create images dynamically. Data driven images can be created easily using SVG. They are plain text files in XML format. Since they are plain text files search engines can search for texts in those files easily. Apart from dynamic images you can also create interactive images in SVG. It is an open standard and all the advantages of XML apply to this format of image.

To create an SVG image you need to know the basic elements that are used to create images. The basic elements of SVG are <path>, <text>, <tspan>, <textPath>, <g>, <rect>, <circle>, <polygon>, <polyline>, <ellipse>, and <defs>. The purposes of some of these elements are given below. For detailed information on other elements you can refer to the documentation for SVG.

<path> - used to define a shape.
<text> - used to draw text.
<textPath> - used to render text on a given path.
<g> - with this element you can group different elements as one.
<rect> - used to draw a rectangle
<circle> - used to create circles
<polygon> - create polygons using this element
<polyline> - used to draw polylines (starting and ending points are open)
<ellipse> - used to draw an ellipse / circle.

We will see some simple examples on how to use these basic elements to create SVG graphics.

<svg width='400' height='40'>
<text font-family='Arial' font-style='normal' font-size='22pt' stroke='none' fill='#0000ff'>
<tspan x='35' y='30'>This is SVG</tspan>
</text>
</svg>

The above code draws the text “This is SVG” as graphics. It is displayed in Blue color. The <text> element along with its attributes which are self-explained creates an image with the text. To position the text at some point with the canvas you are using the <tspan> element. The width and height of the SVG is given by the attributes in the <svg> tag.

Suppose you want to group some elements you can do so by using the <g> tag. An example of grouping is given below:

<svg width='400' height='300' >
<g fill='#FF0000' stroke='#000000' stroke-width='1'>
<rect x='180' y='01' width='22' height='102' />
<circle cx="270" cy="52" r="50" style="fill:gray;"/>
<ellipse cx='83' cy='52' rx='82' ry='50' />
</g>
</svg>

The above code groups a rectangle, circle, and an ellipse. All these three shapes are grouped using the <g> tag that encloses all the three elements. The “fill” attribute in the <g> specifies the common color that is given to all the elements of the group. If you specify any other color for a particular element, then the group color is overridden for that element. If you look at the code for the circle element, you can see that the color of the circle is “gray”. Hence the circle will be displayed in gray color while the other elements of the group will take the group color which is ‘red’. According to the co-ordinates given in the code, you can see that an ellipse, rectangle, and a circle are displayed in that order next to each other for the above code.

If you want to view the graphics, you need to have an SVG viewer installed in your system. You could also install a plug-in for your browser that displays the SVG documents as graphics. You can get a free plug-in from the web in Adobe’s website. If you have installed Photoshop, you would have been prompted to install SVG viewer while installing the software. Once you install the plug-in you can view the SVG document in the browser. All you have to do is to save the above code in a text file with extension .svg. Then open this file to view the graphics.

Existing drawings can be converted to SVG. Tools for editing and creating SVG documents are available in plenty like SVG Composer, SVG Factory, SViGio, and SVGMaker. Drawing created using tools like Visio can be converted to SVG. XMLSpy is an excellent tool that is used to transform data in XML documents to SVG using XSLT. You can try these tools for creating and transforming data to SVG.