Introduction to Scalable Vector Graphics

Do you remember when websites were created with nothing more than HTML? Ah, those were the good old days. Web design was so simple. You would throw in a few HTML tags to provide formatting and structure for the text of your web page, add some graphics, upload, and that was it. Designing web sites has become ridiculously more complicated.

When wireless devices, such as cell phones, palm tops, and even computer screens in automobiles, became equipped with access to the internet and email, HTML became slightly outmoded. Yes, HTML is still used, but not exclusively. Many other programming languages and specifications have been created because the browsers and platforms running on these wireless gadgets are not totally compatible with many elements of the HTML programming language. One such language, perhaps the most important one, is called XML.

XML is significant because it enables programmers to define data without telling a web browser how to display it. Also, XML has no predefined tags, so it is possible to define data any way you want. So, data written and coded with this language can be displayed on any web browser because it really is just a text file. Other languages, such as XSL and XHTML are interwoven with XML files to format the data and to transform the file into an actual web page. Now that you understand how and why web design has changed, you are ready for a brief introduction to the main topic of this article, Scalable Vector Graphics (SVG). SVG files are graphics defined in XML format.

Because they are vector-based, these graphics can be displayed more effectively on different web browsers because the graphics do not lose any quality when they are resized or zoomed. This versatility is crucial because the display area on some devices, particularly wireless brands such as cell phones, is especially small. The resolution of a graphic is often lost completely on small screens, but with an SVG file, the resolution remains constant. Some other advantages of SVG are that the files are smaller and easier to compress than standard GIF or JPEG files.

Some other unique advantages of vector images are that they can be printed at any size, they are compatible with the Java programming language, and the text used in vector images is searchable (this is a really unique feature, because the text used in a GIF or JPEG image file is not searchable). One drawback of SVG is that it is not currently compatible with every single web browser, but likely will be by the year 2010. The file extension for these types of images is .svg.

The tags that are used to insert an .svg file into a web document are the embed, object, or iframe tags. There are several predefined shape tags that can used to create instances of certain shapes, and attributes such as width and height are used to define the size of the object. The predefined object tags used by SVG include rectangle, line, ellipse, polyline, path, polygon, and circle.

Other attributes that are used to define vector graphics include x and y coordinate attributes, and a radius attribute, which help to establish the relative size of the image so that it can be increased or decreased in size to adapt to the size of the screen. If you are a professional web designer, you should learn how to create Scalable Vector Graphics. By 2010, most browsers will be able to display .svg files. Also, there are now so many different web browsers used to surf the net, many of which can not display standard graphics.

Therefore, it is important for you to define your graphics in a vector-based, XML format. Not doing so could mean that your images will not be displayed properly on all computer screens.

Jim Pretin is the owner of http://www.forms4free.com, a service that helps programmers make email forms.