Working with SVGs

SVGs, or Scalable Vector Graphics, are a versatile type of vector file that can be easily adapted and optimised for use on the web and with cutting machines.

About SVGs

SVGs are an XML-based vector graphic format used to display images. The difference between the SVG file format and other image formats, such as PNG or JPEG, is that SVG code can be easily read and manipulated via CSS and Javascript, allowing a web browser or program to create the graphic instead of just displaying it. Because SVGs are vector based this makes them very flexible, allowing you to manipulate the graphic in ways that can't be done with other image formats.

Using SVGs for web design

SVGs are generally considered the best file format for putting illustrations, icons and logos on the web. Because SVGs are so flexible, they can be resized without losing any quality, looking crisp at all resolutions. This flexibility also allows you to keep the file sizes small and allows for easy editing to optimise your graphics for different web layouts.

Using SVGs with cutting machines

SVGs are the preferred file type for use with cutting machines such as Cricut, Silhouette, Eclips, Brother, and Cameo. This is for a number of reasons:

To prepare an SVG file for export to the web:
To prepare an SVG file for export to a cutting program: