The Benefits of SVG Images in Web Design

Vipspatel

9 years ago

00-featured-inkscape-icons-vectors

Retina screens and 1080p monitors are forcing the hand of modern web designers. Vector art has long been used for print work and logo design, but hasn’t always been accepted on the web. Now with so many tutorials and free tools like Inkscape it’s never been easier to learn vector design.

Web designers who are comfortable with PNGs may have a tough time changing their routine. But flexibility is vital in any type of design so it’s a good idea to acquiesce and try to at least understand the benefits offered by SVG web graphics.

I want to go over a series of benefits and suggestions for designing vector graphics on the web. Many of these examples do use typical PNGs but others have moved onto SVG. The bigger point is to start designing web graphics as vectors so they can be scaled and edited appropriately, regardless of filetype.

Scalable Shapes & Icons

Vector graphics are most valuable to designers because they’re easy to scale and reposition for any circumstance. From icons to illustrations and background patterns, vectors are the obvious solution for their natural flexibility.

Mobile responsive websites can also benefit from vector graphics because SVGs will resize naturally to any size. This means one image file can be used and look great at all resolutions.

One Design Company features an endless number of custom icons and logos for their featured clients. Groupon, AIGA, and NBC are just a few examples. Each of these logos are fully-responsive SVG files that scale based on the browser window.

You can open these SVG files in your browser and even save them to your computer for editing in Illustrator. Lower on the page you’ll notice more icons and logos which also rely solely on SVGs. It is definitely the best filetype for responsive design or any flexible-width container.

The landing page for Hell’o Baby also uses vector graphics switching between SVG and Canvas elements. Both techniques are resolution independent and run smooth on all devices. Retina screens especially love vectors because they’ll look crisp on @1x, @2x, and @3x devices.

Some designers may argue that they’d prefer to create separate @1x/@2x graphics saved as PNGs. This is perfectly fine but it also requires more work. And if the original PSD/AI file uses vector shapes then you might as well export as SVG to save yourself the trouble.

Dynamic Animations

Vector animation relies solely on SVG graphics being manipulated through CSS3 or JavaScript. Back in the day web designers used to rely on Flash animation but over time this trend was ignored and retired like table-based layouts.

At this point all modern browsers support SVG. IE8 is the last version without direct support and this can be fixed with a JS library such as SVGWeb. So holding back on SVG animation just because of browser support is a worry better spent elsewhere.

JavaScript can be used to create animated icons based on user interaction, but these aren’t the only method. Some designers like to create looping animation tied directly to the icon itself. One Design Company which was mentioned earlier has a great example on their about page.

Scroll beneath the header and you’ll find a section with three icons. These are pure SVG graphics built using paths and animated in the same fashion. Each animation is built to loop indefinitely without support from any other resource.

It’s a nice effect when used sparingly to capture attention and breathe life into a page.

On the other hand we can use SVG/CSS animation to create some nifty effects during user interactions. Bjango’s top navigation animates an elastic bounce effect on hover. It’s definitely subtle but just noticeable enough to leave an impression on the visitor.

SVG vector animation is no different than regular HTML/CSS animation. Granted there are fewer limitations and it’s slightly more complex but the effects are supported and encouraged by the development community.

Frontend SVG Manipulation

Static raster image formats can be manipulated as regular HTML elements, but SVGs go a step further. Since each vector is made of paths you can actually manipulate individual paths on their own.

Web developers have been waiting a long time for this kind of control. For example, take a look at this tutorial which covers the basics of visualizing data with SVGs and JavaScript. It’s actually possible to create graphics programmatically using only JavaScript code.

In reality pure JS code is verbose and rather time consuming. This is why libraries have been released to save developers time and frustration. If you want to learn more skim through this Stack Overflow post covering the basics of code-based SVG manipulation.

Otherwise the best method for learning is to dive in and get messy.

SVG JavaScript Libraries

Learning how to use SVGs in web design is an extensive process. The actual design part in software like Illustrator or Inkscape will take some practice. But the development part is also rather tricky.

You can shorten the dev process by utilizing free code libraries meant for SVG manipulation. If you’re not sure where to begin check out a few of these libraries and see if they can help.

Snap.svg

The best place for any new developer to get started is with Snap.svg. This library is perfect for learning how to manipulate SVG graphics for the web and it has plenty of free tutorials online.

Raphael.js

Raphaël is slightly more complex but offers similar potential compared to Snap. Raphael uses VML which is a rendering method for SVGs supported by Internet Explorer. This library has been around for a while and it may not be the most popular, but it definitely gets the job done.

Bonsai.js

What I love about Bonsai is that it behaves like a fully-featured library. A few lines of JavaScript will create dynamic graphics that can be animated and embedded onto the page. Their sample demos are rather fascinating if you have the time to check ’em out.

D3.js

Data-Driven Documents(or D3) run on JavaScript and work with dynamic vector shapes. This D3 library is meant specifically for rendering data with charts, graphs, and animated effects.

SVG.js

SVG.js is a very simplistic library comparable to Snap. This would be a great place for anyone to get started learning vector manipulation through JavaScript.

Free Code Snippets

Along with the previously listed libraries you may also enjoy deconstructing free code snippets. Developers love to release their work online for comments and critiques. These open source code snippets build upon SVG vectors and use CSS/JS to animate vector interfaces on the web.