No More Blurry Icons! Key Points for Creating SVG Data

In the image below, image A appears sharp and clear, while image B looks blurry.
As devices equipped with high-resolution Retina displays have become widespread, creating images that remain crisp on high-resolution screens has become essential in modern web design.

As a solution to this issue, SVG has gained attention because it is well suited for supporting a variety of screen sizes and resolutions.

Although SVG itself was developed around 1998, it was not widely adopted for many years because Internet Explorer did not support it as a standard feature.
However, after Internet Explorer 9 added standard support in 2011, and as smartphones and tablets with high-resolution displays became more common, SVG began attracting attention as an image format for the web.

Users increasingly zoom and scale screens across different devices, making scalable image formats more important than ever.
Because SVG images can scale without losing quality, they are particularly effective in these environments.

In TIPS Vol.34, we introduced important points related to exporting SVG files.
This time, we will focus on things to watch out for during the data creation stage before exporting, along with additional export-related tips that supplement the previous article.

TIPS Vol.34: How to Create SVG Files

First, let’s look at what SVG is and review its basic characteristics.
SVG has the following features.

So, what should you pay attention to when actually creating SVG data?
Here, we will introduce several important points to keep in mind during the design process.

SVG files can be exported from applications such as Illustrator and Photoshop.
In this article, we will assume that icons are being created in Adobe Illustrator and focus on the important points to consider when preparing SVG data in Illustrator.

Before creating your SVG data, first check that the following settings are configured correctly.
SVG is a vector format and scales very well, but older browsers such as Internet Explorer 8 and below, Android 2.3 and below, and older versions of iOS Safari have limited or no SVG support.

Because of this, you may still need to provide PNG or JPG alternatives for full browser compatibility.
Since PNG and JPG are bitmap formats, it is important to create artwork aligned properly to the pixel grid in order to avoid blurry or fuzzy rendering.

To ensure your artwork displays cleanly regardless of the final export format, keep the following points in mind.

To keep lines sharp and clearly rendered, it is important to pay attention to object coordinate positions in relation to stroke width.

For example, when drawing a straight line with an even-numbered stroke width, placing the line on coordinates containing decimal values can cause the stroke to cross pixel boundaries.
As a result, blurry gray edges may appear due to anti-aliasing.
When the stroke width is an even number, objects should be positioned on whole-number pixel coordinates aligned to the pixel grid.

On the other hand, when the stroke width is an odd number, using whole-number coordinates can cause blurring.
In those cases, shifting the object position by 0.5 pixels allows the line to align perfectly within the pixel grid, producing a much sharper result.

Once your artwork is complete, the final step is exporting the SVG file.

Have you been exporting SVG files using the default settings without much consideration?
Now is a good opportunity to review the export settings as well.

What did you think?
If the images you carefully created end up appearing blurry, you may need to recreate the original artwork from scratch.
To avoid the extra work of repeatedly correcting files, proper initial setup during the data creation stage is extremely important.

In our previous TIPS Vol.34 article, we also introduced methods for optimizing and reducing SVG file sizes.
We hope you will find it useful alongside this article as well.