logo-bs logo-dxn logo-odl

Implementing scalable graphics

The designers here at JH are always looking at ways to display graphics they make in the best possible way. This tutorial explains how we create crisp, stunning graphics and use them in our web projects.

 

Whether you’re a designer, a front end developer or a bit of both, you want your beautifully crafted vector logos and icons to look the best they possibly can on all devices, especially retina screens. This article describes our workflow for using .svg online and a fall back .png for those browsers that don’t support them yet.

For those who don’t know, SVG stands for ‘Scalable Vector Graphics’. If you’re using Adobe Illustrator you’re already creating vector graphics. However if you’re are saving them as gif’s, jpgs or png’s you’re not harnessing the full power of your original design. You are literally downgrading your graphics at the point you save them. This is when our workflow comes in.

Why use SVG at all?

  • Small file sizes that compress well
  • Scales to any size without losing clarity
  • Looks great on retina displays

Creating your graphics

Create or take your existing vector .ai or .eps logo or icon. Next expand your selection Object > Expand… then tick Fill and Stroke and click OK. Then use the Pathfinder tool to Merge the selection (only click Merge once). What these steps do is reduce the object to the least amount of points possible. Next crop your artboard Object > Artboards > Fit to Artwork bounds. Points and canvas size matters in SVG’s and by doing these few steps it makes your SVG as small as possible. After, edit the artboard at this point and increase the height and width by one or two pixels Document Setup > Edit Artboard. Often the graphic won’t be on whole pixels so this step is also very important. So simply we would make 94.66 px into 96px. Without doing this you can get flat spots on a round logo where the curve touches the edge of the canvas.

Saving an SVG & fallback PNG

Next you will need to save the SVG. File > Save as… Format SVG (svg). Then SVG Options. SVG Profiles: SVG 1.1 this is the default setting so no need to change anything here. Then you will need to save a PNG. We use PNG for the transparency properties. However you can use anything you want depending on the graphic. We then always check how the PNG will look by using the View > Pixel Preview setting. Make sure you view this preview at 100% or you won’t get an accurate view of your graphic. The one or two pixel added to the edge also helps here as the graphics will be anti aliased.

What browsers support SVG’s?

All major modern web browsers support SVG’s. This includes Mozilla Firefox, Internet Explorer 9 and above, Google Chrome, Opera and Safari. We use SVG’s for all of our logos and icons on the sites we produce. The only jpg’s and png’s we have on our sites are product images. Here’s a full list of browser support.

Adding the CSS

Firstly for this to work you will need use Modernizr. If you aren’t familiar with modernizr it is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

How Modernizr works

Modernizr runs quickly on page load to detect features, it then creates a JavaScript object with the results and adds classes to the html element for you to key your CSS on. Modernizr supports dozens of tests and optionally includes YepNope.js for conditional loading of external .js and .css resources.

Downloading and adding Modernizr to your HTML file
http://modernizr.com/download/

Writing the CSS/SASS

There are three code examples. They start with CSS, then Sass and finally the Sass mixin’s. If you’re not using Sass yet, you should check it out, you won’t be disappointed. You can choose whichever works for you or amend the code and develop it further if you wish.

CSS method


.company-logo {
	width: 96px;
	height: 96px;
	background: url(img/logo.svg") no-repeat;
}

.no-svg .company-logo {
	background: url(img/svg/logo.png") no-repeat;
}

Sass method


$img-path: "../img/svg";

.company-logo {
	width: 96px;
	height: 96px;
	background: url("#{$img-path}/logo.svg") no-repeat;

	.no-svg & {
		background: url("#{$img-path}/logo.png") no-repeat;
	}
}

Sass mixin method


$svg-path: "../img/svg";
$png-path: "../img/png";

@mixin svg-img($name, $props: null, $bg: null) {
	width: 96px;
	height: 96px;
	background: $bg url("#{$svg-path}/#{$name}.svg") $props;

	.no-svg && {
		background: $bg url("#{$png-path}/#{$name}.png") $props;
	}
}

Final thoughts

This workflow works really well for us. There are articles explaining that you can paste SVG data straight into your CSS however we don’t really like this method as you can’t cache your images and the chunks of SVG data are hard to manage to in your stylesheet. We really like seeing crisp, sexy graphics on retina screens showing off the logos and icons we create, you’ll be blown away with the results.

 

Looks like there are no related posts

Start the conversation

Whether it’s a new site or an existing one, Jamie’s ready to respond to you on
jamie@wearejh.com or +44(0)115 933 8784