Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Introducing to SVG for websites

Thursday, January 16th, 2014 by Servage

svgSo far we have focused on the tried-and-true bitmapped web graphic formats, but there is another up-and-coming option that I’d like you to be familiar with. It’s somewhat misleading to call Scalable Vector Graphics (SVG) “up-and-coming” because the specification has been in development since 1999 and it became a Recommendation in 2003, but thanks to improving browser support, we may finally be able to take advantage of the benefits it has to offer.

As I mentioned at the beginning, SVG is a bit of an oddball. Unlike other web image formats, SVG is a vector image format, meaning that it contains instructions for drawing shapes rather than grids of pixels. This makes SVG a good choice for icons, logos, charts, and other line drawings. It is not appropriate for photographic imagery, although bitmapped images and even videos can be embedded in SVG.

Vector images can scale very large or very small without any change in quality. Lines and text stay sharp, regardless of whether it is viewed at 100 pixels or 10,000 pixels—try doing that with a bitmapped image! Now that our web designs and interfaces must work on all devices of all scales, from smartphones to high-density monitors and large-screen televisions, the ability to create a single image that looks great in all contexts is an epic win.

Ubiquitous SVG support would certainly solve some of the issues we are facing with maintaining image resolution on high-density displays.
Drawing with XML
What really sets SVG apart is that it is an XML language for providing drawing instructions. Bitmapped graphics are stored as largely unintelligible code. Let’s look at a simple example and the XML text file behind the scenes.

This example shows an SVG image, svg4u.svg, that contains a blue square, an ellipse with a gradient fill, and some text (not pretty, I know, but it gets the point across).

Here is the file that generates that image. If you read through it closely, I think you’ll find it’s fairly intuitive.

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="450px" height="200px">
<linearGradient id="yellowgrad">
<stop offset="0" stop-color="#FFF200"/>
<stop offset="1" stop-color="#F15A29"/>
</linearGradient>
<rect x="50" y="50" width="100" height="100" fill="#4F5AA8"
stroke="#000000" stroke-width="4" />
<ellipse cx="100" cy="100" rx="50" ry="25" fill="url(#yellowgrad)" />
<text x="175" y="150" fill="rgb(200,0,0)" font-family="Verdana"
font-weight="bold" font-size="50">SVG 4 U!</text>
</svg>

Let’s take a closer look at what is going on in svg4ru.svg. Because it is an XML file, it starts with an XML declaration. It also needs to follow the XML syntax, so you’ll notice that all elements are lowercase, all attributes are in quotation marks, and all elements are closed (for example, <rect />). The svg element establishes a drawing area that is 450 by 200 pixels. Pixels are the default measurement unit in SVG, so you don’t need to include the “px”. The xmlns attribute stands for “XML name space,” and it simply identifies the XML languages used in the document.

OK, here is the drawing part. The square is created using the rect (for rectangle) element with its width and height set to 100 pixels. You can see that attributes are used to provide the position, dimensions, fill color, stroke style, and so on. In addition to rect, SVG includes the elements circle, ellipse, line, polygon, and polyline for drawing lines and shapes.

In our example, the ellipse element is positioned to appear centered over the square, and it is filled with the “yellowgrad” gradient that was created by the linearGradient element earlier in the document. The text in the image is contained in a text element and styled with attributes that take their syntax from CSS. Although it is not shown in this example, it is also possible to place bitmapped images in SVG graphics using the image tag. Of course, there is a lot more to the SVG language than I can cover here, but by now you should have a general understanding of how it works.

Resources and further reading

W3 Schools

CSS Tricks

Introducing to SVG for websites, 3.5 out of 5 based on 2 ratings
Categories: Guides & Tutorials

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.