June 30, 2017 · Everything SVG

A Guide to Getting Sharp and Crisp SVG Images on Screen

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?

Blurred image at left, sharp and crisp at right
Blurred image at left, sharp and crisp at right

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:

How coordinates are mapped in SVG
How coordinates are mapped in SVG

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

How SVG stroke width affect sharpness
How SVG stroke width affect 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.

Easy sharp and crisp SVG images in Vecta
Easy sharp and crisp SVG images in Vecta

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.

Shape properties in vecta

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.

Like the article? Give the author some claps.

Share it with your friends!

Thomas Yip

Founder at vecta.io, created Electra, engineering nerd.

Creating a diagram?

Introducing the world's first SVG editor with javascript based plugins

Learn more...


May 14, 2019 · Everything SVG

5 Most common problems faced by SVG users

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.

January 05, 2019 · Everything SVG

Tips for smaller svg sizes

You fire up your favourite editor and produce SVGs but found their sizes to be bigger than expected. Is there anything you can do to reduce SVG file sizes? Read on to find out how to reduce SVG sizes to a bare minimum.

October 28, 2018 · Everything SVG

Using fonts in SVG

A year after SVG 1.0 was introduced back in 1999, SVG fonts was introduced with intention to allow designers to design SVG graphics with any fonts they like and have the fonts showing up correctly on the end user browser. But 18 years later now, how ...

Keep yourself updated with the latest development on SVG, Web development, CSS and Javascript.