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.

Creating a diagram?

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

Learn more...

RELATED POSTS

The definitive guide to CSS styling order

Ever wondered why your CSS does not apply and require the important keyword instead? Or why SVG editors uses inline attributes instead of CSS style sheets? Read on to find out how styling methods affect what's being applied to your elements.

December 01, 2018 · SVG · Web · PNG

Responsive images using SVG instead of srcset

It used to be, if you embed an image onto your website, that will be the end of the story. But with the proliferation of high resolutions displays, webmasters all over the world are scrambling to update their websites with high-res images using srcse...

October 28, 2018 · SVG · Web · Fonts

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 ...