June 30, 2017 · SVG · Diagramming · Web

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.


July 28, 2018 · SVG · Web · Diagramming

Color selection made easy

Found yourself scratching head to pick a professional looking yet interesting color to give a final touch to your drawings? We worked some magic and created a color stencil in Vecta, for everyone who needs good colors laid out in their drawings w...

July 20, 2018 · SVG · Web · Diagramming

You can now use Google Fonts in Vecta

When you’re drawing diagrams or illustrations in Vecta, sometimes you find yourself wanting to use some of your favorite fonts in your drawings. Now you can. Google fonts is now available in Vecta, and you have more than 800 font families to choos...

May 27, 2018 · SVG · Web · PNG

Making SVG easier to use (Why we build Nano)

There are a multitude of ways to embed SVG, each of them fraught with gotchas and compromises. In our quest to make SVG easier to use, we looked at different approaches and this is the story on why we build Nano.

Sign up for a FREE Vecta account and start
creating your diagram online.

Create a Free Account