5 Most Common Problems Faced by SVG Users

May 14, 2019 ·  Yi Qian · Web Design · Everything SVG

As SVG adoption increases 100% year-over-year, front end developers and designers like yourself will increasingly be expected to use more and more SVG in websites, all around the world.

If you are just starting to give SVG a try, and already have a beautiful drawing at hand, you may expect your SVG to show up exactly as it is in the editor, all sharp and crisp, unfortunately, that may not be the case once embedded on your website.

It's easy to throw up our hands and say, “Forget about SVG, let's just go back to the good ol' PNG!”, but there are actually techniques you could employ to resolve these common problems easily, to ensure you enjoy the benefits of SVG, reduce a ton of bandwidth and make your site load faster.

We have consolidated and summarized our experiences in dealing with SVG, after compressing nearly 200,000 SVG at Nano - the world's best SVG compressor.

Here are the 5 most common issues faced by SVG users, and knowing them could help you to get productive with SVG quickly:

1. Missing fonts

You embedded Google Web Fonts into your SVG and the fonts render differently in browser:

There are 3 possible causes, and here is how you can solve them.

A. Wrongly declared font name

If you're using Roboto from Google Web Fonts:

@import url(https://fonts.googleapis.com/css?family=Roboto:900,100);

But when your SVG is exported (mostly on older versions of Illustrator), the font-family that appears in your SVG is:

<text font-family="'Roboto-Black'"> </text>

There's no Roboto-Black in your @import URL, causing missing fonts when your SVG is embedded onto your web site.

Quick fix: Hit Ctrl-F, find and replace the font names in your SVG codes (from 'Roboto-Black' to 'Roboto' in my case).

B. You're using <img> or background image to embed your SVG

Using <img> to embed SVG like this:

<img src="my-file.svg" />

Or using CSS background image like this:

#id {
  background-image: url(image.svg);
}

These are by far the best choice for static graphics, but could result in missing fonts.

Why?

<img> and background image are not allowed to access to externals links due to security concerns and in this case, the font @import URL is inaccessible, resulting in missing fonts or the fonts being rendered using Times New Roman.

Quick fix: The simplest and fastest way - Use Nano

Drag and drop your SVG into Nano, then export it as SVG. The fonts should look perfect now. Nano selectively embed fonts into your SVG to ensure the SVG size stays small and ensure fonts renders well irrespective of where you embed them.

We do not recommend converting fonts to outlines as your fonts will not be accessible as text, in addition to having huge file size and blurry fonts.

Another alternative: Change from <img> to <object>

Changing the way you embed SVG from <img> to <object> allows the fonts URL to be accessible and displayed accordingly, read more here.

C. You're using SVG Fonts - only supported by certain browsers

If you're using SVG Fonts like this:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
  <font>
  <font-face font-family="Super Sans" ></font-face>
  ...
  </font>
</defs>
<text font-family="Super Sans">My text uses Super Sans</text>
</svg>

The fonts will not render correctly in major browsers like Chrome and Firefox since SVG Fonts is no longer being supported.

Quick fix: Instead of using SVG fonts, use Web safe fonts or Google Web fonts instead, read more here.

2. Missing SVG namespaces

You double click on your .svg file, only to see this showing up on your browser:

Your SVG namespace is not declared properly causing the SVG image to be displayed incorrectly.

Quick fix: Check and fix your SVG namespaces. Alternatively, some compressors like Nano will insert missing namespaces into your SVG if required, and remove unnecessary namespace tags and attributes which causes huge file size.

3. SVG appears to be blurry or distorted

Sometimes your SVG seemed to be blurry and not as sharp as your original design on editor.

You can fix it by using either ways below.

A. You exported SVG with too few decimal points

When exporting SVG from Illustrator, you're prompted with many options:

On decimal field, if set to 1 or 2, and your shapes/paths requires precision, then your SVG will not show correctly because these shapes/paths has been rounded off to lower precision.

Quick fix: Re-Export your SVG with 4 decimals as the safest option. If you're worried on huge file size caused by extra decimal points, you can use Nano's visual comparison tool to tweak and reduce the decimal points after export, to get the lowest file size and make sure your image works like magic.

B. Ensure your paths and shapes are all on grid

Coordinates are mapped in SVG like this:

Therefore a 1 pixel line with x-coordinate of 2.5 is sharp but not when it has an x-coordinate of 2.

For a 1 pixel line (stroke width = 1), to ensure sharpness, you have to offset shapes by 0.5 px for odd numbered stroke width (1, 3, 5). But when your stroke width is even (2, 4, 6), no offset is required and your SVG will be sharp on grid regardless. Read more.

Quick fix: Check your x and y-coordinates, also width and height, and ensure that the values are either an integer for a 2 px-line (or any even numbered stroke width) or at 0.5 decimal points for a 1 px-line (or any odd numbered stroke width). An easy way is to customize your editor's settings so the shapes will always fit on grid:

4. Large SVG file size

“Can I reduce my SVG file size to be closer to its PNG equivalent?” has always been the question from SVG users.

Most of the time, by using SVG, you expect SVG file sizes to be smaller and help save cost and bandwidth, but once exported from editors, most SVG has a huge file size which does not justify its usage when compared to PNG.

Here are how to get smaller SVG file sizes:

A. Simplify your SVG

Certain functionalities in your go-to SVG editor may produce larger files, and can be replaced with simpler operations.

For example, use shape operations like union, fragment, difference and intersect instead of clip path, and avoid complex gradients with transformations. Learn more here.

B. Compress your SVG after export

Upon exporting your SVG, optimize and compress SVG with available compressors like Nano or SVGO. These compressors typically reduce file size by more than 50% and you'll be amazed at these savings, just by a simple compression!

Read more to find out how this user saves up to 90% file size in Nano.

C. Enable GZIP

SVG is ideally suited for GZIP compression when compared with PNG and JPEG (already compressed), saving up to 80% bandwidth on average. Be reminded that GZIP compression is only available for SVG in <img> and <object>, but not Inline SVG.

5. Cannot open & edit SVG file on editors

From Illustrator to Inkscape or from Sketch to Illustrator, sometimes importing .svg files into other editors just don't look right, or worse still, you can't open them at all.

Each editors have their own way to implement how things are drawn in SVG, and chances are some attributes or functions are not supported by other editors. Therefore causing SVG importation issues.

A. Always choose Export as SVG from editor

It removes all unnecessary metadata and editor-specific attributes from the SVG. Keep your SVG as clean as possible, and if you do not have access to the editor, you can clean your SVG using compressors like Nano or SVGO.

B. Import and edit your SVG in Vecta

Head to Vecta.io, then import your SVG there. You should be able to edit and re-export it as SVG. Thanks to the experience we've gained by accepting multiple sources of SVG files for Nano compression, Vecta.io is able to accept SVG produced by almost all editors.

Hope this piece saves you time from Google-ing around for solutions to get your SVG working. Leave a comment and let us know if this is helpful to you? Or if there's anything we missed out to cover.

Have you got any issues with your SVG that wasn't mentioned here? Reach out to us with your SVG at [email protected], we'd love to help you out and collect more SVG with edge cases to update this article.

Yi Qian

CXO at Capital Electra X/ Vecta.io. Solving problems by connecting dots between brains, over a cup of coffee.