Simple, Cross Browser Way to add SVG Graphics to Your Website

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

SVG Illustrator settings

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;"/>

Cross Browser Device SVG Test Image

Cross Browser Device SVG Test Image

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.

SVG Artboard Crop

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.

Preserve the stories of life. Download MemLife iOS App
/ / / /

    Leave a Reply

    Your email address will not be published. Required fields are marked *