Accurate SVG Archery Target Images

I often need images of target faces for various projects and presentations, and it’s always frustrating trying to find images that are high-resolution, correctly proportioned, and the correct colours. So, I thought I’d fix this problem by making my own, and sharing them here.

For this project, I’m producing the images in Scalable Vector Graphics (SVG) format. All digital images fall into one of two categories

  • Raster images, where the image is made up of a grid of different coloured pixels
  • Vector images, where an image is described using geometric shapes and attributes.

Raster images are great for photographs, but don’t scale well. If you zoom in on them, they get pixelated and blocky, because there’s a finite amount of resolution there. This means they’re not a great choice for diagrams and illustrations where you need sharp clarity in lines, shapes and text.

Vector images on the other hand are perfect for diagrams and illustrations. By mathematically describing the shapes in the images, the output is always crystal clear at any zoom level. This means they’re not so useful for photographs and heavily textured images though as those are hard to describe using purely geometric objects.

The final benefit of vector images is their size – they tend to be much smaller when used for diagrams, than an equivalent size and quality of raster image. Let’s say I want an 810×610 pixel image with an 800×600 blue rectangle, with a 2 pixel red border in it. An SVG file for this image would be only 160 bytes. A PNG image of the same thing comes in at about 4,000 bytes, and a JPEG of the same visual quality is about 34,000 bytes.

We can take a look at those 160 bytes, as SVG is written in an XML-style markup language.

<svg xmlns="http://www.w3.org/2000/svg" width="810" height="610">
<rect x="5" y="5" width="800" height="600" fill="blue" stroke="red" stroke-width="2"/>
</svg>

This ability to produce high quality, geometrically precise diagram, makes SVG the perfect format to create my target face images. After all, a target face is just a few concentric circles.

Measurements

We want our target image to be as accurate as possible, so we’ll use the actual measurements of a target face to create it. The World Archery Rulebook says

The 122cm, 80cm, 60cm and 40cm faces are divided into five concentric colour zones arranged from the centre outwards as follows: yellow (gold), red, light blue, black and white. Each colour is divided by a thin line into two zones of equal width thus making 10 scoring zones of equal width when measured from the centre of the gold:

Rulebook | World Archery

and this really just tells us what we already intuitively know – the rings are all of equal width. So, for a 122cm face, the diameter outside ring of the outer-white zone is 122cm, and then we just subtract 12.2cm to get the diameter of the other zones, to produce this table of dimensions

RingDiameter (cm)
Outer-white (1)122
Inner-white (2)109.8
Outer-black (3)97.6
Inner-black (4)85.4
Outer-blue (5)73.2
Inner-blue (6)61
Outer-red (7)48.8
Inner-red (8)36.6
Outer-gold (9)24.4
Inner-gold (10)12.2

With these measurements we can draw our first target. With the SVG code, we can just use the numbers without the cm units – these are scalable, so we can adjust the actual size later. The World Archery rulebook also states that the zones shall be divided by a thin black line of no more than 2mm. In this SVG, I’ve used 2mm between each colour, and 1mm for the subdivision within each colour.

The X-ring, or inner-10 is half the size of the 10-ring, with a diameter of 6.1cm, and we can also add a cross at the center (sometimes called a “pinhole” or “spider”), to get this.

It’s very important to note that the black dividing lines should be entirely within the scoring ring. This is actually remarkably hard in an SVG. The default for the border (or “stroke” in SVG terminology) is for it to be exactly on the border, with half of the stroke width inside the shape and half outside. There is a proposal for a future version of the SVG spec to include a stroke-alignment tag which would let you control this explicitly, but it’s not there yet. As a fix for this, I’ve just reduced the radius of each zone by half a stroke-width, so when it’s rendered with half of the stroke outside the shape, it will be the perfect size again.

Colours

The WA Rulebook also helpfully lists the official colours for target faces. White and black are pretty simple, but the colours are listed using Pantone identifiers – 107U for the Gold, 032U for Red, and 306U for the Blue. We can convert those into HTML/CSS style colours #FFE552, #F65058, #00B4E4 respectively, and using those can now create the full colour version for the first time. If you click on this, you’ll see that it really is infinitely zoomable (or at least as far as your browser will allow) without any loss of quality. The final SVG code is only 600 bytes (although the overall file is double that due to the addition of some Creative Commons license code).

Other faces

Following the same basic concept, we can make some different types of face. Some of these need a little bit of maths and consultation with the rule book to figure out where to place the multiple targets on the 3 and 5-spot faces. WA state that the centers of triple-spot faces should be 22cm from each other on 40cm faces for example, and ArcheryGB say there should be at least 2cm separation between scoring zones on the Worcester 5-spot face.

A 10-5 ring face, typically used by compound archers
40cm vertical triple-spot
40cm triangular triplespot
16inch Worcester face
A Worcester 5-spot face
Field archery face

Using these images

The images can be downloaded from the following links. You can freely use them for any purpose under the Creative Commons license, but I would appreciate attribution if you use them. SVG images are now compatible with all graphics applications and can be used in all of the Microsoft Office applications such as Powerpoint and Word.

Although I’ve done my best to get the measurements correct, please don’t try and use these to print actual target faces, as the sizes probably won’t be correct.


Posted

in

,

by

Tags:

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *