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!
AUTHOR

Thomas Yip

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

RELATED POSTS

August 30, 2018 · SVG · Web · Fonts

5 Great Reasons you should be using Google Fonts to Design SVG Images

Great typography adds to a great design. But oftentimes, getting a decent custom fonts showing up properly on screens comes at a price, either with extra effort or compromising in quality or even both. We experimented to find out the best way t...

August 29, 2018 · SVG · Web · Illustrator

The Best Way to Export a Web-Ready SVG from Illustrator (2018)

When exporting SVG from Illustrator, you're prompted with many options. So which settings are the best to produce a web-ready SVG?

August 23, 2018 · SVG · Web · Diagramming · Javascript

Supercharge Vecta’s functionality with JavaScript based plugins

Vecta is more than just a normal browser-based SVG editor, it's especially powerful when you have all the flexibility you need to make the most out of the platform. Plugins can drastically change the way you work, saves time and enhances productivi...

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

Create a Free Account