resolution-independence
  • 7050 views

How to use vectors in webdesign?

What if we could use vectors in webdesign? In a perfect world we don’t need to upload the same icon with different sizes, to work in different resolutions, we just use a singe vector file that can be resized as needed without loosing its sharpness. In a perfect world, yes.
Unfortunately we are far away from a perfect world. We have different browsers (Firefox, Chrome, Safari, Opera, IE), smartphones with different screens and resolutions. And still, our imperfect world has a couple of dreamers, who think this can be the future.
So let’s see what will be the future! Notice that some of these posts were written in 2012, so the future is here 🙂

Bellow you can read some fantastic posts from these dreamers about using SVGs in webdesign. If you are using one of the modern browsers, you will see what is this about.

Making Web Icons Smarter

clock A smart icon is designed so that elements within it to adjust to input, interaction or associated data. In short, it’s dynamic. Smart icons are SVG-based and controlled with a combination of Javascript and CSS.

Using SVG For Flexible, Scalable, and Fun Backgrounds

You can use SVG anywhere you use a GIF, JPEG, or PNG. With SVG, you’re providingdrawing instructions rather than a bitmap. SVG, being a vector graphic, can scale to fit the web page, while bitmap images such as JPEG and GIF cannot, or at least, can’t scale cleanly.

Getting Started With Scalable Vector Graphics

As a web designer it’s high time you knew how to implement SVG (Scalable Vector Graphics) into your websites. Let’s now take a look at the basics of SVG, as well as more complex designs such as logos or icons.

Using SVG

02

SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily, but there is plenty you should know.

Resolution Independence With SVG

resolution-independence

In this article, we’ll look at Scalable Vector Graphics (SVG), one of the most underused technologies in website development today.

If you would like to try one of these methods, read this post about How to save SVG Files in Illustrator!