A Guide to Getting Sharp and Crisp SVG Images on Screen

June 30, 2017 ·  Thomas Yip
Software Development Director · Everything SVG · Web Design

Have you created any images lately that does not seem to be as sharp as you would like? Are you constantly adjusting your SVG coordinates to ensure your images are sharp?

In this post, we will explore why images gets blurred and what you can do to get a sharp image every time. Although we shall be using SVG as an example, but the same principle applies to all image formats.

Understanding the SVG coordinate system

In order to get a sharp image, we must first understand how SVG coordinates are mapped to pixels on your screen:

SVG coordinates are mapped to the left of screen pixels and not in the middle, as illustrated above. Therefore, when you try to draw a single pixel line at (2, 1), your line will be drawn on half pixels resulting in blurred or anti aliased line.

To draw a sharp single pixel line, we must offset 0.5, and draw at coordinate (2.5, 1), for both X and Y coordinates, a hassle for sure, but that's not the end of the story.

How stroke-width affects sharpness

Because browsers draw lines in between pixels, therefore, all stroke widths with even numbers (0, 2, 4, 6) will be sharp because a full pixel is drawn on screen.

If you are making SVG images manually, you will be required to constantly offset shapes with odd stroke width (1, 3, 5) by 0.5, to display these shapes sharply because only half a pixel is rendered on screen, but fortunately, there is an easier way.

Getting sharp and crisp SVG images, the easy way.

If you are not already using Vecta.io, you should, and we've made it very easy for anyone to export sharp SVG, PNG and JPEG images. Vecta is a true WYSIWYG SVG editor, meaning if you see a shape being sharp on screen, rest assured it will be exported sharply, irrespective of image formats.

Chances are, the majority of your shapes will be single pixels stroke widths, and it is far easier to draw on rounded coordinates, e.g (10, 10), therefore, we have adjusted the SVG viewBox by (-0.5, -0.5), essentially offsetting the coordinate system ever so slightly, so users can easily draw on grid and automatically get sharp images.

To be sure, for shapes with even stroke-widths, users can still adjust shape coordinates by 0.5, using Shape Properties and still get a sharp image.

Vecta can also export a selection of shapes, where you get to choose and select what to export. In this case, Vecta will automatically calculate the proper offset so your shapes, stay sharp irrespective.

All our image assets on Vecta.io are drawn using this way, and exported as SVG, so they are as sharp as they can be, and because the drawings are shareable, collaborative and always available on the cloud, it is easy for us to quickly make modifications, to ensure our website stays sharp and beautiful.

Thanks for reading, and please do let us know if it's helpful.

Thomas Yip
Software Development Director

As the creator and founder of Electra Cloud, which is now known as Capital Electra X, he introduced the market to an innovative, disruptive, and fully cloud-native electrical CAD solution. The driving force behind Capital Electra X, he is committed to shaping the future of easy-to-use Electrical CAD software development. Find him on Linkedin.