Keep your friends close and SVG even closer

awesome_tiger

Sun-tzu, aChinese general & military strategist (~400 BC,) coined the oft-used expressionKeep your friends close and your enemies even closer. “ If he were alive today he would probably alter that quote to “Keep your friends close and SVG even closer.”

I am always looking for the next “thing.” Generally, when I run across technology in its infancy stage, I take a long look at it and come to the conclusion that it isn’t for me. Sometime later, I will discover that the software is now an important part of the landscape.

Well, recently, I looked over my shoulder and there was another gleaming example of not keeping my startups close enough. While searching for solutions to bloated CSS code for mobile devices I came upon a great article discussing SVG (Scalable Vector Graphics).

As technology continues to progress,

the need to display this information is not keeping up with progress. As monitors are increasing in size webmasters have been rejoicing in the liberties of higher resolutions and size. Once mobile smartphones hit the market, the web design market was turned on its head. We have gone from designing images of 800 ppi (Pixels per Inch) for large monitors to 320 ppi for mobile devices.

Slow Adaptation

With the introduction of new standards web designers slowly adapted to responsive web design. What responsive design does is take the larger header image (800ppi) and reduces it to 320ppi. This makes the image view properly for the mobile screen and the desktop. The problem is the smaller image is still the same size in data as the larger image, resulting in slower load times in your mobile device.

Retina Display

To confound web developers even further, Apple introduced us to the new retina display MacBook Pro. Retina displays have a higher pixel density (220.5 ppi) than that of normal screens. If you’ve ever seen a retina display then I’m sure you’ll agree they do look spectacular. However, these retina displays cause problems for web designers.

The problem occurs when images that were previously saved as 72 ppi look distorted on retina displays. The solution to this problem is still not 100% solved and designers are looking at new ways to try and get around this problem.

Enter SVG

SVG are rendered as vectors and are therefore able to scale to whatever screen resolution, while maintaining the sharpness and crystal quality that we intended when we first designed them.

Take a look at the following links and see how Scalable Vector Graphics work:

While there are several programs that can create SVG, such as Adobe Illustrator and CorelDraw, we have a while before SVG becomes common on websites; not all browsers support SVG. As long as work-arounds, otherwise known as hacks that force the HTML code to work, are required it will take even longer for the practice of SVG will be implemented.

Additional reading:

What is SVG

SVG works within the XML environment. This means the XML language creates the picture. Essentially, you use XML to describe what the image should look like by utilizing attributes. SVG uses predefined shape elements in the design process. The elements are very basic. For example, <circle> draws a circle. You use attributes to define the coordinates, such as radius, color and border.

Getting Started With Scalable Vector Graphics (SVG)

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.

How to Put SVG Graphics on Your Web Page

SVG or Scalable Vector Graphics let you draw much more complex images and have them rendered on web pages. But you can’t simply take the SVG tags and slap them into your HTML.

Are you interested in SVG? Are you using them or considering them?

About the Author: Rick Clark (62 Posts)

Rick founded Rick' Creative Designs, an innovative digital design printshop, when those around him were still using linotype machines. He earned his degree as an Internet Professional, enhancing his repertoire as a "Creative Specialist." Today, he runs Clark Media, Inc. where he brings his creativity and experience to the forefront in web, print, social and mobile media.


About the Author: Rick Clark

Rick founded Rick' Creative Designs, an innovative digital design printshop, when those around him were still using linotype machines. He earned his degree as an Internet Professional, enhancing his repertoire as a "Creative Specialist." Today, he runs Clark Media, Inc. where he brings his creativity and experience to the forefront in web, print, social and mobile media.