As we continue to improve our processes for the upcoming 33 Degrees website redesign, we decided it was time to change how we were handling icons. We wanted to move away from using an icon font for pictograms and instead use Scalable Vector Graphics (SVG). Let’s take a look at some of the benefits of using SVGs and how to create an SVG sprite sheet for a website.
Benefits of SVGs
SVGs are vector graphics which means, that instead of being comprised of pixels like raster graphic (JPG, PNG, GIF), they use coordinates on a canvas to have the browser draw the image. This is extremely important in today’s multi-device landscape where laptops, smartphones, and tablets have a growing variety of resolutions, screen sizes, and network connection speeds. This is where SVGs provide a solution to many of these performance concerns.
Resolution independent: SVGs appear sharp on standard and high resolution screens.
Scalable: SVGs can scale up or down in size on a page without pixelating.
Small file size: SVGs are comprised of coordinates which often make them smaller in file size.
Screen-reader accessible: SVGs can contain metadata providing accessibility for the disabled.
Though we won’t be examining these in this article, SVGs can also have:
CSS styles: SVGs can be styled with inline CSS or class selectors like HTML.
Linked images: SVGs can include references to external raster images in the file.
Media queries: SVGs support embedded media queries.
Benefits of an SVG Sprite Sheet
A sprite sheet is a collection of pictograms organized into a single image. Effectively reducing the number of server requests the browser has to make, allowing the webpage to load faster. The browser can then display a different portion of the sprite sheet in each location on the page where a pictogram should appear. Let’s look at how this can be used to create a set of social media buttons.
Creating an SVG Sprite Sheet
Begin by determining how many icons the sprite sheet will contain and the default size for each icon. For our example, we will create three icons with a default size of 32 by 32 pixels. Create a new Adobe Illustrator file that is 96 by 32 pixels to accommodate the three 32 pixel icons stacked horizontally. Place each of the three social media vector icons inside one of the 32 pixel thirds of the Artboard. Then choose “Save As” from the File drop-down menu. In the Save As dialog box, change the Format to “SVG” and click “Save.” At the bottom of the SVG Options dialog box, click “SVG Code…” This will open a plain text file with the SVG source code. Copy everything between the opening and closing
<svg> tags. In a new HTML document, paste the code directly after the opening
<body> tag. We place the code here because SVG sprites need to be loaded before the code in which the icons are referenced.
With the SVG code in the HTML, we need to add some attributes to the
<svg> tag. First, add
style="display:none;" which will ensure the SVG doesn’t appear at the top of the webpage. Then add the ARIA attributes
aria-labelledby="img-title img-desc" after the style attribute. Accessible Rich Internet Applications or ARIA attributes define web content for people with disabilities. The role attribute informs the browser that the SVG is an image and the aria-labelledby attribute says what IDs correspond to the ARIA values,
ing-desc. The final SVG tag should look like this:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="96px" height="32px" viewBox="0 0 96 32" enable-background="new 0 0 96 32" xml:space="preserve" style="display:none;" role="img" aria-labelledby="img-title img-desc">
Next, each icon in the sprite sheet code needs to be wrapped in a
<symbol> tag. Each tag should have an ID and viewbox attribute. The symbol’s ID value is used to reference the icon in the content while the viewbox value declares the visible portion of the SVG. A viewbox is a rectangle that is declared through four values. The first two values are the X and Y coordinates where the top left of the rectangle begins and the last two values are the width and height of the symbol.
<symbol id="icon-facebook" viewbox="0 0 32 32"> <path d="M23.038,10.56l-0.367,4.767h-4.887v16.569h-6.178V15.327H8.333V10.56h3.272V9.072V7.58V7.333 c0-1.413,0.044-3.564,1.077-4.931C13.763,0.995,15.255,0,17.784,0c0,0,4.141,0,5.921,0.621l-0.833,4.888 c-1.366-0.415-2.648-0.415-2.648-0.415c-1.284,0-2.439,0.458-2.439,1.739v0.504v1.737v1.49h5.254V10.56z"/> </symbol>
<symbol> tag add
<desc> tags with ID values that correspond to the SVG’s aria-labelledby values. This is where the image title and description are added for people with disabilities.
<symbol id="icon-facebook" viewbox="0 0 32 32"> <title id="ing-title">Image Title</title> <desc id="ing-desc">Image description</desc> <path d="M23.038,10.56l-0.367,4.767h-4.887v16.569h-6.178V15.327H8.333V10.56h3.272V9.072V7.58V7.333 c0-1.413,0.044-3.564,1.077-4.931C13.763,0.995,15.255,0,17.784,0c0,0,4.141,0,5.921,0.621l-0.833,4.888 c-1.366-0.415-2.648-0.415-2.648-0.415c-1.284,0-2.439,0.458-2.439,1.739v0.504v1.737v1.49h5.254V10.56z"/> </symbol>
Then to reference an SVG symbol within the webpage, insert the code
<svg><use xlink:href="#icon-facebook" /></svg> with the appropriate symbol ID where the icon should appear.
Here is the completed code.
SVGs provide lots of benefits and flexibility. Best part is that all modern browsers support SVGs making now the best time to begin implementing SVGs into your next project.