Glossary of terms : SVG by Tracy Stephens-Wood

Welcome to our first Glossary page and this week it is SVG – What does it mean? Scaleable Vector Graphic is the long version of it. This will form the first section of our glossary with many more to come in the weeks to follow.

But what is it? An SVG is a standard graphics file type used for rendering two dimensional images on the internet. The SVG stores designs as a combination of vector and raster images; vectors are graphics consisting of points, lines, curves and shapes; while raster images consist of dots otherwise known as pixels often used in SVG to render effects.  Vectors are based on co-ordinates which the computer or other platform then join the dots. This means a vector-based SVG image can be made as big as you want, with no change to the vector element of the design. An SVG can also be made up of lots of different vector and raster layers to make up the one graphic.

SVG in web design… as intended

SVGs were originally invented to accurately reproduce designs at a variety of scales for adaptive web design. They can be written in XML code as part of the web page design and your browser then renders the image. The code uses tags to describe what is needed to specify the shapes colours and text that make up the image. As the viewing computer or platform renders the image, SVG files can be kept very small by comparison to traditional image files. When we export to SVG in our design package, the program is essentially creating this code for us.

This code may look like a lot of gobbledegook, if you don’t understand code; but only one line of code is required to draw a circle or similar shape. That’s because the XML language gets the browser to do most of the work by using tags such as “circle”. When we create designs with any shape or path tool, essentially you are just creating the tags to tell the browser what to do.

The circle is the shape it is because there’s a tag that says circle; there are other tags for different types of shapes. The position of the circle is specified by the cx and cy attributes; the radius is set by the r attribute; and the colour of the circle is located inside the <style> tag, which is called a hexadecimal colour or “hex colour” for short. Such as #f4795b which is a shade of orange. Web safe hexadecimal codes are available in guides for you to use safely across platforms.

Graphic Design

You don’t need to worry about any of this directly unless you are writing code for websites; SVGs are also used in the making of designs, icons and logos for modern branding and graphic design projects. This is because they can be enlarged for signage, etc. and not lose any distortion to the graphic element. They are also are usually very small file sizes which is much easier and quicker for sending to clients. 

For Crafters

Crafters use SVGs in different ways; those with cutters/plotters will use them for purely vector based output; those with sublimation printers will use then to hold both image and vector data for print and cut; they can also be used just like PNG and JPG images to hold only raster/bitmap/image data. Crafters also enjoy their ability to use different layers; so it is easy to alter the design during the creation process.

There are a lot of programs out there in the marketplace that can make and alter svg files. A few for example is Inkscape which has a high learning curve for a lot of people but it is a free program which a lot of people like. On the more expensive side you have Adobe Illustrator which is one of the most powerful programs but comes with a monthly cost. Other options include: Affinity Designer, CorelDRAW as well as several online design platforms that can also trace and/or create SVGs.

There are lots of programs out there that usually go with different types of cutting machines. Most of which can be used as stand alone programs and then saved as svg’s to send to whichever cutting machine you own.

Thank you hope you understand a bit more about what an svg is and found this glossary useful.

Next week, we will look at the meaning of another word that Natalie uses a lot in her crafting sessions. This will help us to build up our own Glossary of Terms. If there is anything you would like to know a bit more about feel free to post in our Facebook group.

Bits of information here were sourced from. https://blog.hubspot.com/website/what-is-an-svg-file