SVG

Scalable Vector Graphics

What is SVG?

SVG (Scalable Vector Graphics) is a vector-based image format developed for the Web. Because SVG is a vector format, images render in perfect detail, regardless of size. The format is very lightweight compared to images and font icons, and renders extremely fast on browsers. It is supported by all modern browsers and works regardless of device type.

The World Wide Web Consortium (W3C) defines SVG as “A markup language for describing 2D graphics applications and images, and a set of related graphics script interfaces.”

What makes SVG so popular, and why are more designers using it?

Because it works!

SVG files are small and scalable. While the format is best-suited for shapes, it has a variety of practical applications. Brand logos, icons, user interface elements and plenty of other design elements can work in the SVG format. The biggest bonus is that they are vectors. So an SVG image can be used at almost any size.

SVG files are easy to manipulate and control, as well. Not only can an SVG be saved as a static image, but you can also add interactivity and filters to make the image even more fun.

As a general rule, SVG is best-suited for images that might evolve or change over time or for images that contain animation or other dynamic effects. Use the format for visuals such as logos, sketches, shapes, graphics and charts, or other simple images.

SVG Pros & Cons

Why would you want to move away from PNG or JPG to SVG? There are plenty of reasons why this format might be the best use for your projects.

Pros of Using SVG

SVG is a vector format. This alone is important when thinking about responsive design, where image sizes often change based on device. An SVG is small enough that one file can do all the work and there is no loss of quality on larger screens.
SVG content is indexed by Google.
You can do almost anything with an SVG image that you can do with any other image, such as adding filters, blend modes, color, or drop shadows.
SVG files are accessible to users of assistive technology. They are text-based and machine-readable by screen readers.
SVG integrates with traditional Web Standards, such as HTML and CGI scripts. It can be formatted with CSS.
Files sizes are tiny, which decreases load times. (We all know that page speed affects SEO ranking!)

Cons of Using SVG

You are probably sold on SVG after reading through all of the benefits. But there are a few negatives to consider, as well.

Older browsers — such as Internet Explorer 8 or lower — don’t support SVG. Be aware that some users won't see your images.
One crucial disadvantage associated with vector graphics is the limited range of programs. You will need specific tools such as Adobe Illustrator or Inkscape in order to create, save, and convert SVG files.
SVG code, which is structured XML, can be complex and time-intensive.
SVG does not work for complex graphics, images and photos.

Demo 1: PNG vs. SVG Resolution

SVG is vector based, which allows for infinite resolution. Your screen size, zoom level, resolution or whether or not you have a retina display, does not matter.

On the other hand, using PNGs means you are restricted to pixels. Consideration also must be given to retina devices, where you have two PNGs, one with almost always a huge file size.

Comparison

Compare the resolution of the two icons sets below. The upper set is PNG, lower is SVG.

Zoom in (ctrl/cmd + ‘+’) on your browser.

PNG

SVG

The difference in quality between the two is evident. The original (small) PNG is crisp, but when size is increased, the icons lose quality — colors become faded and jagged edges are obvious. The SVG icons, however, each render in perfect detail, regardless of size.

Demo 2: Creating an Animated Loader Icon

Most modern browsers support animating SVGs by using something called “SMIL”, which stands for “Synchronized Multimedia Integration Language”. This language allows you to animate certain foundational and transformational attributes of an SVG. For example, you can animate X and Y positions or the fill color of an element.

Let's Get Started!

In this demo we're going to learn how to make a very simple loader icon comprised of three rectangles. With the use of SVG animations, the rectangles will ultimately change their heights to suggest something is loading. (This is different from CSS animations as SVG animations reside in the actual SVG markup.)

Add SVG Element to HTML Page

We start by adding an <svg> element to our HTML page. It has width, height, and viewBox attributes set.

Add the First Rectangle

Now let’s add the first rectangle with some positioning values, dimensions, and a fill color. Here's the first:

The Animations Explained

To animate this rectangle we used a self-closing <animate/> element inside the <rect>.

Within that <animate/> element, we added some attributes, the first being <attributeName/>. This defines which of the <rect> attributes we want to animate.

Then we defined the values. These determine how the rectangle animates. You can experiment with these settings until you find something you like.

We use begin to set when the animation starts, dur to specify a duration, and repeatCount to state what kind of repetition we’d like the animation to have.

Add the Second & Third Rectangles

Here are the second and third rectangles along with the first — you’ll notice they’re identical, but have different fill colors, are shifted over along the x axis, and have slightly delayed animations:

Let's take a look at our loader. Looking good so far!

Let's Add Some Bounce!

Let’s improve it slightly by also animating the y position of each rectangle to add a little bounce. To do this we need to add an additional <animate> element to each rectangle:

The Final Result

That’s it! We have created our own animated loader icon!

Try it yourself. Modify the settings and colors to see what you can come up with. Loader icons can take any form — we’re only limited by our imaginations!

Source

What's Next for SVG?

The future of SVG is just starting. As an adopted mobile image format (and standard), the use and development of SVG will only continue to grow.

According to W3C, “SVG 2 is currently under development, and will add new ease-of-use features to SVG, as well as more closely integrating with HTML, CSS, and the DOM, and deprecating features not supported by all browsers.”

Print hardware companies are looking at ways to better use SVG for printing processes and already have support of industry leaders such as Adobe and Canon. Usage in mapping and GIS is also expanding, allowing for better mapping and zoom capabilities.

There’s an almost endless opportunity for implementing SVG into projects across the Web and in printed design. That's the beauty of the vector-based format.

Project Resources

Now that you're getting intrigued about SVG and can see how it can be useful in your projects, we've provided a list of resources to help you get started. Also check out the fun online animated SVG demos to see SVG in action! Code is provided!

We hope you have found this tutorial helpful! Until next time, happy coding!

Project Documentaion