A Quick Primer On SVG

Why you should already be using SVG

While you may only have recently started to hear people talk about SVG, or calable vector graphics, the technology has been around since 1999. For a variety of reasons SVG adoption has been slow, but as web browsers have added native support and trends in web design have come to favor responsiveness and flexibility, SVG is gaining traction quickly. SVG is incredibly robust and powerful, but all you need is a little bit of knowledge to start incorporating SVG into your designs. There are tools available, like Grunticon and the Glyphs Company platform, to help make this powerful technology easier to use.

A Quick History Lesson

Officially released as an open standard by the W3C in 2001, SVG’s adoption was initially hindered by a lack of native support in major web browsers. Luckily for designers and developers, this is no longer the case, and more and more people are looking to SVG to improve their website’s graphics. Google’s decision in 2010 to start indexing SVG content in both its web and image search results represents the technology’s growing acceptance. With mobile web browsing recently having surpassed traditional desktop use and the increasing necessity of “responsive design” as a design and development philosophy, SVG has become an popular tool because of its ability to look good on any sized screen.

What Is An SVG?

Vector graphics use mathematical expressions to create lines, curves and other geometric shapes. The vector, or “path”, draws a line by connecting a series of points, which are defined with fixed positions on an x-y coordinate plane. Each individual vector can be assigned a stroke color, shape, thickness, and fill. Below is an example of SVG code:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60.018 40.01"> 
   <defs> 
      <path id="a" d="M57 40H3c-1.657 0-3-1.343-3-3V3c0-1.657 1.343-3 3-3h54c1.657 0 3 1.343 3 3v34c0 1.657-1.343 3-3 3z"/> 
   </defs> 
   <clipPath id="b"> 
      <use xlink:href="#a" overflow="visible"/> 
   </clipPath> 
   <g clip-path="url(#b)"> 
      <g fill="#F04F4D"> 
         <path d="M45 0h15v40H45zM0 0h15v40H0z"/> 
      </g> 
      <path fill="#FFF" d="M15 0h30v40H15z"/> 
      <path d="M30 7.813l-2.047 3.818c-.232.416-.648.377-1.064.146l-1.483-.767 
         1.104 5.863c.233 
         1.07-.512 1.07-.88.608l-2.586-2.894-.42 1.47c-.048.193-.26.396-.58.348l-3.27-.688.858 
         3.123c.184.694.327.982-.186 1.165l-1.165.548 5.63 4.573c.223.173.335.484.256.766l-.493 
         1.617c1.938-.224 3.675-.56 5.614-.767.17-.018.458.264.457.463l-.257 
         5.923h.942l-.15-5.912c0-.198.26-.494.43-.475 1.94.207 3.677.543 
         5.615.766l-.493-1.618c-.08-.282.033-.593.256-.766l5.63-4.573-1.
         167-.548c-.512-.183-.37-.47-.185-1.
         166l.86-3.124-3.27.688c-.32.048-.533-.155-.582-.348l-.42-1.47-2.586 
         2.895c-.368.464-1.113.464-.88-.607l1.103-5.864-1.482.766c-.416.232-.832.27-1.064-.145" fill="#F04F4D"/> 
   </g> 
   <g opacity=".1"> 
      <path d="M57.018 1.01c1.103 0 2 .897 2 2v34c0 1.103-.897 2-2 2h-54c-1.103 0-2-.897-2-2v-34c0-1.103.897-2 2-2h54m0-1h-54c-1.657 
         0-3 1.343-3 3v34c0 1.657 1.343 3 3 3h54c1.657 0 3-1.343 3-3v-34c0-1.657-1.343-3-3-3z"/> 
   </g> 
</svg>

An SVG is created using XML, and as a result can be easily be modified using a global stylesheet. The fact that an SVG is made with code, allows the vector to be adjusted to any size without a loss in sharpness -- the “scalable” in SVG. Additionally, increasing the size of an SVG does not significantly increase the file size of the image, which allows developers to employ the scalability of an SVG without giving their pages burdensome load times.

SVG & Responsive Design

Even if you don’t intend to have massive graphics on your page, thoughtful web developers and designers can still benefit from using SVGs. Raster images, unlike SVGs, are made up of fixed pixel sets. High pixel density screens like Apple’s Retina Display require the pixel sets of raster images increase in size as well. Images with lower resolutions can look fuzzy and unattractive on retina-style displays, but since SVGs are composed of shapes they can scale up appropriately. In this sense, SVG graphics are “resolution agnostic” -- in other words, they remain beautiful and useful no matter the resolution of the screen. The image below is the output of the SVG code above. The Canadian flag will remain sharp no matter the screen. Responsive design is an approach to web design that looks ensure the same experience for users on any size screen. Often, this takes the form of a “mobile first” design strategy, where the site is optimized initially for a smaller screen, and then scaled up. Mobile sites are a special challenge for developers, because users have become accustomed to using gestures like pinch and zoom to navigate sites on smaller screens. Using an SVG file for your icon, button, or similar UI graphic, ensures that everything will remain sharp no matter how an end-user chooses to interact with your site.

"Browser Agnostic"

As mentioned earlier, a major hurdle in the adoption of SVG has been native browser support. Though lesser-known browsers included native SVG support early on, it was not until recently that Firefox, Chrome, and most importantly Internet Explorer did the same. While Firefox began support in 2005 and Google and Safari in 2006, it was not until 2011 that Internet Explorer, with the release of IE9, followed suit. Though IE currently represents a much smaller percentage of browser usage than in previous years, recent studies show that IE accounts for anywhere between 25-50% of all desktop browsing. Developers who are concerned with ensuring compatibility for users with older web browsers like IE8 fortunately have resources in the form of numerous plugins.

Why Not Icon Fonts?

As a recent blog post on our site outlined, there are a few different ways to create SVG code through popular photo and graphics editing software - namely Photoshop, Illustrator and Sketch. The most simple method is to create the vector graphic and just save the file with an .svg extension. For web developers looking for a higher level of granularity and control, the SVG code can be opened in a text editor and further manipulated. SVG can be inserted to an HTML document “in-line”, or directly into the page’s code. Though this is not the only way to use SVG, it offers many advantages to developers. Because it is XML, it can be controlled with CSS, even your page’s global stylesheet, as well as Javascript.

Using SVG

An example of creating an SVG graphic in Adobe Photoshop. The examples below are not intended to be a comprehensive list of all the methods of using SVG graphics. There are a ton of variations even within a single technique. However, we have highlighted a few of the most useful and/or popular ways designers implement SVG into their work. The goal of Glyphs Company is to take the guesswork and headache out of using SVG, so you can keep focusing on making something awesome.

Inline SVG

As mentioned above, SVG code might look intimidating, but it behaves the same as HTML. Once you have an SVG, you can drop the code “in-line” into your HTML document. Because the page does not need to make a second HTTP request just for the graphic, this allows for a faster experience for the end-user. More importantly, implementing SVG in-line allows you to take advantage of the fact that an SVG graphic is built from code -- meaning that you can control the inner workings of a graphic with CSS, and create animations and other features with Javascript. In-line SVG allows the unique benefits of the technology to really shine through. Moreover, you do not sacrifice functionality for compatibility - in-line has native support for the same browsers as any other method. That being said, having to dump code, especially if you have multiple graphics, can lead to a bloated, hard to read HTML document. Moreover, because an in-line graphic is not separately cached, which could be a problem if you are using the same graphic across multiple web pages.

External Image File / CSS Background Image

Two other common methods, similar to one another in functionality, are to import the SVG as an external image file or as a CSS background image. Both methods have the same level of compatibility as in-line SVG, but most critically do not allow you to control the code in the SVG itself.

"Fragment Identifiers"

For design items like icon sets, you may have half a dozen icons in one SVG file but may only wish to use one or two on a given page. SVG allows the user to specify a certain size “view box”, and then easily make reference to that specific “fragment” of SVG. The code can be placed either inline or as an external image file, and the fragment can be called with a simple #whatever identifier in the desired location. While this technique is largely supported in browsers, there are compatibility problems with Safari.

Resources

Here is a list of some what we think are some of the best SVG resources around the web. Share your thoughts and any other great resources you find in the comments.

• Grunticon
• Icomoon
• Glyphs Company
• SVGOMG
• SnapSVG
• Inkscape