Scalable Vector Graphics (SVG) have been a part of the internet since the early ‘00s, but recently have they become easier to use and more widely consistent across browsers and devices. The benefit is fantastic, your logo and icons always look sharp, as do any custom illustrations used to boost your online presence.
However, trying to get an SVG to play nicely in Android, iOS and Internet Explorer without the proper export settings can be frustrating. Here’s how we were able to bring consistency to about 40 graphics during prototype QA for our upcoming application, MemLife.
With the proper export settings, accommodating a wide variety of browsers and devices can be as simple as:
<img src="logo.svg" style="width:125px;"/>
The settings below are from Illustrator, Adobe Creative Cloud, (<- Limited Time: Get a $75 Credit on an Annual Plan!). Note the following settings:
- SVG Profiles: SVG 1.1
- Image Location: Embed
- Not selected: Use <textPath> element…
- Not selected: Responsive
Tip: click on “SVG Code…” in the lower left to get a look at the dimensions and other code elements.
In the blue square SVGs below, each image has the same width setting. The two squares should look consistent across a wide array of modern browsers (tested via Browserstack).
<img src="square.svg" style="width:125px;"/>
The first SVG was created by using the letter size default artboard in Illustrator, the second was a copy of the first where the artboard was trimmed to size. As you can see, the SVG wrapped in the image tag is using the width of the invisible artboard instead of the artwork inside of it. If your SVGs are looking small or misaligned, exporting them again with a cropped artboard using the settings above should do the trick.
To trim the artboard to size, click on the Artboard tool icon and see the settings image below.
Note: you’ll need to be supporting Android 4+, IE9+ – for a table of supported browsers, visit Can I Use
New! Check out MemLife, an app to preserve the memories and stories of life, simply and privately.