SVG for Developers: Understanding the Basics, Benefits and Disadvantages

Graphics bring unique expressions on websites and as well help developers to effortlessly communicate profound ideas and concepts to users. It’s a key element on the internet and has since 1999 become scriptable, which allows for a more complex presentation of images on the web.

You may be very familiar with the use of the different raster image file types: JPG, PNG, and GIF. Let’s recall a bit. With support for 256 colors (8-bit), GIF (Graphic Interchange Format) is an outstanding format for animation and transparency, not including alpha transparency. The PNG (Portable Network Graphic) format is much better with support for over 16 million colors (24-bits) and all types of transparency, provided you don’t need animations.

The most widely used image format on the web JPG or JPEG (Joint Photographic Experts Group), chiefly because it’s compressible, has support for more than 16 million colors; 24-bits or 8-bits per pixel for grayscale, but no support for animation or transparency. Hence, JPG is the main graphics format developers use for static photographs. I didn’t mention Bitmap (BMP) since it’s typically not an image format for the web. BMP stores precise data of each pixel in an image, which makes the files really big (over 150 times the size of JPGs with the same resolution) and unideal for website graphics.

These resolution-dependent graphics formats are great, mostly when used appropriately. However, they all share a common shortcoming, which led to the introduction of SVG – the only vector image format for the web.

What is SVG?

Scalar Vector Graphics (SVG) is an Extensible Markup Language (XML)-based image format that describes two-dimensional graphics such as paths, lines, circles, patterns, text colors, etc. In a simpler definition, it refers to an image format with support for two-dimension, whose entire behavior and existence are controlled by an XML text file.

Another interesting feature is its scalability; you can take SVG images to any scale without losing their resolution. This is because SVGs render images with shapes, numbers, and coordinates, not with pixels as in raster image formats which render images by defining what color each pixel should be painted.

Let’s see how you can create SVG images and some of the reasons why you should consider using SVG in your projects.

How to create SVG images

You can create SVG images using any text editor, though the process is a little technical and requires some design and mathematics knowledge, especially if you’re creating some complex shapes. But, if you follow a tutorial for how to draw a horse by BIOWARS it can make the whole experience better. Imagine drawing an airplane on a canvas using just lines of codes. There is an easier way, however, but let’s use this to understand the basic concepts of SVG.

We use SVG graphic elements to make SVG images in a text editor. The process is to simply insert your graphic elements inside the <svg> and </svg> tags, specifying their coordinate, dimension, color, etc. For instance, the <rect> element can be used to draw a rectangle as seen in the following example.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="300" width="300">
<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)"/>
</svg>

The code above will draw a blue rectangle of 300x by 300px at the topmost left corner of your browser if saved as .svg file and opened with a browser. Now, you might be wondering why we have two heights and widths in the document. Let’s understand the entire code to see why. As mentioned earlier, your SVG code must be written inside the root element (<svg> and </svg>) to notify your browser on how to interpret those lines.

Just like in HTML, SVG requires a namespace declaration in the root element. In the above example, we supplied the xmlns parameter “http://www.w3.org/2000/svg” and the W3C recommended SVG version 1.1 within the root element. The dimension inside the root element is called the SVG viewpoint, which is the window or canvas through which the SVG image drawn within the root tag would appear. The viewpoint must have at least the same dimension with your entire SVG objects before they can appear in your browser.

The second line is easier to understand. The <rect> element, which is used for drawing rectangles, embodies the parameters of the proposed rectangle beginning with the dimension. The stroke-width describes the line thickness while the two RGB color models inform the browser which color to fill the rectangle and the line respectively. That’s quite simple right?

Now, we can move the rectangle around inside the page by declaring a value for x and y like this:

<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)" x=”15” y=”20”/>

Of course, we won’t forget to increase the viewpoint dimension to accommodate the extra space this would take.

The easiest way to create SVG images is by using drawing tools such as Adobe Illustrator, Inskape and Sketch. Instead of building from scratch, some JavaScript libraries such as Bonsai.js and D3.js are good sources for SVG images if you’re looking for icons, complex shapes, etc.

Adding SVG images

One of the benefits of using SVG images is the ease of integrating them with your design. You simply reference them in the src attribute of an img tag. This should refer to the .svg file saved in your website folder like this:

<img src=’example.svg’>

Alternatively, you can insert the SVG codes into your HTML document, with the <svg></svg> tags starting and ending the code as already mentioned earlier.

You can also refer to SVG image in your CSS for background-image like this:

.main-header {
background-image: url(example.svg);
}

Benefits of using SVG for developers

The need for SVG in your subsequent web projects cannot be overemphasized considering the current graphics requirements of the internet. Aside from the countless number of new devices with powerful resolution and screen sizes, websites now feature so much interactivity such that, without having total control of your graphics, it could be difficult to deliver professional-grade websites.

A few of the benefits include:

Scalability and responsiveness

As a non-resolution-dependent image format, SVGs can be scaled indefinitely, without becoming pixelated. This allows you, as a developer, to deliver topnotch graphic images to every user regardless of the resolution strength and screen size of their devices. You can combine different paths, shapes, and text elements to create stunning visuals that will be sharp and crisp at all sizes.

This is not available in any of the raster image formats with fixed dimensions, simply because they would never have enough data to fill every space when they are extremely scaled up. SVG calculates the distance between points to keep the paths constantly connected so that the image will remain sharp at any scale.

Extremely flexible and supports animation

Unlike raster images, which delivers the final copy of an image, SVG images are completely editable by adjusting the codes using a text editor or special drawing tools. Using class names or IDs of your SVG elements, you can style or animate your SVG images using CSS. Animation of SVG images is also possible with Web Animation API, SMIL or WebGL.

Most importantly, you can integrate your SVG images with other prominent open Web platform technologies and documents. SVGs can be scripted with JavaScript and styled with CSS like HTML.

SEO-friendly and small file size

Existing in a text format, SVG images improves the accessibility of a website, which is a great asset in page ranking. Beyond that, search engines are able to index SVG element text and that allows users to find your website using keywords in your SVG file.

SVG loads much faster since it doesn’t have a file to download and without a need for an HTTP request. Improving the resolution of a raster image file means increasing the number of dots (pixels). This will increase the image size, which will drag your website loading time. This is far from the case when you use SVG. As an image created using a set of instructions and coordinates, SVG file sizes are incredibly small (when optimized) compare to any other image file type. This results in faster loading time, increased page performance, higher search engine ranking while still improving user experience. For more information on this, visit SEO Consultant London

SVG has its own Document Object Model

SVG exists as a separate document, considered to have its own structure and positioned inside the normal DOM. This reputation is crucial for the viewBox attribute, which allows us to create a viewpoint of any dimension, draw images on varying sizes of canvas and display them without updating the SVG properties.

SVG is the image file format of the future

Without the arrival of more powerful devices with insanely magnificent screen resolution, developers wouldn’t have to deal with the overwhelming headaches of optimizing images for different devices. But this is not going to get easier in a few years from now, coupled with the growing hunger for increased interactivity from websites.

Somehow managing these challenges by serving different images to match the users’ viewpoint dimension is not cost-effective. And for the sake of business sustainability by saving bandwidth, money and improving user experience, efforts towards moving to SVG image format are inevitably becoming a top priority. There is a growing community of SVG supporters.

Before W3C’s introduction of SVG 1.1 (Second Edition) on 16 August 2011, which is potentially under review for a newer version, SVG 1.0 and 1.1 (First Edition) were already changing the way we handle images on the internet. This is a promise of something worth more than the regular raster image format, which is still very useful in our current state of web programming. SVG is not the best image format in all cases. Subsequent versions of SVG are expected to tackle some of the disadvantages of SVG; to be discussed later in this article.

When to use SVG image format

Of course, resolution-dependent image formats are still the best for photographs and other well-detailed images. Here is a list of common cases where SVG image formats are the best.

1. Logos and icons
2. Interactive images such as charts, graphs, maps, infographics
3. Animations
4. Application interfaces
5. Plain diagrams and illustrations
6. Special effects such as gooey or shape morphing
7. Low-intensity artworks and simple graphics

Drawbacks of SVG for developers

SVG is not supported by all browsers: Old browsers treat SVGs the same way an outdated Windows XP would treat flash drives or your Canon EOS 5DSr when you try to connect them. In a nutshell, SVG doesn’t work on older browsers; IE8 and lower. However, considering that legacy browsers are not really part of any future cause, coupled with the fact that only a handful of persons still use them, it’s not a major reason not to use SVGs.

SVG doesn’t support so many details: Being a blend of paths and points, SVG lacks the framework to display as much detail as pixel-based raster image formats. SVG doesn’t work with anything captured with a camera. Hence, photos and other forms of graphics with so many details are best displayed using raster image formats due to their support for a higher density of colors.

Understanding SVG code: While developers may be reckoned for knowing how to use several web programming languages, increasing this burden has proved to be a challenge. SVG code pattern is not actually difficult or totally different from web programming languages. But creating or manipulating eye-catchy images requires some effort. This is not what every developer would want to invest lots of time doing when bitmap images are handy and require no effort to embed.

Conclusion

The behavior of the graphics on a website in response to its wide range of users is an important aspect of web development today. And SVG image format is the grand solution, instead of rendering multiple image sizes, as usually seen in our current designs. This is because browsers compute how the image should be rendered using a set of instructions which ensures clear and crisp images at any scale.

Bitmap images remain the best for highly detailed images such as photographs, while SVG images are used for less-detailed images such as icons, logos, charts, infographics, etc. I would advise that you stick with drawing tools such as Illustrator or Sketch for creating SVG images and online libraries for icons and popular shapes. Coding should only be necessary when you want to manipulate your SVG images.

Please let us know how you use SVG and about other cools tips not shared here.